From 7f4bcf2439ed2bd9bf4ab9cb44feda869be79cf8 Mon Sep 17 00:00:00 2001 From: James Goldie Date: Sat, 9 Nov 2024 15:52:29 +1100 Subject: [PATCH 1/3] Widen sidebar layout mobile breakpoint Fixes #135 --- _extensions/closeread/closeread.css | 35 +++++++++++++++++++++------- _extensions/closeread/closeread.scss | 34 +++++++++++++++++++++++---- 2 files changed, 56 insertions(+), 13 deletions(-) diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css index 5092d2d..24f1c0a 100644 --- a/_extensions/closeread/closeread.css +++ b/_extensions/closeread/closeread.css @@ -86,17 +86,13 @@ transition: color 0.7s linear; } -/* mobile sizing (bootstrap: xs) is always overlay-center */ +/* mobile sizing is always overlay-center */ @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 { grid-template-columns: 1fr; } - .cr-section.sidebar-left .narrative-col, - .cr-section.sidebar-right .narrative-col, .cr-section.overlay-left .narrative-col, .cr-section.overlay-right .narrative-col, .cr-section.overlay-center .narrative-col { @@ -105,8 +101,6 @@ margin-inline: auto; background-color: transparent; } - .cr-section.sidebar-left .narrative-col .narrative, - .cr-section.sidebar-right .narrative-col .narrative, .cr-section.overlay-left .narrative-col .narrative, .cr-section.overlay-right .narrative-col .narrative, .cr-section.overlay-center .narrative-col .narrative { @@ -115,14 +109,37 @@ padding: 0.3em 0.5em; border-radius: var(--cr-narrative-border-radius); } - .cr-section.sidebar-left .sticky-col, - .cr-section.sidebar-right .sticky-col, .cr-section.overlay-left .sticky-col, .cr-section.overlay-right .sticky-col, .cr-section.overlay-center .sticky-col { grid-column: 1; } } +@media (max-width: 767.98px) { + .cr-section.sidebar-left, + .cr-section.sidebar-right { + grid-template-columns: 1fr; + } + .cr-section.sidebar-left .narrative-col, + .cr-section.sidebar-right .narrative-col { + grid-column: 1; + z-index: 1; + margin-inline: auto; + background-color: transparent; + } + .cr-section.sidebar-left .narrative-col .narrative, + .cr-section.sidebar-right .narrative-col .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); + } + .cr-section.sidebar-left .sticky-col, + .cr-section.sidebar-right .sticky-col { + grid-column: 1; + } +} +/* desktop sizing */ .overlay-left, .overlay-center, .overlay-right { diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss index 7f3f138..3028146 100644 --- a/_extensions/closeread/closeread.scss +++ b/_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 { @@ -174,7 +174,33 @@ } } -// layouts for wider-than-mobile sizing +// (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; + + .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; + } + } +} + +/* desktop sizing */ // overlay layouts use one column... .overlay-left, From 6b6832b945f61afaa2031445b5dd93c35f302634 Mon Sep 17 00:00:00 2001 From: James Goldie Date: Sat, 9 Nov 2024 15:58:03 +1100 Subject: [PATCH 2/3] Tweak sidebar width for gallery examples --- docs/gallery/examples/auden-poem/index.qmd | 2 +- docs/gallery/examples/minards-map/index.qmd | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/gallery/examples/auden-poem/index.qmd b/docs/gallery/examples/auden-poem/index.qmd index 059a95a..e933618 100644 --- a/docs/gallery/examples/auden-poem/index.qmd +++ b/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" diff --git a/docs/gallery/examples/minards-map/index.qmd b/docs/gallery/examples/minards-map/index.qmd index 2fbf3e6..c12257c 100644 --- a/docs/gallery/examples/minards-map/index.qmd +++ b/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' --- From 874866969af590d6295b3c3c77573db6b7d12233 Mon Sep 17 00:00:00 2001 From: James Goldie Date: Tue, 12 Nov 2024 10:15:07 +1100 Subject: [PATCH 3/3] Propogate min/max overlay width to sidebars on mobile --- _extensions/closeread/closeread.css | 4 ++++ _extensions/closeread/closeread.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css index 24f1c0a..2fe7140 100644 --- a/_extensions/closeread/closeread.css +++ b/_extensions/closeread/closeread.css @@ -100,6 +100,8 @@ 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); } .cr-section.overlay-left .narrative-col .narrative, .cr-section.overlay-right .narrative-col .narrative, @@ -126,6 +128,8 @@ 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); } .cr-section.sidebar-left .narrative-col .narrative, .cr-section.sidebar-right .narrative-col .narrative { diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss index 3028146..8c85af2 100644 --- a/_extensions/closeread/closeread.scss +++ b/_extensions/closeread/closeread.scss @@ -159,6 +159,8 @@ 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); @@ -185,6 +187,8 @@ 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);