Begin site v2 and split SCSS into more manageable chunks.

2025-07-21 13:32:24 -04:00
parent 2bd92e6fdc
commit 689354fc7b
17 changed files with 455 additions and 151 deletions
--- a/src/partials/_nav_menu.scss
+++ b/src/partials/_nav_menu.scss
@@ -0,0 +1,99 @@
+.nav_menu {
+    /*
+    Remove default padding and style applied to ul for bullets.
+    */
+    padding: 0;
+    list-style: none;
+
+    display: grid;
+    grid-auto-flow: row;
+    gap: var(--spacing-menu-gap);
+    align-self: center;
+    margin: 0;
+
+    hr {
+        border-color: var(--accent-pink);
+        margin: 0 var(--spacing-horizontal);
+    }
+
+    .nav_body {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-small);
+        transition: var(--transition-fade);
+    }
+
+    .dropdown:hover .nav_body,
+    .dropdown .nav_body:hover,
+    .nav_body:hover {
+        transform: var(--transform-scale-x);
+        transition: var(--transition-cut);
+
+        .nav_title,
+        ion-icon {
+            color: var(--highlight-hover);
+            transition: var(--transition-cut);
+        }
+    }
+
+    .dropdown {
+        .dropdown_header {
+            display: grid;
+            grid-template-columns: 1fr min-content;
+            align-items: center;
+
+            ion-icon {
+                /*
+                This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
+                */
+                margin-right: 0.5rem;
+
+                align-self: center;
+                transition-duration: 0.25s;
+            }
+        }
+
+        .dropdown_body {
+            display: none;
+            border-bottom-left-radius: var(--border-radius-small);
+            border-bottom-right-radius: var(--border-radius-small);
+            background-color: var(--background-1);
+        }
+    }
+
+    .dropdown:hover {
+        .dropdown_header {
+            transform: var(--transform-scale-x);
+
+            ion-icon {
+                rotate: 90deg;
+                transition-duration: 0.25s;
+            }
+        }
+
+        .dropdown_body {
+            display: grid;
+        }
+    }
+
+    .nav_body,
+    .dropdown .nav_body,
+    .dropdown .dropdown_body {
+        .nav_title {
+            /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+            color: inherit;
+
+            text-decoration: none;
+            font-family: var(--font-family-generic);
+            font-weight: bold;
+            white-space: nowrap;
+            margin: 0 var(--spacing-horizontal);
+            transition: var(--transition-fade);
+            text-transform: uppercase;
+        }
+
+        .nav_title:hover {
+            color: var(--highlight-hover);
+            transition: var(--transition-cut);
+        }
+    }
+}