Update

6 files changed, 25 insertions, 16 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2c0e9b5..ad9e16f 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -36,8 +36,7 @@ $content--width:  44rem;
 
     @include store((
         --dims: (
-            --indent:     2rem,
-            --obj-shadow: 0 .4em 2.8em,
+            --indent: 2rem,
         ),
         --colors: (
             --bg-hi:  $gray0, // Darker background
@@ -51,8 +50,6 @@ $content--width:  44rem;
             --fg:     $gray6, // Text
             --fg-lo:  $gray7, // Strong text
 
-            --obj-shadow: transparent,
-
             --accent: (
                 --h:      354,
                 --s:      84%,
@@ -107,7 +104,7 @@ $content--width:  44rem;
 
 @include iro-execute {
     $gray0: hsl(220, 5%, 100%);
-    $gray1: hsl(220, 5%, 96%);
+    $gray1: hsl(220, 5%, 95%);
     $gray2: hsl(220, 5%, 88%);
     $gray3: hsl(220, 5%, 83%);
     $gray4: hsl(220, 5%, 68%);
@@ -128,8 +125,6 @@ $content--width:  44rem;
             --fg:     $gray6, // Text
             --fg-lo:  $gray7, // Strong text
 
-            --obj-shadow: rgba(#000, .05),
-
             --accent: (
                 --h:      354,
                 --s:      74%,
@@ -182,8 +177,6 @@ $content--width:  44rem;
             --fg-hi:  $black, // Faint text
             --fg:     $black, // Text
             --fg-lo:  $black, // Strong text
-
-            --obj-shadow: transparent,
         ),
     ), 'print');
 }
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 2e32a48..20614e7 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -35,7 +35,6 @@
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s, border-color .2s;
         background-color: prop(--colors --bg);
-        box-shadow:       prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
         color:            prop(--colors --fg);
         line-height:      1.4;
 
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index a190eee..ca85438 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -37,7 +37,6 @@
         height:  prop(--dims --height);
         padding: prop(--dims --gap);
         gap:     prop(--dims --gap);
-        filter:  drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
         @include element('item') {
             padding:          0 prop(--dims --pad-x);
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
new file mode 100644
index 0000000..220afde
--- /dev/null
+++ b/assets/css/components/_hnav.scss
@@ -0,0 +1,22 @@
+@include namespace('hnav') {
+    @include store((
+        --colors: (
+            --border: prop(--colors --obj-hi, $global: true)
+        ),
+        --dims: (
+            --gap:   2em,
+            --pad-y: .5em
+        )
+    ));
+
+    @include component(namespace()) {
+        display:      flex;
+        gap:          prop(--dims --gap);
+        align-items:  baseline;
+        margin-top:   $line-height * 2rem;
+        padding:      prop(--dims --pad-y) 0 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: prop(--colors --border);
+    }
+}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index bda0f4d..a53b771 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -14,7 +14,6 @@
             flex-direction: column;
             gap:            2px;
             margin-top:     $line-height * .625rem;
-            filter:         drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
             @include modifier('grid', 'gallery') {
                 display:               grid;
@@ -34,9 +33,5 @@
                 filter: none;
             }
         }
-
-        @include element('card') {
-            box-shadow: none;
-        }
     }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 535bc72..0b8f75c 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -19,6 +19,7 @@
 @import 'components/card';
 @import 'components/note';
 @import 'components/lightbox';
+@import 'components/hnav';
 
 @import 'layouts/card-list';