1 files changed, 46 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
index 27d713d..ce75471 100644
--- a/animism-align/frontend/app/views/viewer/viewer.mobile.css
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 600px) {
+@media (max-device-width: 600px) {
 
   /* document sizing */
 
@@ -58,6 +58,13 @@
 
   /* logo and header icons */
 
+  .eflux-header {
+  }
+  .site-intro {
+    height: calc(100vh - 4.5rem);
+    margin-top: 4.5rem;
+    background-size: auto 105%;
+  }
   .eflux-nav .transcript-icon {
     display: none;
   }
@@ -65,6 +72,7 @@
   .eflux-nav .transcript-icon {
     width: 2.5rem;
     height: 2.5rem;
+    box-shadow: 0.3px 0.6px 2.6px rgba(0,0,0,0.3);
   }
   .eflux-logo {
     left: 50%;
@@ -89,7 +97,6 @@
   .sections-nav > .nav-row > div.checklist-element {
     
   }
-  .viewer-nav .link.next-link,
   .sections-nav > .nav-row > div.subscribe-link,
   .sections-nav > .nav-row > div.footnotes-link,
   .sections-nav > .nav-row > div.transcript-link {
@@ -222,3 +229,40 @@
     padding-right: 1.0rem;
   }
 }
+
+
+/* if the introduction is the only section that's enabled... */
+
+.first-section-only .checklist-section,
+.first-section-only .viewer-section .section-thumbnail {
+  filter: grayscale(100%);
+  opacity: 0.5;
+}
+.first-section-only .checklist-section:first-child,
+.first-section-only .viewer-section.current-section .section-thumbnail {
+  filter: grayscale(0%);
+  opacity: 1.0;
+}
+.first-section-only .viewer-nav .link.next-link {
+  display: none;
+}
+.first-section-only .section-limited {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 12rem;
+  height: 8rem;
+  padding: 0.0 1.0rem;
+  line-height: 1.4;
+  z-index: 1;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0.0;
+  transition: 0.5s opacity;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.first-section-only .section-limited.visible {
+  opacity: 1.0;
+}
+\ No newline at end of file