eflux fonts. text styling

1 files changed, 32 insertions, 14 deletions

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;
 }