Break up and optimize dropdown styling.

src/includes/nav_menu.html

@@ -3,7 +3,7 @@
     <li class="nav_body"><a class="nav_title" href="#">Home</a></li>
 
     <!-- Minecraft -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title" href="#">Minecraft</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -20,7 +20,7 @@
     <li class="nav_body"><a class="nav_title" href="#">About</a></li>
 
     <!-- Pronoun Pages -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -32,7 +32,7 @@
     </li>
 
     <!-- External Links -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -46,7 +46,7 @@
     <hr />
 
     <!-- Public Services -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -57,7 +57,7 @@
     </li>
 
     <!-- Services -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>

src/partials/_nav_dropdown.scss

@@ -0,0 +1,39 @@
+.nav_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);
+    }
+}
+
+.nav_dropdown:hover {
+    .dropdown_header {
+        transform: var(--transform-scale-x);
+
+        ion-icon {
+            rotate: 90deg;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: grid;
+    }
+}

src/partials/_nav_menu.scss

@@ -1,3 +1,6 @@
+@use "nav_dropdown";
+@use "nav_title";
+
 .nav_menu {
     /*
     Remove default padding and style applied to ul for bullets.
@@ -22,8 +25,7 @@
         transition: var(--transition-fade);
     }
 
-    .dropdown:hover .nav_body,
+    .nav_dropdown:hover .nav_body,
-    .dropdown .nav_body:hover,
     .nav_body:hover {
         transform: var(--transform-scale-x);
         transition: var(--transition-cut);
@@ -34,66 +36,4 @@
             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);
-        }
-    }
 }

src/partials/_nav_title.scss

@@ -0,0 +1,17 @@
+.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);
+}