From 0a3a0adfd7f040e88e38b0ef985efe7d106f9f06 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Sat, 18 Oct 2025 21:07:08 -0500
Subject: [PATCH] navbar css cleanup, mobile menu fixes

---
 _includes/styles/accessibility.css |  68 ++++---
 _includes/styles/base.css          |  41 +---
 _includes/styles/navbar.css        | 312 +++++++++--------------------
 3 files changed, 136 insertions(+), 285 deletions(-)

diff --git a/_includes/styles/accessibility.css b/_includes/styles/accessibility.css
index 0907d9d..c6c7676 100644
--- a/_includes/styles/accessibility.css
+++ b/_includes/styles/accessibility.css
@@ -32,29 +32,55 @@
     &:has(#font-serif:checked) { /* serif */
         --font-family: serif, sans-serif, system-ui, -apple-system;
     }
-}
 
-/* - misc - */
+    /* appearance */
+    &:has(#uncapitalization:checked) { /* disable forced uncapitalization */
+        body {
+            text-transform: none !important;
+        }
+    }
 
-/* disable forced uncapitalization */
-:root:has(#uncapitalization:checked) {
-    body {
-        text-transform: none !important;
+    
+    &:has(#disable-bg:checked) { /* disable background gradient */
+        body {
+            background: var(--background) !important;
+        }
+    }
+
+    &:has(#disable-animations:checked) { /* disable site animations */
+        body {
+            animation: unset !important;
+            -moz-animation: unset !important;
+            -webkit-animation: unset !important;
+        }
+
+        /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
+        * {
+            transition: none !important;
+            animation: unset !important;
+            -moz-animation: unset !important;
+            -webkit-animation: unset !important;
+        }
+
+        /* fedi icon on /me should keep its animation (temp, find a better solution later) */
+        .fedi-icon {
+            animation: opacity-blink 4s infinite !important;
+        }
+        .fedi-icon-2 {
+            animation: opacity-blink-reverse 4s infinite !important;
+        }
+    }
+
+    &:has(#disable-alttext:checked) { /* disable custom alt text popup */
+        .alt-popup {
+            display: none !important;
+        }
     }
 }
 
-/* disable background gradient */
-:root:has(#disable-bg:checked) {
+/* reduce animations on browser preference */
+@media (prefers-reduced-motion: reduce) { /* copy-pasted from disable animations option */
     body {
-        background: var(--background) !important;
-    }
-}
-
-/* disable window animations 
-   copy pasted from "@media (prefers-reduced-motion: reduce)" in base.css */
-:root:has(#disable-animations:checked) {
-    body {
-        background: var(--background) !important;
         animation: unset !important;
         -moz-animation: unset !important;
         -webkit-animation: unset !important;
@@ -72,14 +98,8 @@
     .fedi-icon {
         animation: opacity-blink 4s infinite !important;
     }
+
     .fedi-icon-2 {
         animation: opacity-blink-reverse 4s infinite !important;
     }
-}
-
-/* disable custom alt text popup */
-:root:has(#disable-alttext:checked) {
-    .alt-popup {
-        display: none !important;
-    }
 }
\ No newline at end of file
diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index 6fe5a90..bdc700f 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -640,7 +640,7 @@ checkbox-button-group {
             content: '';
             display: inline-flex;
             height: 1rem;
-            margin-bottom: -.1rem;
+            margin-bottom: -.15rem;
             margin-left: .2rem;
             margin-right: .3rem;
             position: relative;
@@ -670,44 +670,7 @@ checkbox-button-group {
     }
 }
 
-/* ╭────────────────────────────────────────╮
-/  │    ____                     _ _        │
-/  │   / __ \ _ __ ___   ___  __| (_) __ _  │
-/  │  / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
-/  │ | | (_| | | | | | |  __/ (_| | | (_| | │
-/  │  \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
-/  │   \____/                               │
-/  ╰────────────────────────────────────────╯
-/  @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 */
-
-@media (prefers-reduced-motion: reduce) {
-    body {
-        background: var(--background) !important;
-        animation: unset !important;
-        -moz-animation: unset !important;
-        -webkit-animation: unset !important;
-    }
-
-    /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
-    * {
-        transition: none !important;
-        animation: unset !important;
-        -moz-animation: unset !important;
-        -webkit-animation: unset !important;
-    }
-
-    /* fedi icon on /me should keep its animation (temp, find a better solution later) */
-    .fedi-icon {
-        animation: opacity-blink 4s infinite !important;
-    }
-
-    .fedi-icon-2 {
-        animation: opacity-blink-reverse 4s infinite !important;
-    }
-}
+/* atmedia*/
 
 @media screen and (max-width: 1083px) {
     details.styled {
diff --git a/_includes/styles/navbar.css b/_includes/styles/navbar.css
index fa81b9e..ac5436c 100644
--- a/_includes/styles/navbar.css
+++ b/_includes/styles/navbar.css
@@ -70,6 +70,76 @@
         }
     }
 
+    .nav-links {
+        align-items: center;
+        background-color: var(--background);
+        color: var(--foreground);
+        overflow: clip;
+        padding: 0 .4rem !important;
+        text-shadow: none;
+        transition: all .3s;
+
+        span {
+            opacity: 0;
+            position: absolute;
+            transition: all .3s;
+            pointer-events: none;
+            white-space: nowrap;
+        }
+
+        icon-tabler {
+            transition: all .3s;
+        }
+    }
+
+    .nav-links {
+        &:hover, &:focus-visible {
+            color: light-dark(var(--foreground), var(--background));
+            padding-bottom: 7rem !important;
+            padding-right: 9rem !important;
+            transition: .3s;
+
+            span {
+                opacity: 1;
+                transform: scale(1.5) translateX(.7rem) translateY(.1rem);
+                transition: .3s;
+            }
+
+            icon-tabler {
+                transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
+                transition: .3s;
+            }
+        }
+    }
+
+    .nav-home {
+        &: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);
+        }
+    }
+
+    .nav-services {
+        &:hover, &:focus-visible {
+            background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
+            outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
+        }
+    }
+
+    .nav-webmaster {
+        &:hover, &:focus-visible {
+            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);
+        }
+    }
+
+    .nav-donate {
+        &:hover, &:focus-visible {
+            background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
+            outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
+        }
+    }
+
     .nav-mobile-menu {
         display: none;
         position: relative;
@@ -114,63 +184,44 @@
                     text-shadow: unset;
                 }
 
