From d7ab4a1533fa8076eb07b809e9ec196bf2ee64ea Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Mon, 27 Oct 2025 11:44:02 -0500
Subject: [PATCH] add home to mobile menu

---
 _includes/layouts/base/navbar.njk |  5 ++++-
 _includes/styles/base/navbar.css  | 13 ++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/_includes/layouts/base/navbar.njk b/_includes/layouts/base/navbar.njk
index 60f34e1..c9c0f73 100644
--- a/_includes/layouts/base/navbar.njk
+++ b/_includes/layouts/base/navbar.njk
@@ -1,13 +1,16 @@
 <!-- top navbar -->
 <header class="navbar">
     <navbar-left>
-        <a class="nav-base nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/home"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
+        <a class="nav-base nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
         <div class="nav-mobile-menu">
             <input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
             <label class="nav-base nav-baselink" aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
                 <img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
             </label>
             <ul>
+                <li class="nav-home">
+                    <a href="/"><icon-tabler home></icon-tabler> <span class="text">Home</span></a>
+                </li>
                 <li class="nav-about">
                     <a href="/about"><icon-tabler info-circle></icon-tabler> <span class="text">About</span></a>
                 </li>
diff --git a/_includes/styles/base/navbar.css b/_includes/styles/base/navbar.css
index c9f61dc..76c5f63 100644
--- a/_includes/styles/base/navbar.css
+++ b/_includes/styles/base/navbar.css
@@ -114,8 +114,8 @@
 
     .nav-about {
         &:hover, &:focus-visible {
-            background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
-            outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
+            background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
+            outline-color: color-mix(in srgb, var(--green) 60%, transparent);
         }
     }
 
@@ -152,6 +152,7 @@
             border: var(--accent) solid .15rem;
             height: max-content;
             left: 0;
+            margin-left: unset;
             margin-top: 2.2rem !important;
             position: absolute;
             visibility: hidden;
@@ -193,10 +194,16 @@
                     color: light-dark(var(--foreground), var(--background));
                 }
             }
+
+            .nav-home {
+                &:hover, &:focus-visible {
+                    background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
+                }
+            }
     
             .nav-about {
                 &:hover, &:focus-visible {
-                    background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
+                    background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
                 }
             }