1 files changed, 89 insertions, 43 deletions

diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index cd3ef14..2472706 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,57 +1,103 @@
-.c-nav {
-    position: sticky;
-    z-index: 1000;
-    top: 0;
-    background-color: var(--nav--bg);
-    font-size: $nav--font-size;
-
-    &__items {
+@include namespace('nav') {
+    @include store((
+        --dims: (
+            --font-size: 15px,
+            --pad-y: 1em,
+            --pad-y-sm: .5em,
+            --item: (
+                --pad-x: 1em,
+                --pad-x-sm: .75em,
+                --pad-y: 1em,
+                --pad-y-sm: .75em,
+            ),
+        ),
+        --colors: (
+            --logo: (
+                --idle: (
+                    --fg: prop(--colors --fg-hi, $global: true),
+                ),
+                --hover: (
+                    --fg: prop(--colors --fg-lo, $global: true),
+                )
+            ),
+            --item: (
+                --idle: (
+                    --fg: prop(--colors --fg, $global: true),
+                ),
+                --hover: (
+                    --fg: prop(--colors --fg-lo, $global: true),
+                ),
+                --active: (
+                    --fg: prop(--colors --fg-lo, $global: true),
+                )
+            )
+        )
+    ));
+
+    @include component(namespace()) {
         display: flex;
-        align-items: baseline;
-    }
+        align-items: center;
+        padding: prop(--dims --pad-y) 0;
+        font-size: prop(--dims --font-size);
+
+        @include element('logo') {
+            display: inline-block;
+            margin: 0;
+            padding: prop(--dims --item --pad-y) 0;
+            color: prop(--colors --logo --idle --fg);
+            font-family: $font-fam--mono;
+            text-decoration: none;
+
+            &:link,
+            &:visited {
+                &:hover {
+                    background-color: transparent;
+                    color: prop(--colors --logo --hover --fg);
+                }
+            }
+        }
+
+        @include element('logo-symbol') {
+            display: block;
+            width:  $line-height * .9em;
+            height: $line-height * 1em;
+        }
 
-    &__logo {
-        display: inline-block;
-        margin: 0;
-        padding: $nav--item--pad-v 0;
-        color: var(--nav--logo--fg);
-        font-family: $font-fam--mono;
-        text-decoration: none;
+        @include element('item') {
+            display: inline-block;
+            margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
+            padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
+            color: prop(--colors --item --idle --fg);
+            text-decoration: none;
+            text-transform: uppercase;
 
-        &:link,
-        &:visited {
             &:hover {
                 background-color: transparent;
-                color: var(--nav--item--hover--fg);
+                color: prop(--colors --item --hover --fg);
+                text-decoration: underline;
+            }
+
+            @include modifier('active') {
+                border-color: prop(--colors --item --active --fg);
+                color: prop(--colors --item --active --fg);
                 font-weight: bold;
             }
         }
-    }
 
-    &__item {
-        display: inline-block;
-        margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
-        padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
-        border-bottom: 2px solid transparent;
-        color: var(--nav--item--idle--fg);
-        text-decoration: none;
-
-        &:hover {
-            background-color: transparent;
-            color: var(--nav--item--hover--fg);
-            font-weight: bold;
-        }
+        @include media('<=sm') {
+            padding: prop(--dims --pad-y-sm) 0;
 
-        &--active {
-            border-color: var(--nav--item--active--fg);
-            color: var(--nav--item--active--fg);
-            font-weight: bold;
-        }
-    }
+            @include element('logo', 'item') {
+                padding-top: prop(--dims --item --pad-y-sm);
+                padding-bottom: prop(--dims --item --pad-y-sm);
+            }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__item {
-            margin-left: $nav--item--spacing--sm - $nav--item--pad-h;
+            @include element('item') {
+                margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
+                margin-left: prop(--dims --item --pad-x-sm);
+                padding-right: prop(--dims --item --pad-x-sm);
+                padding-left: prop(--dims --item --pad-x-sm);
+            }
         }
     }
 }