inherentlee/district-dharma
0
0
Fork 0
generated from inherentlee/11ty
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

focus rings for header and footer

Browse Source
This commit is contained in:
Lee Cattarin
2026-06-22 10:36:27 -07:00
parent b2bba0a459
commit 6cd8a7c884
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
css/main.css
View File

@ -11,6 +11,7 @@
--color-text: light-dark(var(--color-dark), var(--color-light));
--color-bg: light-dark(var(--color-light), var(--color-dark));
--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
--color-accent-flipped: light-dark(var(--color-blue-light), var(--color-blue-dark));
--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
}
@ -28,8 +29,8 @@
}
*:focus-visible {
outline-offset: .1rem;
outline: .1rem solid var(--color-accent);
outline-offset: .12rem;
outline: .12rem solid var(--color-accent);
border-radius: .25rem;
}
@ -134,13 +135,25 @@ a:visited {
/* Header/nav/footer */
header {
height: 20vh;
padding: 1rem;
padding: calc(20vh / 8);
background-color: var(--color-accent);
}
.logo {
height: 100%;
width: auto;
padding: calc(20vh / 30);
border: calc(20vh / 50) solid var(--color-accent);
border-radius: calc(20vh / 3);
}
header a:focus-visible {
outline: none; /* covered by logo rule below */
}
header a:focus-visible .logo {
border-color: var(--color-text);
outline: calc(20vh / 30) solid var(--color-accent-flipped);
}
@media (prefers-color-scheme: light) {
@ -170,6 +183,10 @@ footer a:visited {
text-decoration-color: var(--color-bg);
}
footer a:focus-visible {
outline: .15rem solid var(--color-accent-flipped);
}
/* Misc */
#hero {
aspect-ratio: 40 / 9;