From 8e1e42fcb54c33816d00b26a949753e6c3c9a904 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 21 Mar 2021 12:52:39 +0100
Subject: WIP: Redesign

---
 assets/css/components/_nav.scss | 71 ++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 40 deletions(-)

(limited to 'assets/css/components/_nav.scss')

diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 2472706..8fc4564 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,13 +2,10 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --pad-y: 1em,
-            --pad-y-sm: .5em,
+            --pad-y:     1em,
             --item: (
                 --pad-x: 1em,
-                --pad-x-sm: .75em,
                 --pad-y: 1em,
-                --pad-y-sm: .75em,
             ),
         ),
         --colors: (
@@ -34,69 +31,63 @@
         )
     ));
 
+    @include store((
+        --dims: (
+            --pad-y: .5em,
+            --item: (
+                --pad-x: .75em,
+                --pad-y: .75em,
+            ),
+        )
+    ), 'sm');
+
     @include component(namespace()) {
-        display: flex;
+        display:     flex;
         align-items: center;
-        padding: prop(--dims --pad-y) 0;
-        font-size: prop(--dims --font-size);
+        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;
+            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);
+                    color:            prop(--colors --logo --hover --fg);
                 }
             }
         }
 
         @include element('logo-symbol') {
             display: block;
-            width:  $line-height * .9em;
-            height: $line-height * 1em;
+            width:   $line-height * .9em;
+            height:  $line-height * 1em;
         }
 
         @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);
+            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;
+            text-transform:  uppercase;
 
             &:hover {
                 background-color: transparent;
-                color: prop(--colors --item --hover --fg);
-                text-decoration: underline;
+                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;
-            }
-        }
-
-        @include media('<=sm') {
-            padding: prop(--dims --pad-y-sm) 0;
-
-            @include element('logo', 'item') {
-                padding-top: prop(--dims --item --pad-y-sm);
-                padding-bottom: prop(--dims --item --pad-y-sm);
-            }
-
-            @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);
+                color:        prop(--colors --item --active --fg);
+                font-weight:  bold;
             }
         }
     }
-- 
cgit v1.2.3-54-g00ecf