Stretch quicklink box links to fill leftover space

Author: JoelCDL

css/components/sidebarnav.css

@@ -14,12 +14,6 @@
       &:not(:last-child) {
         border-block-end: 1px solid oklch(88% 0 0deg);
       }
-
-      a {
-        display: flex;
-        align-items: center;
-        padding: 0.35rem var(--space2);
-      }
     }
   }
 
@@ -36,6 +30,8 @@
   }
 
   a {
+    display: block;
+    padding: 0.35rem var(--space2);
     text-decoration: none;
 
     &:focus,
@@ -44,3 +40,19 @@
     }
   }
 }
+
+@media (--min-width2) {
+  /* Balance all sidebarnav (quicklink) link heights
+  with all available vertical space within sidebarnav boxes: */
+  
+  .c-sidebarnav,
+  .c-sidebarnav :is(ul, li, a) {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .c-sidebarnav a {
+    justify-content: center;
+  }
+}

css/templates/home.css

@@ -9,8 +9,7 @@
     'serviceheading'
     'servicebox'
     'newsreel'
-    'quicklink1'
-    'quicklink2'
+    'quicklinks'
     'meet'
     'social'
     'footer'
@@ -24,7 +23,7 @@
     'serviceheading serviceheading'
     'servicebox servicebox'
     'newsreel newsreel'
-    'quicklink1 quicklink2'
+    'quicklinks quicklinks'
     'meet social'
     'footer footer'
     / 1fr 1fr;
@@ -33,9 +32,9 @@
   @media (--min-width2) {
     grid-template:
     'header header'
-    'slideshow quicklink1'
-    'slideshow quicklink2' 1fr
-    'serviceheading quicklink2'
+    'slideshow quicklinks'
+    'slideshow quicklinks'
+    'serviceheading quicklinks'
     'servicebox meet'
     'newsreel social'
     'footer footer'
@@ -70,12 +69,11 @@
     grid-area: newsreel;
   }
 
-  .c-quicklink1 {
-    grid-area: quicklink1;
-  }
-
-  .c-quicklink2 {
-    grid-area: quicklink2;
+  .c-quicklinks {
+    display: flex;
+    grid-area: quicklinks;
+    flex-direction: column;
+    gap: var(--space2);
   }
 
   .c-meet {

elements/1-pages/homepage.hbs

@@ -6,8 +6,10 @@
   {{ render '@serviceheading' }}
   {{ render '@servicebox' }}
   {{ render '@newsreel' }}
-  {{ render '@quicklink--1' }}
-  {{ render '@quicklink--2' }}
+  <aside class="c-quicklinks">
+    {{ render '@quicklink--1' }}
+    {{ render '@quicklink--2' }}
+  </aside>
   {{ render '@meet' }}
   {{ render '@social' }}
   {{ render '@footer' }}