sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

accessibility styling fixes
All checks were successful
/ build (push) Successful in 1m11s
Details

Browse source
This commit is contained in:
Ruben 2025-06-30 17:46:12 -05:00
commit 2e4dc59d4c
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
2 changed files with 27 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

40
_includes/styles/base.css
View file

@ -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);
}
}

14
_includes/styles/navbar.css
View file

@ -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;