Generate precompressed files, use variables for some nav-related values

2 files changed, 10 insertions, 3 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1ed64a5..f9c80da 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -7,6 +7,11 @@ $code-block-line-height: 1.4;
 
 $content-width: 75ch;
 
+$nav-item-spacing: 4ch;
+$nav-item-spacing-sm: 3ch;
+$nav-item-pad-h: 1ch;
+$nav-item-pad-v: 1rem;
+
 $page-item-prefix-max-chars: 3ch;
 $page-item-prefix-pad: 2ch;
 $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 834b6a0..a85c7d8 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -8,6 +8,8 @@
 
   &__logo {
     display: inline-block;
+    margin: 0;
+    padding: $nav-item-pad-v 0;
     color: var(--nav-logo-fg);
     text-decoration: none;
 
@@ -23,8 +25,8 @@
 
   &__item {
     display: inline-block;
-    padding: 1rem 1ch calc(1rem - 2px);
-    margin: 0 -1ch 0 3ch;
+    padding: $nav-item-pad-v $nav-item-pad-h calc(#{$nav-item-pad-v} - 2px);
+    margin: 0 (-1 * $nav-item-pad-h) 0 ($nav-item-spacing - $nav-item-pad-h);
     color: var(--nav-item-idle-fg);
     text-decoration: none;
     border-bottom: 2px solid transparent;
@@ -38,7 +40,7 @@
 
   @media (max-width: map-get($breakpoints, "sm")) {
     &__item {
-      margin-left: 2ch;
+      margin-left: $nav-item-spacing-sm - $nav-item-pad-h;
     }
   }