Fix page design, improved header design

1 files changed, 31 insertions, 16 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 81e4d4f..e88d167 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,9 +1,12 @@
 @include namespace('header') {
     @include store((
         --colors: (
-            --fg: prop(--colors --fg-hi, $global: true),
+            --bg:     prop(--colors --bg-lo, $global: true),
+            --fg:     prop(--colors --fg-lo, $global: true),
+            --border: prop(--colors --bg, $global: true),
             --hover: (
-                --fg: prop(--colors --fg-lo, $global: true),
+                --bg: prop(--colors --fg-lo, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
             ),
             --active: (
                 --fg: prop(--colors --fg-lo, $global: true),
@@ -11,32 +14,44 @@
         ),
         --dims: (
             --height: 4rem,
-            --pad-x: .6rem,
+            --icon:   1.5rem,
+            --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))),
         )
     ));
 
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+        )
+    ), 'light');
+
     @include component(namespace()) {
-        display:         flex;
-        flex-direction:  row;
-        justify-content: flex-start;
-        height:          prop(--dims --height);
+        display: flex;
+        height:  prop(--dims --height);
 
         @include element('item') {
-            padding:         0 prop(--dims --pad-x);
-            line-height:     prop(--dims --height);
-            color:           prop(--colors --fg);
-            text-decoration: none;
+            padding:          0 prop(--dims --pad-x);
+            line-height:      prop(--dims --height);
+            color:            prop(--colors --fg);
+            background-color: prop(--colors --bg);
+            text-decoration:  none;
+            transition:       background-color .2s, color .2s;
 
             &:hover {
-                color: prop(--colors --hover --fg);
+                color:            prop(--colors --hover --fg);
+                background-color: prop(--colors --hover --bg);
+            }
+
+            @include next-twin-element {
+                //padding-left: calc(0.5 * #{prop(--dims --pad-x)});
+                //margin-left: calc(-0.5 * #{prop(--dims --pad-x)});
+                border-left: 1px solid prop(--colors --border);
             }
 
             @include modifier('icon') {
                 display:         flex;
                 align-items:     center;
                 justify-content: center;
-                padding:         0;
-                width:           prop(--dims --height);
             }
 
             @include modifier('active') {
@@ -46,8 +61,8 @@
         }
 
         @include element('icon') {
-            width:  1.5em;
-            height: 1.5em;
+            width:  prop(--dims --icon);
+            height: prop(--dims --icon);
         }
     }
 }