From 90e5ca2bcdb0286e695150042b1bdeced1df3b6d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Mon, 14 Jul 2025 23:49:53 +0200
Subject: [PATCH] feat: :lipstick: add shadows to navigation

---
 src/components/navigation.webc | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/navigation.webc b/src/components/navigation.webc
index 9ec21cb..d6a83ce 100644
--- a/src/components/navigation.webc
+++ b/src/components/navigation.webc
@@ -26,6 +26,7 @@
     --nav-spacing: 1em;
     --nav-background-color: var(--clr-nav-background);
     --nav-border: var(--border-thin) solid var(--clr-box-border);
+    --box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
 
     position: sticky;
     inset: 0.5em;
@@ -34,6 +35,7 @@
     justify-items: end;
 
     background-color: var(--nav-background-color);
+    box-shadow: var(--box-shadow);
 
     margin-block: 0.5em 0;
     margin-inline: 0.5em;
@@ -46,6 +48,7 @@
       --nav-spacing: 1.5em;
       --nav-background-color: transparent;
       --nav-border: none;
+      box-shadow: none;
     }
 
     @media (min-width: 64em) {
@@ -94,6 +97,7 @@
     list-style: none;
 
     background-color: var(--clr-nav-background);
+    box-shadow: var(--box-shadow);
 
     margin: 0;
     border-block-start: none;