1 files changed, 46 insertions, 22 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index 4858d7a..b357efe 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -4,13 +4,13 @@
   position: absolute;
   bottom: 0;
   left: 0;
+  height: 22rem;
   width: 100%;
   background: black;
   color: white;
   display: block;
   transition: transform 0.2s;
   transform: translateZ(0) translateY(25rem);
-  border-top: 1px solid #fff;
 }
 .nav-open .viewer-sections {
   transform: translateZ(0) translateY(0);
@@ -19,15 +19,46 @@
   transform: translateZ(0) translateY(calc(3rem - 100vh));
   z-index: 20;
 }
+
+/* sections nav */
+
 .sections-nav {
   z-index: 22;
+  border-top: 1px solid white;
+  background: black;
+}
+.sections-nav.viewer-nav > .nav-row {
+  z-index: 24;
+  background: black;
+  padding: 0;
+}
+.sections-nav .link {
+  position: relative;
+  height: 3rem;
+  padding: 0.25rem 1rem 0.25rem 0.25rem;
+}
+.sections-nav .subscribe-link {
+  border-right: 1px solid white;
+}
+.sections-nav .share-link {
+  border-right: 1px solid white;
+}
+.sections-nav .footnotes-link {
+  border-left: 1px solid white;
+}
+.sections-nav .transcript-link {
+  padding-left: 1rem;
+  border-left: 1px solid white;
 }
 
 /* scrolling part */
 
 .viewer-sections .viewer-sections-scroll {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  height: 22rem;
+  height: 19rem;
   white-space: nowrap;
   overflow-x: scroll;
   overflow-y: hidden;
@@ -35,25 +66,6 @@
 .checklist-open .viewer-sections .viewer-sections-scroll {
   overflow-x: hidden;
 }
-.viewer-sections-scroll::-webkit-scrollbar {
-  cursor: pointer;
-  user-select: none;
-  height: 4px;
-  width: 4px;
-}
-.viewer-sections-scroll::-webkit-scrollbar-button {
-  display: block;
-  width: 0;
-  height: 0;
-}
-.viewer-sections-scroll::-webkit-scrollbar-track-piece {
-  background: rgba(211,211,211,0.8);
-}
-.viewer-sections-scroll::-webkit-scrollbar-thumb {
-  display: block;
-  background: #000;
-}
-
 
 /* clickable section indicators */
 
@@ -128,4 +140,16 @@
   left: 0;
   height: 3px;
   background: #fff;
-}
\ No newline at end of file
+}
+
+/* Boxes that emerge from the nav */
+
+.nav-return {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  left: -0.5rem;
+  padding: 0.5rem 0 0.2rem 0;
+}