Simplified home page

1 files changed, 39 insertions, 9 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index e74780b..81e4d4f 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,23 +1,53 @@
 @include namespace('header') {
     @include store((
         --colors: (
-            --fg: prop(--colors --fg-lo, $global: true),
-            --bg: prop(--colors --bg-hi, $global: true),
+            --fg: prop(--colors --fg-hi, $global: true),
             --hover: (
-                --fg: prop(--colors --bg-hi, $global: true),
-                --bg: prop(--colors --accent --color, $global: true),
+                --fg: prop(--colors --fg-lo, $global: true),
+            ),
+            --active: (
+                --fg: prop(--colors --fg-lo, $global: true),
             )
+        ),
+        --dims: (
+            --height: 4rem,
+            --pad-x: .6rem,
         )
     ));
 
     @include component(namespace()) {
         display:         flex;
-        position:        fixed;
-        z-index:         10000;
-        top:             0;
-        left:            0;
         flex-direction:  row;
         justify-content: flex-start;
-        box-shadow:      prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
+        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;
+
+            &:hover {
+                color: prop(--colors --hover --fg);
+            }
+
+            @include modifier('icon') {
+                display:         flex;
+                align-items:     center;
+                justify-content: center;
+                padding:         0;
+                width:           prop(--dims --height);
+            }
+
+            @include modifier('active') {
+                font-weight: bold;
+                color:       prop(--colors --active --fg);
+            }
+        }
+
+        @include element('icon') {
+            width:  1.5em;
+            height: 1.5em;
+        }
     }
 }