Improve overlay narrative positioning

qmd-lab · Oct 20, 2024 · ed79c9c · ed79c9c
1 parent 276bc3e
commit ed79c9c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css
diff --git a/_extensions/closeread/closeread.css.map b/_extensions/closeread/closeread.css.map
diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss
@@ -21,7 +21,7 @@
 
     .trigger {
       padding-block: 45svh;
-      padding-inline: 1em;
+      padding-inline: 24px;
 
       p {
         margin-bottom: 0; // override bootstrap rule
@@ -115,7 +115,6 @@
 
 
 /* mobile sizing (bootstrap: xs) is always overlay-center */
-//@media (max-width: 575.98px) {
 @media (max-width: 575.98px) {
   .cr-section.sidebar-left,
   .cr-section.sidebar-right,
@@ -155,6 +154,7 @@
     grid-column: 1;
     z-index: 1;
     transition: opacity 0.5s ease-in-out;
+    max-width: 527.98px;
 
     .narrative {
       background-color: rgba(17, 17, 17, .85);
@@ -172,19 +172,17 @@
 // ... with inline margins set for narrative content depending on side
 .overlay-left {
   .narrative-col {
-    margin-inline-start: 5%;
-    margin-inline-end: 65%;
+    justify-self: start;
   }
 }
 .overlay-center {
   .narrative-col {
-    margin-inline: 30%;
+    justify-self: center;
   }
 }
 .overlay-right {
   .narrative-col {
-    margin-inline-start: 65%;
-    margin-inline-end: 5%;
+    justify-self: end;
   }
 }