Refactor home template to center layout at large screen

cdlib · May 10, 2024 · 5403c83 · 5403c83
1 parent d5081e7
commit 5403c83
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 74 deletions.
diff --git a/css/templates/home.css b/css/templates/home.css
@@ -1,69 +1,62 @@
 /**** Home Template ****/
 
 .t-home {
-  --section-inline-padding: clamp(var(--space-lg), 7vw, 5rem);
-  --section-padding: 2rem var(--section-inline-padding);
-  --home-section-columns: repeat(auto-fill, minmax(20rem, 1fr) minmax(20rem, 1fr)); /* toggled to this value or 'auto' in topicbox.js */
-
-  & .c-header,
+  & .t-header,
+  & .t-banner,
+  & .t-top-section,
+  & .t-help-section,
+  & main,
   & > footer {
-    padding-inline: var(--section-inline-padding);
-    border-block-start: 4px solid var(--color-gold);
-    background-color: black;
+    display: grid;
+    grid-template-columns: 1fr minmax(auto, 120rem) 1fr;
+    column-gap: var(--space-base);
+
+    & > * {
+      grid-column: 2;
+    }
   }
 
-  & .c-banner {
-    padding-inline: clamp(var(--space-lg), 7vw, 10rem);
+  & .t-header,
+  & > footer {
+    background-color: black;
+    border-block-start: 4px solid var(--color-gold);
   }
 
-  & .c-home-subheading {
-    grid-column: 1 / -1;
+  & .t-banner {
+    background-color: var(--color-gold);
   }
 
   & .t-top-section {
-    display: grid;
-    gap: var(--space-sm) var(--space-lg);
-    grid-template-columns: 1fr 1fr;
-    container-type: inline-size;
+    row-gap: var(--space-sm);
     padding-block: var(--space-sm) var(--space-lg);
-    padding-inline: var(--section-inline-padding);
     background: linear-gradient(150deg, var(--color-blue), oklch(43% 0.07 200deg));
     box-shadow: inset 0 5px 5px oklch(20% 0 0deg / 30%);
   }
 
   & .c-qlinks-header {
-    grid-column: 1 / 3;
     margin-block-start: var(--space-base);
   }
 
-  & .c-quicklinks--cdl {
-    grid-column: 1 / 3;
-  }
-
-  & .c-quicklinks--ucop {
-    grid-column: 1 / 3;
-  }
-
   & .c-feature {
-    grid-column: 1 / 3;
     margin-block-start: var(--space-lg);
   }
 
   & .t-help-section {
-    display: grid;
-    grid-template-columns: var(--home-section-columns);
-    gap: var(--space-lg);
-    padding: var(--section-padding);
+    row-gap: var(--space-lg);
+    padding-block: var(--space-lg);
     background: linear-gradient(150deg, var(--color-orange), oklch(63% 0.15 55deg));
     box-shadow: inset 0 5px 5px oklch(20% 0 0deg / 15%), inset 0 -5px 5px oklch(20% 0 0deg / 15%);
   }
 
   & main {
+    row-gap: var(--space-lg);
+    padding-block: var(--space-lg) 4rem;
+    background-color: var(--color-tan);
+  }
+
+  & .t-topicbox-group {
     display: grid;
-    grid-template-columns: var(--home-section-columns);
     gap: var(--space-lg);
-    padding: var(--section-padding);
-    background-color: var(--color-tan);
   }
 }
 
@@ -78,32 +71,38 @@
   }
 }
 
-@container (width > 1500px) {
+@media (width > 50rem) {
   .t-home {
-    & .c-qlinks-header {
-      grid-column: 1;
+    & .t-topicbox-group {
+      grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr) minmax(20rem, 1fr)); /* toggled to this value or 'auto' in topicbox.js */
     }
+  }
+}
 
-    & .c-quicklinks--cdl {
-      grid-column: 1;
-    }
-
-    & .c-quicklinks--ucop {
-      grid-column: 1;
-    }
-
-    & .c-feature {
-      grid-column: 2;
-      grid-row: 2 / 5;
-      margin-block-start: 0;
+@media (width > 90rem) {
+  .t-home {
+    & .t-top-section {
+      grid-template-columns: 1fr minmax(0, 59.5rem) minmax(0, 59.5rem) 1fr;
+
+      & .c-qlinks-header,
+      & .c-quicklinks--cdl,
+      & .c-quicklinks--ucop {
+        margin-inline-end: var(--space-sm);
+      }
+
+      & .c-feature {
+        grid-column: 3;
+        grid-row: 2 / 5;
+        margin-block-start: unset;
+        margin-inline-start: var(--space-sm);
+      }
     }
   }
 }
 
 @media (width > 140rem) {
   .t-home {
-    & .t-help-section,
-    & main {
+    & .t-topicbox-group {
       grid-template-columns: repeat(5, minmax(20rem, 1fr));
     }
   }

diff --git a/src/templates/home.hbs b/src/templates/home.hbs
@@ -1,8 +1,12 @@
 <div class="t-home js-home">
   <header>
     {{ render '@skipnav' }}
-    {{ render '@header' }}
-    {{ render '@banner' }}
+    <div class="t-header">
+      {{ render '@header' }}
+    </div>
+    <div class="t-banner">
+      {{ render '@banner' }}
+    </div>
     <div class="t-top-section">
       {{ render '@qlinks-header' }}
       {{ render '@quicklinks' }}
@@ -12,34 +16,44 @@
     </div>
     <div class="t-help-section">
       <h2 class="c-home-subheading">Help With&hellip;</h2>
-      {{ render '@topicbox' }}
-      {{ render '@topicbox--2' }}
-      {{ render '@topicbox' }}
-      {{ render '@topicbox--2' }}
+      <div class="t-topicbox-group">
+        {{ render '@topicbox' }}
+        {{ render '@topicbox--2' }}
+        {{ render '@topicbox' }}
+        {{ render '@topicbox--2' }}
+      </div>
     </div>
   </header>
   <main id="maincontent">
     <h2 id="all" class="c-home-subheading">About CDL</h2>
-    {{ render '@topicbox--3' }}
-    {{ render '@topicbox--3' }}
-    {{ render '@topicbox--3' }}
-    {{ render '@topicbox--3' }}
+    <div class="t-topicbox-group">
+      {{ render '@topicbox--3' }}
+      {{ render '@topicbox--3' }}
+      {{ render '@topicbox--3' }}
+      {{ render '@topicbox--3' }}
+    </div>
     <h2 class="c-home-subheading">Resources to Do Your Work</h2>
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
+    <div class="t-topicbox-group">
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+    </div>
     <h2 class="c-home-subheading">Communications</h2>
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
-    {{ render '@topicbox--4' }}
+    <div class="t-topicbox-group">
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+      {{ render '@topicbox--4' }}
+    </div>
     <h2 id="employee" class="c-home-subheading">Human Resources</h2>
-    {{ render '@topicbox--5' }}
-    {{ render '@topicbox--5' }}
-    {{ render '@topicbox--5' }}
-    {{ render '@topicbox--5' }}
+    <div class="t-topicbox-group">
+      {{ render '@topicbox--5' }}
+      {{ render '@topicbox--5' }}
+      {{ render '@topicbox--5' }}
+      {{ render '@topicbox--5' }}
+    </div>
   </main>
   <footer>
     {{ render '@footer' }}