From a9c8eb808435994195c83fe2cc9cd4fd58211147 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Tue, 27 May 2025 00:53:32 -0500
Subject: [PATCH] revamp the navbar

---
 _includes/layouts/navbar.njk |  58 ++--
 styles/base.css              | 577 +++++++++++++++++++++++++----------
 styles/icons.css             |  32 +-
 3 files changed, 471 insertions(+), 196 deletions(-)

diff --git a/_includes/layouts/navbar.njk b/_includes/layouts/navbar.njk
index 4f07b06..9335436 100644
--- a/_includes/layouts/navbar.njk
+++ b/_includes/layouts/navbar.njk
@@ -1,40 +1,38 @@
 <!-- top navbar -->
-<div class="navbar">
-    <a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> Synth Download!</a>
-    <details class="nav-base nav-left nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
+<nav class="navbar">
+    <a class="nav-base nav-left 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-base nav-left nav-baselink nav-mobile-menu">
+        <input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
+        <label 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>
-                <a href="/"><span class="tabler--home"></span> Home</a>
+            <li class="nav-home">
+                <a href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
             </li>
-            <li>
-                <a href="/me"><span class="tabler--user"></span> About me</a>
+            <li class="nav-notebook" >
+                <a href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
             </li>
-            <li>
-                <a href="/notebook"><span class="tabler--notebook"></span> Notebook</a>
+            <li class="nav-webmaster">
+                <a href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
             </li>
-            <li>
-                <a href="/me#links"><span class="tabler--link"></span> Links</a>
+            <li class="nav-donate">
+                <a href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
             </li>
         </ul>
-    </details>
-    <nav class="nav-base nav-left nav-links">
-        <a href="/"><span class="tabler--home"></span> Home</a>
-        <div class="dot"></div>
-        <a href="/me"><span class="tabler--user"></span> About me</a>
-        <div class="dot"></div>
-        <a href="/notebook"><span class="tabler--notebook"></span> Notebook</a>
-        <div class="dot"></div>
-        <a href="/me#links"><span class="tabler--link"></span> Links</a>
-    </nav>
-    <details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
-        <summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
+    </div>
+    <a class="nav-base nav-left nav-links nav-home" href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
+    <a class="nav-base nav-left nav-links nav-notebook" href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
+    <a class="nav-base nav-left nav-links nav-webmaster" href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
+    <a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
+    <details aria-label="Settings" class="nav-base nav-right nav-settings">
+        <summary><span aria-label="Settings" class="tabler--settings"></span></summary>
         <ul>
             <li>
-                <p>Accessibility Settings</p>
+                <p>Settings</p>
             </li>
             <li>
-                <span aria-hidden="true" class="seperator"></span>
+                <hr class="solid">
                 <p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
                 <p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
                 
@@ -52,7 +50,7 @@
                 </span>
             </li>
             <li>
-                <span aria-hidden="true" class="seperator"></span>
+                <hr class="solid">
                 <p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
 
                 <span>
@@ -82,7 +80,7 @@
                 </span>
             </li>
             <li>
-                <span aria-hidden="true" class="seperator"></span>
+                <hr class="solid">
                 <span>
                     <input type="checkbox" id="uncapitalization" name="uncapitalization" />
                     <label for="uncapitalization">Disable forced uncapitalization</label><br>
@@ -101,7 +99,7 @@
                 </span>
             </li>
             <li>
-                <span aria-hidden="true" class="seperator"></span>
+                <hr class="solid">
                 <p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
                 <p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
             </li>
@@ -113,4 +111,4 @@
         <span class="tabler--wifi"></span>
         <span class="tabler--battery-filled"></span>
     </p>
-</div>
\ No newline at end of file
+</nav>
\ No newline at end of file
diff --git a/styles/base.css b/styles/base.css
index 7e9cedb..69131ab 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -80,6 +80,7 @@
         animation: unset !important;
         transition: unset !important;
     }
