4 - Sidebar Section

hlxsites · Oct 23, 2023 · ff505bd · ff505bd
1 parent 5bcdf5e
commit ff505bd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -168,14 +168,17 @@ function detectSidebar(main) {
   const sidebar = main.querySelector('.section.sidebar');
   if (sidebar) {
     main.classList.add('has-sidebar');
-    const sidebarOffset = sidebar.getAttribute('data-start-sidebar-at-section');
+    const sidebarOffset = Number.parseInt(
+      sidebar.getAttribute('data-start-sidebar-at-section') || '2',
+      10,
+    );
 
     const numSections = main.children.length - 1;
     main.style = `grid-template-rows: repeat(${numSections}, auto);`;
 
-    if (sidebarOffset && Number.parseInt(sidebar.getAttribute('data-start-sidebar-at-section'), 10)) {
-      const offset = Number.parseInt(sidebar.getAttribute('data-start-sidebar-at-section'), 10);
-      sidebar.style.gridRow = `${offset} / infinite`;
+    sidebar.style.gridRow = `${sidebarOffset} / infinite`;
+    for (let i = 0; i < sidebarOffset - 1; i++) {
+      main.children[i].classList.add('no-sidebar');
     }
 
     sidebar.querySelectorAll('h3').forEach((header) => {

diff --git a/styles/styles.css b/styles/styles.css
@@ -141,7 +141,11 @@ h6 { font-size: var(--heading-font-size-xs) }
 h1, h2 {
   font-size: 3.6rem;
   line-height: 4.68rem;
-  margin: 2rem 0;
+  margin-bottom: 2rem;
+}
+
+.section.no-sidebar h1 {
+  margin-top: 2rem;
 }
 
 h3 {
@@ -335,6 +339,10 @@ main img {
   padding: 0 1.2rem;
 }
 
+.section > div {
+  padding: 0 1.2rem;
+}
+
 @media (min-width: 900px) {
   .section > div,
   .section:first-child::after {
@@ -351,6 +359,8 @@ body:not(.blog-home-page) main .section:first-child::after {
   background: url('/images/blog-diagonal-lines.webp') repeat 0 0;
   margin-top: 2.4rem;
   margin-bottom: 3rem;
+  margin-left: 1.2rem;
+  margin-right: 1.2rem;
   max-width: 1200px;
 }
 
@@ -364,22 +374,25 @@ main .section.highlight {
     grid-template-columns: auto 480px 240px auto;
   }
 
-  main.has-sidebar > .section {
+  main.has-sidebar .section {
     grid-column: 2;
-    padding-right: 2.4rem;
+    padding-left: 0;
+    padding-right: 1.2rem;
   }
 
-  body:not(.blog-home-page) main.has-sidebar .section:first-child {
+  main.has-sidebar .section.no-sidebar {
     grid-column: 2 / 4;
+    padding: 0;
   }
 
   main.has-sidebar .section.sidebar {
     grid-column: 3;
     grid-row: 2 / inf;
-    padding-left: 2.4rem;
+    padding-right: 0;
+    padding-left: 1.2rem;
   }
 
-  main.has-sidebar > .section.full-width-no-sidebar {
+  main.has-sidebar > .section.full-width.no-sidebar {
     grid-column: 1 / 4;
   }
 }