From 2e4dc59d4cfe367d0ad6bd39e01f6a0a1ba1a6c9 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Mon, 30 Jun 2025 17:46:12 -0500
Subject: [PATCH] accessibility styling fixes

---
 _includes/styles/base.css   | 40 ++++++++++++++++++-------------------
 _includes/styles/navbar.css | 14 ++++++-------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index fc2541a..7461af6 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -503,19 +503,19 @@ summary {
 html:not([data-theme="light"]) {
     @media (prefers-color-scheme: dark) {
         .navbar {
-            .nav-home:hover {
+            .nav-home:hover, .nav-home:focus-visible {
                 background-color: var(--accent);
                 color: var(--background);
             }
-            .nav-notebook:hover {
+            .nav-notebook:hover, .nav-notebook:focus-visible {
                 background-color: var(--purple);
                 color: var(--background);
             }
-            .nav-webmaster:hover {
+            .nav-webmaster:hover, .nav-webmaster:focus-visible {
                 background-color: var(--green);
                 color: var(--background);
             }
-            .nav-donate:hover {
+            .nav-donate:hover,.nav-donate:focus-visible {
                 background-color: var(--pink);
                 color: var(--background);
             }
@@ -525,19 +525,19 @@ html:not([data-theme="light"]) {
 
 html[data-theme="dark"] {
     .navbar {
-        .nav-home:hover {
+        .nav-home:hover, .nav-home:focus-visible {
             background-color: var(--accent);
             color: var(--background);
         }
-        .nav-notebook:hover {
+        .nav-notebook:hover, .nav-notebook:focus-visible {
             background-color: var(--purple);
             color: var(--background);
         }
-        .nav-webmaster:hover {
+        .nav-webmaster:hover, .nav-webmaster:focus-visible {
             background-color: var(--green);
             color: var(--background);
         }
-        .nav-donate:hover {
+        .nav-donate:hover, .nav-donate:focus-visible {
             background-color: var(--pink);
             color: var(--background);
         }
@@ -634,25 +634,25 @@ html[data-theme="dark"] {
                     }
                 }
 
-                .nav-home:hover {
+                .nav-home:hover, .nav-home:focus-visible {
                     background-color: color-mix(in srgb, var(--accent) 20%, transparent);
                     a {
                         color: var(--foreground);
                     }
                 }
-                .nav-notebook:hover {
+                .nav-notebook:hover, .nav-home:focus-visible {
                     background-color: color-mix(in srgb, var(--purple) 20%, transparent);
                     a {
                         color: var(--foreground);
                     }
                 }
-                .nav-webmaster:hover {
+                .nav-webmaster:hover, .nav-home:focus-visible {
                     background-color: color-mix(in srgb, var(--green) 20%, transparent);
                     a {
                         color: var(--foreground);
                     }
                 }
-                .nav-donate:hover {
+                .nav-donate:hover, .nav-home:focus-visible {
                     background-color: color-mix(in srgb, var(--pink) 20%, transparent);
                     a {
                         color: var(--foreground);
@@ -716,16 +716,16 @@ 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:hover a, .nav-home:focus-visible a {
                     color: var(--accent);
                 }
-                .nav-notebook:hover a {
+                .nav-notebook:hover a, .nav-notebook:focus-visible a {
                     color: var(--purple);
                 }
-                .nav-webmaster:hover a {
+                .nav-webmaster:hover a, .nav-webmaster:focus-visible a {
                     color: var(--green);
                 }
-                .nav-donate:hover a {
+                .nav-donate:hover a, .nav-donate:focus-visible a {
                     color: var(--pink);
                 }
             }
@@ -734,16 +734,16 @@ html[data-theme="dark"] {
 
     html[data-theme="dark"] {
         .navbar .nav-mobile-menu ul {
-            .nav-home:hover a {
+            .nav-home:hover a, .nav-home:focus-visible a {
                 color: var(--accent);
             }
-            .nav-notebook:hover a {
+            .nav-notebook:hover a, .nav-notebook:focus-visible a {
                 color: var(--purple);
             }
-            .nav-webmaster:hover a {
+            .nav-webmaster:hover a, .nav-webmaster:focus-visible a {
                 color: var(--green);
             }
-            .nav-donate:hover a {
+            .nav-donate:hover a, .nav-donate:focus-visible a {
                 color: var(--pink);
             }
         }
diff --git a/_includes/styles/navbar.css b/_includes/styles/navbar.css
index 293f1ac..fd748b2 100644
--- a/_includes/styles/navbar.css
+++ b/_includes/styles/navbar.css
@@ -56,7 +56,7 @@
         }
     }
 
-    .nav-baselink:hover {
+    .nav-baselink:hover, .nav-baselink:focus-visible {
         .synth-icon {
             transition: all .2s ease-out;
             transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
@@ -93,7 +93,7 @@
         }
     }
 
-    .nav-links:hover {
+    .nav-links:hover, .nav-links:focus-visible {
         padding-right: 9rem !important;
         padding-bottom: 7rem !important;
         transition: all .3s;
@@ -110,13 +110,13 @@
         }
     }
 
-    .nav-home:hover {
+    .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: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);
@@ -126,7 +126,7 @@
         }
     }
 
-    .nav-webmaster:hover {
+    .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);
@@ -136,7 +136,7 @@
         }
     }
 
-    .nav-donate:hover {
+    .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);
@@ -182,7 +182,7 @@
             }
         }
 
-        label[data-toggle="nav-settings"]:hover {
+        label[data-toggle="nav-settings"]:hover ,label[data-toggle="nav-settings"]:focus-visible {
             .icon {
                 transform: translateY(.1rem) scale(1.5) rotate(360deg);
                 transition: all 1.3s;