distinguish hover and focus

This commit is contained in:
2026-01-02 08:14:32 -08:00
parent 05d1150555
commit fdb621bdfe
2 changed files with 17 additions and 13 deletions

View File

@ -20,7 +20,12 @@
@media (any-hover: hover) { @media (any-hover: hover) {
#events li:hover { #events li:hover {
outline: solid .25rem var(--color-accent); background-color: var(--color-text);
border-color: var(--color-text);
}
#events li:hover h2 {
color: var(--color-bg);
} }
} }

View File

@ -6,17 +6,27 @@ nav {
} }
nav a { nav a {
display: block;
text-decoration: none; text-decoration: none;
font-size: 1.2rem; font-size: 1.2rem;
padding: 0 .25rem; padding: 0 .25rem;
border: solid thin var(--color-accent);
border-radius: .25rem;
outline-offset: .1rem;
} }
@media (any-hover: hover) { @media (any-hover: hover) {
nav a:hover { nav a:hover {
outline: solid .25rem var(--color-accent); color: var(--color-bg);
background-color: var(--color-text);
border-color: var(--color-text);
} }
} }
nav a:focus-visible {
outline: solid .25rem var(--color-accent);
}
nav ul { nav ul {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -25,17 +35,6 @@ nav ul {
nav li { nav li {
list-style: none; list-style: none;
border: solid thin var(--color-accent);
border-radius: .25rem;
outline-offset: .1rem;
}
nav li:focus-within {
outline: solid .25rem var(--color-accent);
}
nav li a:focus-visible {
outline: none; /* handled by above nav li rule */
} }
/* this specifically handles the home button /* this specifically handles the home button