+
     .window:hover {
         transition: unset !important;
         animation: unset !important;
@@ -89,6 +90,7 @@
     .navbar {
         transition: unset !important;
     }
+
     .navbar:hover {
         transition: unset !important;
         animation: unset !important;
@@ -141,13 +143,15 @@ body {
     font-family: var(--font-family);
     font-size: 1.125rem;
     text-transform: lowercase;
-    margin: unset !important; /* idk why it does that */
+    margin: unset !important;
+    /* idk why it does that */
 }
 
 /* text formatting and config stuff */
 
 /* headings */
-h1, h1 a {
+h1,
+h1 a {
     color: var(--foreground);
     font-size: 2rem;
     text-decoration: none;
@@ -155,18 +159,22 @@ h1, h1 a {
 
 /* apparently having more than one h1 is against web standards
 but i prefer how it looks so i just use the same styling again */
-h2, h2 a {
+h2,
+h2 a {
     color: var(--foreground);
     font-size: 2rem;
     text-decoration: none;
 }
 
-h3, h3 a {
+h3,
+h3 a {
     font-size: 2rem;
 }
 
 /* text */
-p, li, button {
+p,
+li,
+button {
     font-size: 1.125rem;
 
     [class^="tabler--"] {
@@ -187,7 +195,8 @@ a:hover {
 }
 
 /* smol text */
-small, small a {
+small,
+small a {
     font-size: 0.875rem;
 }
 
@@ -210,7 +219,8 @@ h1 a:hover {
 }
 
 /* the tabler icons svgs styling */
-.tabler-icon, .icon .icon-tabler {
+.tabler-icon,
+.icon .icon-tabler {
     width: 1.3rem;
     height: 1.3rem;
     padding-bottom: .2rem;
@@ -247,17 +257,27 @@ h1 a:hover {
     margin-bottom: .1rem;
 }
 
-/* seperator */
-.seperator::before {
-    border-bottom: .1rem solid var(--border);
-    content: '';
-    display: block;
-    height: .5rem;
-    margin-bottom: .5rem;
-    margin-top: -.7rem;
-    min-width: max-content;
+ /* Dashed border */
+hr.dashed {
+    border-top: .1rem dashed var(--border);
 }
 
+/* Dotted border */
+hr.dotted {
+    border-top: .1rem dotted var(--border);
+}
+
+/* Solid border */
+hr.solid {
+    border-top: .1rem solid var(--border);
+}
+
+/* Rounded border */
+hr.rounded {
+    border-top: .2rem solid var(--border);
+    border-radius: 5px;
+} 
+
 /* audio */
 audio {
     border-radius: 3rem;
@@ -266,7 +286,7 @@ audio {
 /* summary styling */
 summary {
     display: flex;
-} 
+}
 
 /* ---------------
 - alt text popup -
@@ -311,11 +331,10 @@ summary {
     min-width: 100%;
     position: fixed;
     top: 0 !important;
+    padding: .4rem 0 .4rem 0;
     z-index: 10;
 
     align-content: center;
-    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
-    border-bottom: .2rem solid var(--accent);
     color: var(--foreground);
     vertical-align: middle;
 
@@ -325,77 +344,152 @@ summary {
         padding: 0px .2em !important;
         max-width: fit-content;
         align-content: center;
+        outline: .13rem solid var(--border);
+        border-radius: 1rem;
+        height: 1.9rem;
     }
+
     .nav-left {
+        margin-left: .6rem !important;
+        padding: 0px .5rem .1rem !important;
         text-decoration: unset !important;
-        padding: 0px .4rem .1rem !important;
-        border-bottom-right-radius: 1rem;
-        height: 1.9rem;      
-    }
-    .nav-left::before {
-        background: var(--background);
-        content: '';
-        display: block;
-        left: 5rem;
-        margin-left: .67rem;
-        min-height: 2rem;
-        min-width: 10rem;
-        position: absolute;
-        top: 0rem;
-        z-index: -1;
     }
+
     .nav-baselink {
         background-color: var(--accent);
         color: var(--background);
+        margin-left: .4rem !important;
+        outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
+        padding: .13rem;
 
-        svg {
-            color: var(--background) !important;
+        .synth-icon {
+            height: 2rem;
+            margin-right: 1rem;
+            pointer-events: none;
+            transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
+            transition: all .2s ease-out;
+            width: 2rem;
         }
     }
-    .nav-baselink-mobile {
+
+    .nav-baselink:hover {
+        .synth-icon {
+            transition: all .2s ease-out;
+            transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
+        }
+    }
+
+    .nav-desktop {
+        overflow: hidden;
+    }
+
+    .nav-mobile-menu {
         display: none;
     }
+
     .nav-links {
         background-color: var(--background);
         color: var(--foreground);
+        overflow: clip;
+        position: relative;
+        text-shadow: none;
+        transition: all .3s;
+
+        .text {
+            opacity: 0;
+            position: absolute;
+            transition: all .3s;
+            pointer-events: none;
+            white-space: nowrap;
+        }
+
+        [class^="tabler--"] {
+            transform: scale(1.1);
+            transition: all .3s;
+        }
     }
-    .nav-links a {
+
+    .nav-links:hover {
+        padding-right: 9rem !important;
+        padding-bottom: 7rem !important;
+        transition: all .3s;
+
+        .text {
+            opacity: 1;
+            transform: scale(1.5) translateX(-.4rem);
+            transition: all .3s;
+        }
+
+        [class^="tabler--"] {
+            transform: scale(5) translateY(.9rem) translateX(.4rem) rotate(10deg);
+            transition: all .3s;
+        }
+    }
+
+    .nav-home:hover {
+        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
         color: var(--foreground);
-        text-decoration: unset !important;
+        outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
     }
-    .nav-links a:hover {
-        color: var(--accent);
-        text-decoration: underline !important;
+
+    .nav-notebook:hover {
+        background-color: color-mix(in srgb, var(--purple) 20%, var(--background));
+        color: var(--foreground);
+        outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
+
+        .text {
+            transform: scale(1.5) translateX(0rem);
+        }
+    }
+
+    .nav-webmaster:hover {
+        background-color: color-mix(in srgb, var(--green) 20%, var(--background));
+        color: var(--foreground);
+        outline-color: color-mix(in srgb, var(--green) 60%, transparent);
+
+        .text {
+            transform: scale(1.1) translateX(-.8rem);
+        }
+    }
+
+    .nav-donate:hover {
+        background-color: color-mix(in srgb, var(--pink) 20%, var(--background));
+        color: var(--foreground);
+        outline-color: color-mix(in srgb, var(--pink) 60%, transparent);
+
+        .text {
+            transform: scale(1.5) translateX(-.2rem);
+        }
     }
 
     .nav-right {
-        margin-left: auto !important;
-        padding: 0px .4rem !important;
-        border-bottom-left-radius: 1rem;
-        height: 2rem;
+        padding: 0px .5rem .1rem !important;
+        margin-right: .6rem !important;
     }
-    .nav-accessibility {
+
+    .nav-settings {
         background-color: var(--accent);
         color: var(--background);
-        position: absolute;
-        right: 7.7rem;
+        margin-left: auto !important;
+        outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
+
         span {
-            transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
+            transform: scale(1.5);
+            padding: 0 .5rem !important;
         }
 
         ul {
             background-color: var(--background);
-            border-bottom-left-radius: 1rem;
-            border-bottom: var(--accent) solid .15rem;
-            border-left: var(--accent) solid .15rem;
+            border-radius: 1rem;
+            border: var(--accent) solid .15rem;
             max-height: 27rem;
             min-height: 27rem;
             min-width: 17rem;
+            max-width: 17rem;
             overflow: scroll;
             position: absolute;
-            right: -7.6rem;
-            top: .94rem;
-            width: auto;
+            right: .4rem;
+            top: 2.2rem;
 
             li {
                 color: var(--foreground);
@@ -404,43 +498,38 @@ summary {
                 padding: .4rem;
 
                 span {
-                    padding: .1rem 0px;
+                    padding: .1rem 0px .1rem 0px !important;
                 }
             }
         }
     }
-    .nav-accessibility::before {
-        background: var(--accent);
-        content: '';
-        display: block;
-        margin-left: .67rem;
-        min-height: 2rem;
-        min-width: 10rem;
-        position: absolute;
-        top: 0rem;
-        z-index: -1;
-    }
+
     .nav-systray {
         background-color: var(--background);
         color: var(--foreground);
         padding: 0px .1rem;
         min-width: 6.45rem;
+        margin-right: .4rem !important;
     }
 
-    a, p {
+    a,
+    p {
         margin: unset !important;
     }
+
     small {
         opacity: .7;
     }
+
     svg {
         color: var(--foreground) !important;
     }
 }
 
 .navbar:hover {
-    transition: .2s background-color;
-    background-color: var(--accent);
+    transition: .2s all;
+    background-color: color-mix(in srgb, var(--accent) 40%, transparent);
+    border-bottom: solid .2rem var(--accent);
 
     .nav-accessibility {
         border-left: .2rem solid var(--background);
@@ -501,7 +590,7 @@ summary {
         div:nth-child(3) {
             margin-left: auto !important;
             padding: .2rem .5rem .2rem 0rem;
-            
+
             span {
                 text-align: center;
                 vertical-align: middle;
@@ -512,7 +601,7 @@ summary {
             span:nth-child(2) {
                 opacity: .6;
                 cursor: not-allowed;
-            }  
+            }
         }
 
         /* close button */
@@ -542,7 +631,9 @@ summary {
         }
     }
 
-    main, section, article {
+    main,
+    section,
+    article {
         padding: .8rem;
     }
 
@@ -648,11 +739,13 @@ footer {
     margin-left: auto;
     margin-right: auto;
 
-    details > summary > a {
+    details>summary>a {
         padding: .3rem 0rem .3rem 1rem !important;
     }
 
-    main, section, article {
+    main,
+    section,
+    article {
         padding: 1rem !important;
     }
 
@@ -664,47 +757,57 @@ footer {
             margin-bottom: .5em;
             vertical-align: bottom;
         }
+
         [href="https://fediring.net"] {
             color: var(--foreground);
             background: color-mix(in srgb, var(--purple) 25%, transparent);
             padding: 0px 10px 0px 10px;
             border-radius: 5px;
         }
+
         [href="https://keithhacks.cyou/furryring.php"] {
             color: var(--foreground);
             background: color-mix(in srgb, var(--sapphire) 25%, transparent);
             padding: 0px 10px 0px 10px;
             border-radius: 5px;
         }
+
         [href="https://stellophiliac.github.io/roboring"] {
             color: var(--foreground);
             background: color-mix(in srgb, var(--comment) 25%, transparent);
             padding: 0px 10px 0px 10px;
             border-radius: 5px;
         }
+
         [href*="prev"] {
             background: color-mix(in srgb, var(--orange) 25%, transparent);
             padding: 5px 6px;
             border-radius: 5px;
+
             span {
                 background-color: var(--orange) !important;
             }
         }
+
         [href*="next"] {
             background: color-mix(in srgb, var(--green) 25%, transparent);
             padding: 5px 6px;
             border-radius: 5px;
+
             span {
                 background-color: var(--green) !important;
             }
         }
     }
-    p, a {
+
+    p,
+    a {
         text-align: center;
         font-size: 0.938rem;
         margin: .2em 0px .2em;
         text-decoration: none;
     }
+
     img {
         padding-top: 18px;
         max-width: 30%;
@@ -713,13 +816,16 @@ footer {
         margin-right: auto;
         transition: 1s animation;
     }
+
     img:hover {
         animation: spin 5s infinite linear;
     }
+
     .inner-footer {
         text-align: center;
         padding-top: 14px;
         padding-bottom: 14px;
+
         a {
             width: 3rem;
             height: 3rem;
@@ -749,19 +855,39 @@ footer {
 /  animations - reusable css animations */
 
 @keyframes window-appear {
-    0% { opacity: 0; transform: scale(0.5, 0.5); }
-    100% { opacity: 1; transform: scale(1, 1); }
+    0% {
+        opacity: 0;
+        transform: scale(0.5, 0.5);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1, 1);
+    }
 }
 
 @keyframes rainbow {
-    0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-    100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+    0% {
+        filter: hue-rotate(0deg) contrast(150%) saturate(150%);
+    }
+
+    100% {
+        filter: hue-rotate(360deg) contrast(150%) saturate(150%);
+    }
 }
 
 @keyframes bg-gradient {
-    0% { background-position: 0% 27% }
-    50% { background-position: 100% 74% }
-    100% { background-position: 0% 27% }
+    0% {
+        background-position: 0% 27%
+    }
+
+    50% {
+        background-position: 100% 74%
+    }
+
+    100% {
+        background-position: 0% 27%
+    }
 }
 
 /* --------------------------------------------------------------------
@@ -776,7 +902,8 @@ footer {
 /  │  \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
 /  │   \____/                               │
 /  ╰────────────────────────────────────────╯
-/  @media / at-media - styling depending on browser configuration / settings */
+/  @media / at-media - styling depending on browser configuration / settings 
+/  other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */
 
 /* disable certain animations if user has animations disabled on their system */
 
@@ -787,109 +914,183 @@ footer {
         -moz-animation: unset !important;
         -webkit-animation: unset !important;
     }
-}  
+}
+
+/* different styling for elements in dark mode 
+   must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
+
+@media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) {
+        .navbar {
+            .nav-home:hover {
+                background-color: var(--accent);
+                color: var(--background);
+            }
+            .nav-notebook:hover {
+                background-color: var(--purple);
+                color: var(--background);
+            }
+            .nav-webmaster:hover {
+                background-color: var(--green);
+                color: var(--background);
+            }
+            .nav-donate:hover {
+                background-color: var(--pink);
+                color: var(--background);
+            }
+        }
+    }
+}
+
+html[data-theme="dark"] {
+    .navbar {
+        .nav-home:hover {
+            background-color: var(--accent);
+            color: var(--background);
+        }
+        .nav-notebook:hover {
+            background-color: var(--purple);
+            color: var(--background);
+        }
+        .nav-webmaster:hover {
+            background-color: var(--green);
+            color: var(--background);
+        }
+        .nav-donate:hover {
+            background-color: var(--pink);
+            color: var(--background);
+        }
+    }
+}
 
 /* modify widths and spacing depending on the size of the display */
 
 @media screen and (max-width: 1083px) {
     .navbar {
-        min-height: 1.8em !important;
-        max-height: 1.8em !important;
-        flex-wrap: wrap;
-
-        .nav-base {
-            padding: .27em .2em !important;
-        }
-        .nav-left {
-            height: 1.9rem;
-            left: -.4rem;
-        }
-        .nav-left::before {
-            margin-left: -10rem !important;
-        }
-        .nav-baselink {
+        .nav-desktop {
             display: none !important;
         }
-        .nav-baselink-mobile {
-            display: block !important;
-            position: absolute;
-            max-width: 40em;
-            width: max-content;
-            z-index: 9999;
-            padding: unset !important;
 
-            a {
-                display: inline-flex;
-                align-items: center;
-                color: var(--foreground);
-                padding: .6em .7em;
-                text-decoration: none;
+        .nav-mobile-menu {
+            display: inline-block;
+            max-width: 3rem;
+            min-width: 3rem;
+            position: relative;
+
+            input[type="checkbox"] {
+                left: -100vw;
+                position: absolute;
             }
 
-            a:hover {
-                color: var(--accent);
-                text-decoration: underline;
+            label {
+                border-radius: 1rem;
+                cursor: pointer;
+                display: inline-block;
+                left: -.5rem;
+                margin-right: .1rem;
+                max-height: 2rem;
+                max-width: 3rem;
+                min-height: 2rem;
+                min-width: 3rem;
+                overflow: hidden !important;
+                padding-right: 1rem;
+                position: relative;
+
+                .synth-icon {
+                    transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.1rem);
+                }
+            }
+
+            label:hover {
+                .synth-icon {
+                    transform: scaleX(-1) scale(1.5) translateX(-.5rem) translateY(.2rem) rotate(10deg);
+                }
             }
 
             ul {
                 background-color: var(--background);
-                border-bottom-right-radius: 1rem;
-                border-right: var(--accent) solid .15rem;
-                border-bottom: var(--accent) solid .15rem;
-                max-width: 10em;
-                width: auto;
-                margin-top: unset !important;
+                border-radius: 1rem;
+                border: var(--accent) solid .15rem;
+                display: none;
+                height: max-content;
+                left: 0;
+                margin-top: .4rem !important;
+                position: absolute;
+                width: max-content;
 
                 li {
+                    border-radius: 1rem;
                     list-style-type: none;
-                    margin-left: -2em;
-                    padding-bottom: unset !important;
-                    span {
-                        padding-right: .4em;
+                    margin: .5rem .5rem .5rem -1.9rem;
+                    overflow: clip;
+                    padding: .7rem;
+                    transition: .2s all;
+
+                    a {
+                        color: var(--foreground);
+                        text-decoration: none;
+                        text-shadow: unset;
+                    }
+
+                    [class^="tabler--"] {
+                        padding-right: .3em;
+                        transition: .2s all;
+                    }
+                }
+
+                li:hover {
+                    transition: .2s all;
+
+                    [class^="tabler--"] {
+                        transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
+                        transition: .2s all;
+                    }
+                }
+
+                .nav-home:hover {
+                    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
+                    a {
+                        color: var(--foreground);
+                    }
+                }
+                .nav-notebook:hover {
+                    background-color: color-mix(in srgb, var(--purple) 20%, transparent);
+                    a {
+                        color: var(--foreground);
+                    }
+                }
+                .nav-webmaster:hover {
+                    background-color: color-mix(in srgb, var(--green) 20%, transparent);
+                    a {
+                        color: var(--foreground);
+                    }
+                }
+                .nav-donate:hover {
+                    background-color: color-mix(in srgb, var(--pink) 20%, transparent);
+                    a {
+                        color: var(--foreground);
                     }
                 }
             }
-        }
-        .nav-baselink-mobile::before {
-            display: none;
-        }
-        .nav-baselink-mobile summary {
-            display: block !important;
-            margin-top: 0px !important;
-            background-color: var(--accent);
-            text-decoration: unset !important;
-            color: var(--background);
-            padding: .3em;
-            border-bottom-right-radius: 1rem;
-            width: 5.7em;
 
-            i:not(:first-child) {
-                margin-left: -.5em;
-                margin-right: -.9em;
-                opacity: .6;
+            input[type="checkbox"]:checked~ul {
+                display: block;
             }
         }
+
         .nav-links {
             display: none !important;
         }
 
-        .nav-right {
-            height: 1.4rem;
-        }
-        .nav-accessibility {
-            right: 7.6rem;
-            min-width: 1.6rem;
+        .nav-settings {
             span {
-                transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
+                padding: 0 .4rem !important;
             }
         }
-        .nav-systray {
-            padding: .27em .5em !important;
-        }
     }
 
     .window:not(#footer) {
-        summary {    
+        summary {
             div:first-child {
                 padding: .3rem .4rem .3rem .4rem;
             }
@@ -904,17 +1105,19 @@ footer {
         }
 
         animation: unset !important;
-    
-        main, section, article {
+
+        main,
+        section,
+        article {
             padding: .5rem;
         }
-    
+
         border-top: var(--accent) solid .15rem;
         border-bottom: var(--accent) solid .15rem;
         border-left: unset !important;
         border-right: unset !important;
         border-radius: unset !important;
-    
+
         margin-bottom: .8em;
     }
 
@@ -922,6 +1125,42 @@ footer {
     .window:nth-child(2) {
         margin-top: 4rem;
     }
+
+    @media (prefers-color-scheme: dark) {
+        html:not([data-theme="light"]) {
+            .navbar .nav-mobile-menu ul {
+                .nav-home:hover a {
+                    color: var(--accent);
+                }
+                .nav-notebook:hover a {
+                    color: var(--purple);
+                }
+                .nav-webmaster:hover a {
+                    color: var(--green);
+                }
+                .nav-donate:hover a {
+                    color: var(--pink);
+                }
+            }
+        }
+    }
+
+    html[data-theme="dark"] {
+        .navbar .nav-mobile-menu ul {
+            .nav-home:hover a {
+                color: var(--accent);
+            }
+            .nav-notebook:hover a {
+                color: var(--purple);
+            }
+            .nav-webmaster:hover a {
+                color: var(--green);
+            }
+            .nav-donate:hover a {
+                color: var(--pink);
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 540px) {
@@ -931,7 +1170,7 @@ footer {
         border-left: unset !important;
         border-right: unset !important;
         border-radius: unset !important;
-    
+
         margin-bottom: .8em;
     }
 }
@@ -976,7 +1215,9 @@ footer {
 /  home - specific styling for the main synth.download home page (index.md) */
 
 #site.window.home {
-    main, section {
+
+    main,
+    section {
         a:nth-child(2) {
             cursor: default;
         }
@@ -1005,6 +1246,7 @@ footer {
             li a {
                 text-decoration: none !important;
             }
+
             li a:hover {
                 text-decoration: underline !important;
             }
@@ -1019,6 +1261,7 @@ footer {
 #buttons.window.home section {
     text-align: center;
     font-size: 0px;
+
     img {
         margin-right: 5px;
         image-rendering: auto;
@@ -1033,7 +1276,9 @@ footer {
 }
 
 @media screen and (max-width: 59em) {
-    #site.window.home > main, #site.window.home > section {
+
+    #site.window.home>main,
+    #site.window.home>section {
         #logo {
             max-width: 100%;
         }
@@ -1057,7 +1302,8 @@ details.notebook.article-category {
     overflow: clip;
     border-radius: .8rem .4rem .8rem .4rem;
     background-color: color-mix(in srgb, var(--accent) 15%, transparent);
-    padding-bottom: .01rem; /* weird bug ??? without this there is no space underneath so */
+    padding-bottom: .01rem;
+    /* weird bug ??? without this there is no space underneath so */
 
     summary {
         span {
@@ -1135,8 +1381,9 @@ details.notebook.article-category {
             opacity: .8;
         }
 
-        p:first-child, p:last-child {
+        p:first-child,
+        p:last-child {
             opacity: .5;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/styles/icons.css b/styles/icons.css
index c7b241c..6aa7efa 100644
--- a/styles/icons.css
+++ b/styles/icons.css
@@ -21,6 +21,21 @@ uses Tabler icons via https://icon-sets.iconify.design/tabler to generate reusab
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
 }
+/* ti-settings */
+.tabler--settings {
+    display: inline-block;
+    width: 1.3rem;
+    height: 1.3rem;
+    vertical-align: top;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
 /* ti-grid-dots */
 .tabler--grid-dots {
     display: inline-block;
@@ -670,4 +685,19 @@ uses Tabler icons via https://icon-sets.iconify.design/tabler to generate reusab
     mask-repeat: no-repeat;
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
-  }
\ No newline at end of file
+}
+/* ti-currency-dollar */
+.tabler--currency-dollar {
+    display: inline-block;
+    width: 1.3rem;
+    height: 1.3rem;
+    vertical-align: top;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
\ No newline at end of file