« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/content/dependencies/generatePageLayout.js8
-rw-r--r--src/static/css/site.css40
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) {