-                .icon {
-                    padding-right: .3em;
-                    transition: .2s all;
+                icon-tabler {
+                    transition: .2s;
                 }
             }
     
             li:hover {
-                transition: .2s all;
+                transition: .2s;
 
-                .icon {
+                icon-tabler {
                     transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
-                    transition: .2s all;
+                }
+
+                a {
+                    color: light-dark(var(--foreground), var(--background));
                 }
             }
     
-            .nav-home:hover,
-            .nav-home:focus-visible {
-                background-color: color-mix(in srgb, var(--accent) 20%, transparent);
-
-                a {
-                    color: var(--foreground);
+            .nav-home {
+                &:hover, &:focus-visible {
+                    background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
                 }
             }
     
-            .nav-notebook:hover,
-            .nav-home:focus-visible {
-                background-color: color-mix(in srgb, var(--purple) 20%, transparent);
-
-                a {
-                    color: var(--foreground);
-                }
-            }
-    
-            .nav-services:hover,
-            .nav-services:focus-visible {
-                background-color: color-mix(in srgb, var(--blue) 20%, transparent);
-
-                a {
-                    color: var(--foreground);
+            .nav-services {
+                &:hover, &:focus-visible {
+                    background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
                 }
             }
 
-            .nav-webmaster:hover,
-            .nav-home:focus-visible {
-                background-color: color-mix(in srgb, var(--green) 20%, transparent);
-
-                a {
-                    color: var(--foreground);
+            .nav-webmaster {
+                &:hover, &:focus-visible {
+                    background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
                 }
             }
 
-            .nav-donate:hover,
-            .nav-home:focus-visible {
-                background-color: color-mix(in srgb, var(--pink) 20%, transparent);
-
-                a {
-                    color: var(--foreground);
+            .nav-donate {
+                &:hover, &:focus-visible {
+                    background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
                 }
             }
         }
@@ -184,93 +235,6 @@
         }
     }
 
-    .nav-links {
-        align-items: center;
-        background-color: var(--background);
-        color: var(--foreground);
-        overflow: clip;
-        padding: 0 .4rem !important;
-        text-shadow: none;
-        transition: all .3s;
-
-        span {
-            opacity: 0;
-            position: absolute;
-            transition: all .3s;
-            pointer-events: none;
-            white-space: nowrap;
-        }
-
-        icon-tabler {
-            transition: all .3s;
-        }
-    }
-
-    .nav-links {
-        &:hover, &:focus-visible {
-            padding-right: 9rem !important;
-            padding-bottom: 7rem !important;
-            transition: .3s;
-
-            span {
-                opacity: 1;
-                transform: scale(1.5) translateX(.7rem) translateY(.1rem);
-                transition: .3s;
-            }
-
-            icon-tabler {
-                transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
-                transition: .3s;
-            }
-        }
-    }
-
-    .nav-home:hover, .nav-home:focus-visible {
-        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
-        color: var(--foreground);
-        outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
-    }
-
-    .nav-notebook:hover, .nav-notebook:focus-visible {
-        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-services:hover, .nav-services:focus-visible {
-        background-color: color-mix(in srgb, var(--blue) 20%, var(--background));
-        color: var(--foreground);
-        outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
-
-        .text {
-            transform: scale(1.5) translateX(0rem);
-        }
-    }
-
-    .nav-webmaster:hover, .nav-webmaster:focus-visible {
-        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.5) translateX(-.2rem);
-        }
-    }
-
-    .nav-donate:hover, .nav-donate:focus-visible {
-        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-settings {
         input[type="checkbox"]#nav-settings-menu {
             left: -100vw;
@@ -336,60 +300,6 @@
     border-bottom: solid .2rem var(--accent);
 }
 
-/* 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 */
-html:not([data-theme="light"]) {
-    @media (prefers-color-scheme: dark) {
-        .navbar {
-            .nav-home:hover, .nav-home:focus-visible {
-                background-color: var(--accent);
-                color: var(--background);
-            }
-            .nav-notebook:hover, .nav-notebook:focus-visible {
-                background-color: var(--purple);
-                color: var(--background);
-            }
-            .nav-services:hover, .nav-services:focus-visible {
-                background-color: var(--blue);
-                color: var(--background);
-            }
-            .nav-webmaster:hover, .nav-webmaster:focus-visible {
-                background-color: var(--green);
-                color: var(--background);
-            }
-            .nav-donate:hover,.nav-donate:focus-visible {
-                background-color: var(--pink);
-                color: var(--background);
-            }
-        }
-    }
-}
-
-html[data-theme="dark"] {
-    .navbar {
-        .nav-home:hover, .nav-home:focus-visible {
-            background-color: var(--accent);
-            color: var(--background);
-        }
-        .nav-notebook:hover, .nav-notebook:focus-visible {
-            background-color: var(--purple);
-            color: var(--background);
-        }
-        .nav-services:hover, .nav-services:focus-visible {
-            background-color: var(--blue);
-            color: var(--background);
-        }
-        .nav-webmaster:hover, .nav-webmaster:focus-visible {
-            background-color: var(--green);
-            color: var(--background);
-        }
-        .nav-donate:hover, .nav-donate:focus-visible {
-            background-color: var(--pink);
-            color: var(--background);
-        }
-    }
-}
-
 /* modify widths and spacing depending on the size of the display */
 @media screen and (max-width: 35rem) {
     .navbar {
@@ -411,46 +321,4 @@ html[data-theme="dark"] {
             }
         }
     }
-
-    @media (prefers-color-scheme: dark) {
-        html:not([data-theme="light"]) {
-            .navbar .nav-mobile-menu ul {
-                .nav-home:hover a, .nav-home:focus-visible a {
-                    color: var(--accent);
-                }
-                .nav-notebook:hover a, .nav-notebook:focus-visible a {
-                    color: var(--purple);
-                }
-                .nav-services:hover a, .nav-services:focus-visible a {
-                    color: var(--blue);
-                }
-                .nav-webmaster:hover a, .nav-webmaster:focus-visible a {
-                    color: var(--green);
-                }
-                .nav-donate:hover a, .nav-donate:focus-visible a {
-                    color: var(--pink);
-                }
-            }
-        }
-    }
-
-    html[data-theme="dark"] {
-        .navbar .nav-mobile-menu ul {
-            .nav-home:hover a, .nav-home:focus-visible a {
-                color: var(--accent);
-            }
-            .nav-notebook:hover a, .nav-notebook:focus-visible a {
-                color: var(--purple);
-            }
-            .nav-services:hover a, .nav-services:focus-visible a {
-                color: var(--blue);
-            }
-            .nav-webmaster:hover a, .nav-webmaster:focus-visible a {
-                color: var(--green);
-            }
-            .nav-donate:hover a, .nav-donate:focus-visible a {
-                color: var(--pink);
-            }
-        }
-    }
 }
\ No newline at end of file