eflux fonts. text styling

4 files changed, 97 insertions, 15 deletions

diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
index c2ebcd7..ebc0103 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
@@ -29,7 +29,7 @@ export const ParagraphHeader = ({ paragraph, currentParagraph, currentAnnotation
       className={className}
       onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
-      {text}
+      <span>{text}</span>
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 64fc915..ea2f08c 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
+import './viewer.fonts.css'
 import './viewer.css'
 
 import actions from 'app/actions'
diff --git a/animism-align/frontend/app/views/viewer/viewer.css b/animism-align/frontend/app/views/viewer/viewer.css
index fba83bc..c52db20 100644
--- a/animism-align/frontend/app/views/viewer/viewer.css
+++ b/animism-align/frontend/app/views/viewer/viewer.css
@@ -1,23 +1,36 @@
-.viewer {
+.body.viewer {
+  height: calc(100% - 3.125rem);
   background: #fff;
   color: #000;
+  font-family: "Neue Haas Unica", sans-serif;
 }
 
 /* transcript */
 
 .transcript {
-  width: 100%;
-  height: calc(100% - 3.125rem);
+  position: absolute;
+  right: 0;
+  width: 30rem;
+  max-width: 100vw;
+  height: 100%;
   overflow: scroll;
   background: white;
   color: black;
   padding: 1rem;
+  border-left: 1px solid #000;
+  font-size: 15px;
+  line-height: 1.45;
+  transform: translateZ(0) translateX(100%);
+  transition: transform 0.2s;
+}
+
+.transcript.visible {
+  transform: translateZ(0) translateX(0);
 }
 
 /* general paragraph styles */
 
 .transcript .content {
-  font-family: 'Georgia', serif;
   width: 100%;
   padding-bottom: 6rem;
   position: relative;
@@ -30,35 +43,40 @@
 /* paragraph subtypes */
 
 .transcript .header {
-  font-size: 32px;
+  text-align: center;
+}
+.transcript .header span {
+  border-bottom: 1px solid;
 }
 
 .transcript .paragraph,
 .transcript .hidden {
-  font-size: 16px;
-  line-height: 1.5;
 }
 
 .transcript .blockquote {
   padding-left: 3rem;
-  line-height: 1.5;
+  line-height: 1.45;
 }
 
 /* sentences */
 
 .transcript span {
   margin-right: 4px;
+  box-shadow: 0 0 0 rgba(255,255,255,0.0);
 }
 .transcript .media span {
   margin-right: 0;
+  border-bottom: 1px solid;
+  cursor: pointer;
 }
 
 .transcript .paragraph .current {
-  box-shadow: -2px -3px 0 #fff,
-               2px -3px 0 #fff,
-              -2px  3px 0 #fff,
-               2px  3px 0 #fff;
+  box-shadow: -2px -1px 0 #e8e8e8,
+               2px -1px 0 #e8e8e8,
+              -2px  1px 0 #e8e8e8,
+               2px  1px 0 #e8e8e8;
   box-decoration-break: clone;
-  background: black;
-  color: white;
+  background: #e8e8e8;
+  color: #000;
+  transition: all 0.2s;
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.fonts.css b/animism-align/frontend/app/views/viewer/viewer.fonts.css
new file mode 100644
index 0000000..09631ee
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/viewer.fonts.css
@@ -0,0 +1,63 @@
+@font-face{
+  font-family: "Freight Text";
+  src: url("//freigtexprobook-webfont.woff2") format("woff2"),
+       url("/static/fonts/eflux/freigtexprobook-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "Freight Text";
+  src: url("/static/fonts/eflux/freigtexprobookit-webfont.woff2") format("woff2"),
+       url("/static/fonts/eflux/freigtexprobookit-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face{
+  font-family: "Freight Text";
+  src: url("/static/fonts/eflux/freigtexprobold-webfont.woff2") format("woff2"),
+       url("/static/fonts/eflux/freigtexprobold-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "Freight Text";
+  src: url("/static/fonts/eflux/freigtexproboldit-webfont.woff2") format("woff2"),
+       url("/static/fonts/eflux/freigtexproboldit-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face{
+  font-family: "Neue Haas Unica";
+  src: url("/static/fonts/eflux/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2") format("woff2"),
+       url("/static/fonts/eflux/27645c8a-608b-4abf-a2f1-c4407b576723.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "Neue Haas Unica";
+  src: url("/static/fonts/eflux/cc589c6c-1ce4-4279-8684-c378497d1c68.woff2") format("woff2"),
+       url("/static/fonts/eflux/8546c78d-5a38-4c7b-9371-5a70d803922a.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face{
+  font-family: "Neue Haas Unica";
+  src: url("/static/fonts/eflux/39bb8fb3-84a4-4ab8-ae45-db1834f5d807.woff2") format("woff2"),
+       url("/static/fonts/eflux/96fd4fb4-75db-412f-986d-d65380ee0ccf.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face{
+  font-family: "Neue Haas Unica";
+  src: url("/static/fonts/eflux/dfa9d078-533c-44d9-9dd9-deaafbff5a96.woff2") format("woff2"),
+       url("/static/fonts/eflux/4142b00a-232a-49e8-803c-541f8b932fa1.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}