From 3aa5634a73dc2c94705aa47fb88c85ee55d74d68 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Fri, 11 Jul 2025 17:49:19 +0200
Subject: [PATCH] feat: :lipstick: change navigation to floating bar

Since clipping overflow on the main page content container would break its gradient box shadow, navigation needed a different approach to styling
---
 src/components/navigation.webc | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/navigation.webc b/src/components/navigation.webc
index 524658a..9ec21cb 100644
--- a/src/components/navigation.webc
+++ b/src/components/navigation.webc
@@ -28,13 +28,16 @@
     --nav-border: var(--border-thin) solid var(--clr-box-border);
 
     position: sticky;
-    top: 0;
+    inset: 0.5em;
 
     display: grid;
     justify-items: end;
 
     background-color: var(--nav-background-color);
 
+    margin-block: 0.5em 0;
+    margin-inline: 0.5em;
+    border-radius: inherit;
     border-block-end: var(--nav-border);
 
     z-index: 2;
@@ -46,7 +49,7 @@
     }
 
     @media (min-width: 64em) {
-      --nav-spacing: 2em;
+      --nav-spacing: 1.5em;
     }
   }
 
@@ -82,7 +85,7 @@
     --nav-items-orientation: column nowrap;
 
     position: var(--nav-items-position);
-    top: 3em;
+    top: 3.5em;
 
     display: flex;
     flex-flow: var(--nav-items-orientation);
@@ -93,10 +96,9 @@
     background-color: var(--clr-nav-background);
 
     margin: 0;
-    border: var(--border-thin) solid var(--clr-nav-border);
     border-block-start: none;
     border-inline-end: none;
-    border-end-start-radius: 0.75em;
+    border-radius: inherit;
     padding-inline: var(--nav-spacing);
 
     z-index: 3;