From ef58809a37a7ad95c9bdef8e9f465adb3904ffdf Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 26 Mar 2021 22:48:01 +0100
Subject: WIP: Redesign

---
 assets/css/components/_nav.scss | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

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

diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 03118a9..900b4f2 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,10 +2,10 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --pad-y:     .5rem,
+            --height:    prop(--dims --nav --height, $global: true),
+            --pad-x:     2.5rem,
             --item: (
                 --pad-x: 1rem,
-                --pad-y: 1rem,
             ),
         ),
         --colors: (
@@ -32,11 +32,16 @@
         )
     ));
 
+    @include store((
+        --dims: (
+            --pad-x: prop(--container --dims --pad-x, $global: true),
+        )
+    ), 'md');
+
     @include store((
         --dims: (
             --item: (
                 --pad-x: .75em,
-                --pad-y: .75em,
             ),
         )
     ), 'sm');
@@ -47,15 +52,18 @@
         z-index:          10000;
         top:              0;
         left:             0;
-        align-items:      center;
-        padding:          prop(--dims --pad-y) 0;
+        height:           prop(--dims --height);
+        padding:          0 prop(--dims --pad-x);
         background-color: prop(--colors --bg);
         font-size:        prop(--dims --font-size);
 
+        @include element('logo', 'item') {
+            display:     flex;
+            align-items: center;
+            height:      100%;
+        }
+
         @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;
@@ -76,9 +84,8 @@
         }
 
         @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);
+            padding:         0 prop(--dims --item --pad-x);
             color:           prop(--colors --item --idle --fg);
             text-decoration: none;
             text-transform:  uppercase;
@@ -97,7 +104,7 @@
         }
 
         @include media('<=md') {
-            position: static;
+            width: 100%;
         }
     }
 }
-- 
cgit v1.2.3-70-g09d2