From c096fc1dfda1a36b9f4df1a4c5a1051922efd1cb Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Sat, 2 Aug 2025 23:02:25 +0200
Subject: [PATCH] feat: :sparkles: add home button to navigate back to
 character select

When deep-linking character pages there's no way for a visitor to know there's other characters as well
---
 src/components/navigation.webc | 39 ++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation.webc b/src/components/navigation.webc
index d6a83ce..0c4c3ab 100644
--- a/src/components/navigation.webc
+++ b/src/components/navigation.webc
@@ -1,4 +1,5 @@
 <nav :aria-label="label" webc:root="override">
+  <a class="home link" href="/#characters"> <icon icon="fa6-solid:chevron-left"></icon> Home </a>
   <label for="nav-toggle">
     <icon icon="fa6-solid:bars"></icon>
   </label>
@@ -32,7 +33,11 @@
     inset: 0.5em;
 
     display: grid;
+    grid-auto-flow: column;
+    justify-content: space-between;
     justify-items: end;
+    align-items: center;
+    gap: 1em;
 
     background-color: var(--nav-background-color);
     box-shadow: var(--box-shadow);
@@ -44,7 +49,7 @@
 
     z-index: 2;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       --nav-spacing: 1.5em;
       --nav-background-color: transparent;
       --nav-border: none;
@@ -70,7 +75,7 @@
     margin-block: 0.75em;
     margin-inline: 1em;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       display: none;
     }
   }
@@ -109,7 +114,7 @@
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       --nav-items-position: static;
       --nav-items-orientation: row nowrap;
       align-items: start;
@@ -123,7 +128,7 @@
     height: 0;
     transition: height 0.4s ease-in-out;
 
-    @media (min-width: 35em) {
+    @media (min-width: 48em) {
       height: 100%;
     }
   }
@@ -138,10 +143,36 @@
     padding-block: calc(var(--nav-spacing) / 2);
 
     transition: color 0.4s ease;
+
+    & svg {
+      width: 1em;
+      height: 1em;
+      transition: fill 0.4s ease;
+    }
+  }
+
+  :host .home {
+    display: flex;
+    align-items: center;
+    gap: 0.125em;
+
+    padding-inline: 0.75em 1em;
+
+    z-index: 3;
+
+    @media (min-width: 48em) {
+      background-color: var(--clr-nav-background);
+      box-shadow: var(--box-shadow);
+      border-radius: inherit;
+    }
   }
 
   :host .link:hover {
     color: var(--clr-nav-link-hover);
+
+    & svg {
+      fill: var(--clr-nav-link-hover);
+    }
   }
 
   :host .link-active {