Simplified header

4 files changed, 9 insertions, 22 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 09b9585..ec1a07a 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -37,7 +37,7 @@ body {
 
 main {
     @include iro-responsive-env(('sm', 'md')) {
-        font-size: iro-responsive-set((1rem, 1 / 16 * 19rem));
+        font-size: iro-responsive-set((1rem, 1 / 16 * 18rem));
     }
 }
 
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index eea1764..ca7abd3 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -22,7 +22,7 @@ $font-fam--large: 'Garet', $font-fam--text;
 $font-fam--mono:  'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
 $font-size:       16px;
 $line-height:     1.7;
-$content--width:  46rem;
+$content--width:  42rem;
 
 @include iro-execute {
     $gray0: hsl(220, 5%, 7%);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 1a10345..341be75 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,9 +1,8 @@
 @include namespace('header') {
     @include store((
         --colors: (
-            --bg:     prop(--colors --bg-lo, $global: true),
-            --fg:     prop(--colors --fg-lo, $global: true),
-            --border: prop(--colors --bg, $global: true),
+            --bg: prop(--colors --bg-lo, $global: true),
+            --fg: prop(--colors --fg-lo, $global: true),
             --hover: (
                 --bg: prop(--colors --fg-lo, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
@@ -26,13 +25,9 @@
     ), 'light');
 
     @include component(namespace()) {
-        height: prop(--dims --height);
-
-        @include element('nav') {
-            display:    inline-flex;
-            height:     100%;
-            box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
-        }
+        display: flex;
+        height:  prop(--dims --height);
+        filter:  drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
         @include element('item') {
             padding:          0 prop(--dims --pad-x);
@@ -43,7 +38,7 @@
             transition:       background-color .2s, color .2s, border-left-color .2s;
 
             @include next-twin-element {
-                border-left: 1px solid prop(--colors --border);
+                margin-left: 2px;
             }
 
             &:hover,
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 6abaeb0..1de4dc5 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -9,7 +9,7 @@
                 --fg: prop(--colors --accent --strong, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
             ),
-            --obj-border: prop(--colors --obj, $global: true),
+            --obj-border: prop(--colors --obj-hi, $global: true),
         ),
         --dims: (
             --meta: (
@@ -67,13 +67,5 @@
             background-color: transparent;
             color:            currentColor;
         }
-
-        @include media('<=sm') {
-            font-size: 1 / 16 * 17em;
-        }
-
-        @include media('<=xs') {
-            font-size: 1em;
-        }
     }
 }