refactor(nav): Add css vars

docs/scss/components/_nav.scss

@@ -3,6 +3,9 @@
  */
 
 body > nav {
+  --nav-element-spacing-horizontal: 0.75rem;
+  --nav-link-spacing-vertical: 1rem;
+  --nav-link-spacing-horizontal: 0.75rem;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 99;
   position: fixed;
@@ -26,31 +29,38 @@ body > nav {
   }
 
   // Band & Title
-  ul:first-of-type li {
-    // Brand
-    &:first-of-type {
-      a {
-        width: 3.5rem;
-        height: 3.5rem;
-        margin-left: calc(var(--spacing) * -1);
-        padding: 0;
-        background: var(--h1-color);
-        color: var(--nav-logo-color);
+  ul:first-of-type {
+    margin-left: calc(var(--spacing) * -1);
 
-        svg {
-          height: 3.5rem;
+    li {
+      padding: 0;
+  
+      // Brand
+      &:first-of-type {
+        a {
+          display: block;
+          margin: 0;
+          padding: 0;
+          background: var(--h1-color);
+          color: var(--nav-logo-color);
+  
+          svg {
+            display: block;
+            width: 3.5rem;
+            height: 3.5rem;
+          }
         }
       }
-    }
-
-    // Title
-    &:nth-of-type(2) {
-      display: none;
-      margin-left: var(--spacing);
-      color: var(--h1-color);
-
-      @media (min-width: map-get($breakpoints, "lg")) {
-        display: inline;
+  
+      // Title
+      &:nth-of-type(2) {
+        display: none;
+        margin-left: calc(var(--spacing) * 1.5);
+        color: var(--h1-color);
+  
+        @media (min-width: map-get($breakpoints, "lg")) {
+          display: inline;
+        }
       }
     }
   }

docs/scss/content/_typography.scss

@@ -10,11 +10,6 @@ section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
-a[role="button"] {
-  margin-right: calc(var(--typography-spacing-vertical) / 4);
-  margin-bottom: var(--typography-spacing-vertical);
-}
-
 [role="document"] {
   section > h1,
   section > h2,

docs/scss/layout/_aside.scss

@@ -17,6 +17,7 @@ main > aside {
     }
 
     a#toggle-docs-navigation {
+      display: block;
       margin: 0;
       margin-bottom: var(--spacing);
       padding: 0;
@@ -64,7 +65,6 @@ main > aside {
       }
     }
   }
-  
 
   li,
   summary {
@@ -73,8 +73,13 @@ main > aside {
     font-size: 16px;
   }
 
+  ul {
+    padding-left: 0.25rem;
+  }
+
   li a {
-    padding: 0.375rem 0.5rem;
+    --nav-link-spacing-vertical: 0.25rem;
+    --nav-link-spacing-horizontal: 0.75rem;
 
     svg {
       vertical-align: middle;
@@ -107,7 +112,7 @@ main > aside {
 
     &[open] {
       > summary {
-        margin-bottom: calc(var(--spacing) * 0.75);
+        margin-bottom: 0;
 
         &:not(:focus) {
           color: var(--h1-color);

docs/scss/layout/_documentation.scss

@@ -117,6 +117,13 @@
   }
 }
 
+// Docs: Buttons
+#buttons {
+  a[role="button"] {
+    margin-right: calc(var(--spacing) * 0.5);
+  }
+}
+
 // Docs: Forms
 #forms div.grid {
   grid-row-gap: 0;