diff options
-rw-r--r-- | src/content/dependencies/generatePageLayout.js | 8 | ||||
-rw-r--r-- | src/static/css/site.css | 40 |
2 files changed, 46 insertions, 2 deletions
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index f92a80cd..a45f7415 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -454,14 +454,15 @@ export default { let showingSidebarLeft; let showingSidebarRight; + let sidebarsInContentColumn = false; const leftSidebar = getSidebar('leftSidebar', 'sidebar-left', willShowSearch); const rightSidebar = getSidebar('rightSidebar', 'sidebar-right', false); if (willShowSearch) { if (html.isBlank(leftSidebar)) { - leftSidebar.setSlot('initiallyHidden', true); - showingSidebarLeft = false; + sidebarsInContentColumn = true; + showingSidebarLeft = true; } leftSidebar.setSlot( @@ -732,6 +733,9 @@ export default { showingSidebarRight && {class: 'showing-sidebar-right'}, + sidebarsInContentColumn && + {class: 'sidebars-in-content-column'}, + [ skippersHTML, layoutHTML, diff --git a/src/static/css/site.css b/src/static/css/site.css index 5515030f..62cfdf03 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -179,6 +179,16 @@ body::before, .wallpaper-part { display: none; } +.sidebar-column.always-content-column { + /* duplicated in thin & medium media query */ + position: static !important; + max-width: unset !important; + flex-basis: unset !important; + margin-right: 0 !important; + margin-left: 0 !important; + width: 100%; +} + .sidebar-multiple { display: flex; flex-direction: column; @@ -3329,6 +3339,8 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r display: none; } + /* Duplicated for "sidebars in content column" */ + .layout-columns { flex-direction: column; } @@ -3346,6 +3358,8 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r width: 100%; } + /* End duplicated for "sidebars in content column" */ + .sidebar .news-entry:not(.first-news-entry) { display: none; } @@ -3359,6 +3373,32 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r } } +/* Layout - "sidebars in content column" + * This is the same code as immediately above, for medium and + * thin layouts, but can be opted into by the page itself + * instead of through a media query. + */ + +#page-container.sidebars-in-content-column +.layout-columns { + flex-direction: column; +} + +#page-container.sidebars-in-content-column +.layout-columns > *:not(:last-child) { + margin-bottom: 10px; +} + +#page-container.sidebars-in-content-column +.sidebar-column { + position: static !important; + max-width: unset !important; + flex-basis: unset !important; + margin-right: 0 !important; + margin-left: 0 !important; + width: 100%; +} + /* Layout - Thin (phones) */ @media (max-width: 600px) { |