Refactor headernav CSS

Author: JoelCDL

src/css/components/headernav.css

@@ -1,112 +1,124 @@
 /***** Header Nav Component *****/
 
 .c-headernav {
-  --headernav-section-padding: var(--space3);
-  --headernav-item-margin: var(--space3);
-
   .no-popover & {
     ul ul {
       display: none;
     }
   }
 
-  ul {
+  /* ul {
     margin: unset;
     padding: unset;
     list-style-type: none;
+  } */
 
-    li {
-      margin: unset;
-      padding: unset;
-    }
+  /* li {
+    margin: unset;
+    padding: unset;
+  } */
+
+  /* Panel columns (no columns, by default). These are set via 'columns-[#]' classes defined in the top-level menu items within WP Menus: */
+  .columns-2 > ul {
+    column-count: 2;
   }
 
-  @media (--min-width2) {
-    a {
-      display: block;
-    }
-  
-    /* Nav bar and top sections: */
-    > ul {
-      display: flex;
-    }
-  
-    > ul > li {
-      flex: 1 1 auto;
-      anchor-scope: all;
-
-      &:not(:last-child) {
-        border-inline-end: 1px solid oklch(55% 0 0deg);
-      }
-    }
-  
-    /* Nav bar links are anchors for popover panels: */
-    > ul > li > a {
-      anchor-name: --headernav-anchor;
-      padding: var(--space1);
-      background: linear-gradient(oklch(95% 0 0deg), oklch(88% 0 0deg));
-      color: oklch(36% 0 0deg);
-      text-align: center;
-      text-decoration: none;
-  
-      &:focus,
-      &:hover {
-        color: var(--color-blue);
-        text-decoration: underline;
-      }
-    }
+  .columns-3 > ul {
+    column-count: 3;
   }
+}
+
+.c-headernav__section {
+  flex: 1 1 auto;
+  anchor-scope: all;
+
+  &:not(:last-child) {
+    border-inline-end: 1px solid oklch(55% 0 0deg);
+  }
+}
+
+/* Nav bar links are anchors for popover panels: */
 
-  /* Popover panels: */
-  [popover] {
-    position-anchor: --headernav-anchor;
-    top: anchor(bottom);
-    left: anchor(left);
-    margin: 0;
-    transition: opacity, display, overlay;
-    transition-duration: 0.3s;
-    transition-behavior: allow-discrete;
-    border: unset;
-    opacity: 0;
-  
-    &:popover-open {
-      opacity: 1;
-  
-      @starting-style {
-        opacity: 0;
-      }
+.c-headernav__link {
+  anchor-name: --headernav-anchor;
+  padding: var(--space1);
+  background: linear-gradient(oklch(95% 0 0deg), oklch(88% 0 0deg));
+  color: oklch(36% 0 0deg);
+  text-align: center;
+  text-decoration: none;
+
+  &:focus,
+  &:hover {
+    color: var(--color-blue);
+    text-decoration: underline;
+  }
+}
+
+.c-headernav__popover {
+  position-anchor: --headernav-anchor;
+  top: anchor(bottom);
+  left: anchor(left);
+  margin: 0;
+  transition: opacity, display, overlay;
+  transition-duration: 0.3s;
+  transition-behavior: allow-discrete;
+  border: unset;
+  opacity: 0;
+
+  &:popover-open {
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
     }
   }
 
-  > ul > li > ul {
-    padding: var(--headernav-section-padding);
-    column-gap: calc(var(--headernav-section-padding) * 2);
-    column-rule: 1px solid oklch(88% 0 0deg);
-    column-width: 9.5em;
-    border-inline: 1px solid oklch(88% 0 0deg);
-    border-block-end: 1px solid oklch(88% 0 0deg);
-    background-color: oklch(95% 0 0deg);
-    box-shadow: 3px 3px 3px oklch(88% 0 0deg / 70%);
+  /* ul {
+    margin: unset;
+    padding: unset;
+    list-style-type: none;
+  } */
+
+  /* li {
+    margin: unset;
+    padding: unset;
+  } */
+
+  /* Sections: */
+
+  > li {
+    border: solid red;
   }
 
-  /* Panel columns (no columns, by default). These are set via 'columns-[#]' classes defined in the top-level menu items within WP Menus: */
-  > ul > .columns-2 > ul {
-    column-count: 2;
+  /* Section lists after the section heading link: */
+
+  > li > ul {
+    break-inside: avoid;
+    border: solid orange;
   }
 
-  > ul > .columns-3 > ul {
-    column-count: 3;
+  /* Keep section links together with section heading link: */
+
+  li {
+    break-inside: avoid;
   }
 
-  /* Panel lists: */
-  > ul > li > ul > li {
-    break-inside: avoid; /* Firefox */
+  /* Section lists: */
+
+  li li {
+    margin-block-end: 1rem;
   }
 
-  /* Panel list links: */
-  > ul > li > ul > li > a {
+  /* Section heading links: */
+
+  > li > a {
     margin-block-end: var(--headernav-item-margin);
     color: var(--color-dark-red);
+  }
+
+  /* All section links: */
+
+  a {
     text-decoration: none;
 
     &:focus,
@@ -115,29 +127,32 @@
     }
   }
 
-  /* Panel sub-list 'heading' links: */
-  > ul > li > ul > li > a:only-child {
-    color: var(--color-blue);
-  }
+  /* Section heading links without a following list: */
 
-  /* Panel sub-lists: */
-  > ul > li > ul > li > ul {
-    padding-inline: var(--space1);
-    break-inside: avoid; /* Firefox */
+  > li > a:only-child {
+    color: var(--color-blue);
   }
+}
 
-  /* Panel sub-list links: */
-  > ul > li > ul > li > ul > li > a {
-    text-decoration: none;
+.c-headernav__popover {
+  padding: var(--space3);
+  column-gap: calc(var(--space3) * 2);
+  column-rule: 1px solid oklch(88% 0 0deg);
+  column-width: 9.5em;
+  border-inline: 1px solid oklch(88% 0 0deg);
+  border-block-end: 1px solid oklch(88% 0 0deg);
+  background-color: oklch(95% 0 0deg);
+  box-shadow: 3px 3px 3px oklch(88% 0 0deg / 70%);
+}
 
-    &:focus,
-    &:hover {
-      text-decoration: underline;
+@media (--min-width2) {
+  .c-headernav {
+    a {
+      display: block;
     }
-  }
 
-  /* All panel list items: */
-  > ul > li li {
-    margin-block-end: var(--headernav-item-margin);
+    > ul {
+      display: flex;
+    }
   }
 }