Merge pull request #138 from qmd-lab/jimjam-slam/issue135-Increase-mo…

…bile-breakpoint-for-sidebar-layouts

Issue 135: increase mobile breakpoint for sidebar layouts

_extensions/closeread/closeread.scss

@@ -145,10 +145,10 @@
 }
 
 
-/* mobile sizing (bootstrap: xs) is always overlay-center */
+/* mobile sizing is always overlay-center */
+
+// (switch to mobile sizing from overlay layouts at bootstrap xs)
 @media (max-width: 575.98px) {
-  .cr-section.sidebar-left,
-  .cr-section.sidebar-right,
   .cr-section.overlay-left,
   .cr-section.overlay-right,
   .cr-section.overlay-center {
@@ -159,6 +159,36 @@
       z-index: 1;
       margin-inline: auto;
       background-color: transparent;
+      max-width: var(--cr-narrative-overlay-max-width);
+      min-width: var(--cr-narrative-overlay-min-width);
+
+      .narrative {
+        background-color: var(--cr-narrative-background-color-overlay);
+        color: var(--cr-narrative-text-color-overlay);
+        padding: 0.3em 0.5em;
+        border-radius: var(--cr-narrative-border-radius);
+      }
+    }
+
+    .sticky-col {
+      grid-column: 1;
+    }
+  }
+}
+
+// (sidebar layouts switch to overlay-center at a wider breakpoint: sm)
+@media (max-width: 767.98px) {
+  .cr-section.sidebar-left,
+  .cr-section.sidebar-right {
+    grid-template-columns: 1fr;
+
+    .narrative-col {
+      grid-column: 1;
+      z-index: 1;
+      margin-inline: auto;
+      background-color: transparent;
+      max-width: var(--cr-narrative-overlay-max-width);
+      min-width: var(--cr-narrative-overlay-min-width);
 
       .narrative {
         background-color: var(--cr-narrative-background-color-overlay);
@@ -174,7 +204,7 @@
   }
 }
 
-// layouts for wider-than-mobile sizing
+/* desktop sizing */
 
 // overlay layouts use one column...
 .overlay-left,

docs/gallery/examples/auden-poem/index.qmd

@@ -10,7 +10,7 @@ format:
       narrative-text-color-sidebar: white
       narrative-font-family: 'Georgia, "Times New Roman", Times, serif'
       narrative-font-size: 1.25rem
-      narrative-sidebar-width: minmax(400px, 1fr)
+      narrative-sidebar-width: minmax(320px, 1fr)
       narrative-border-radius: 5px
       narrative-background-color-overlay: "#111111dd"
       narrative-background-color-sidebar: "#111111"

docs/gallery/examples/minards-map/index.qmd

@@ -13,6 +13,7 @@ format:
       narrative-background-color-overlay: transparent
       narrative-background-color-sidebar: transparent
       section-background-color: transparent
+      narrative-sidebar-width: minmax(320px, 1fr)
       narrative-text-color-overlay: black
       narrative-font-family: 'et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'
 ---