1 files changed, 28 insertions, 7 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 7a45e37..e484ae5 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -3,6 +3,10 @@
 .footnotes-element {
   position: relative;
 }
+.viewer-nav > .nav-row > div.nav-footnotes {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
 .nav-footnotes {
   flex-direction: column;
   position: absolute;
@@ -12,7 +16,7 @@
   max-height: 50vh;
   transform: translateY(100vh) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
-  padding: 0.5rem 0.75rem 0 0.75rem;
+  padding: 0 0.75rem 0 0.75rem;
   background: black;
   border-top: 1px solid white;
   border-right: 1px solid white;
@@ -27,6 +31,14 @@
   border-bottom: 1px solid white;
   bottom: auto;
 }
+.checklist-open.footnotes-open .nav-footnotes {
+  display: flex;
+  flex-direction: column-reverse;
+  transform: translateZ(0) translateY(0);
+}
+.checklist-open .nav-footnotes .nav-return {
+  padding-top: 0.25rem;
+}
 .footnotes-open .nav-footnotes {
   transform: translateZ(0) translateY(-25rem);
 }
@@ -35,8 +47,19 @@
   opacity: 1;
   z-index: 10;
 }
+
+.checklist-open .nav-footnotes-close {
+  display: none;
+}
+.checklist-open .nav-footnotes-gradient {
+  bottom: 0;
+}
+
+/* close footnotes */
+
 .nav-footnotes-close {
   text-align: right;
+  margin-top: 0.5rem;
   height: 1rem;
   margin-bottom: 0.5rem;
   cursor: pointer;
@@ -49,6 +72,9 @@
 .nav-footnotes-close svg line {
   stroke: white;
 }
+
+/* scrolling element */
+
 .nav-footnotes-scroll {
   position: relative;
   min-height: 10rem;
@@ -60,7 +86,6 @@
   line-height: 1.3;
   font-family: "Freight Text", serif;
   padding: 0.25rem 0;
-  margin-bottom: 3rem;
 }
 .nav-footnotes-gradient {
   position: absolute;
@@ -90,14 +115,10 @@
   border-bottom: 1px dotted;
   cursor: pointer;
 }
-.nav-footnotes .nav-return {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 .nav-footnotes .note-spacer {
   height: 10vh;
 }
+
 .viewer-nav .nav-footnotes .nav-return .arrow polygon {
   fill: #fff;
 }