badblocks/personal-site
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add @media queries for a11y and also add small settings nav so users can

Browse source 
toggle a11y features between on / off / system.
This commit is contained in:
badblocks 2026-07-18 14:46:55 -07:00
parent 5fdc947bcd
commit c959f0d848
Signed by: badblocks
SSH key fingerprint: SHA256:hEcM6BP4hKm9F7WsomNuXSBpPn2BSDnFzPSl3y1NerQ
3 changed files with 191 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

152
public/theme.css
View file

@ -46,7 +46,6 @@ body {
var(--color-accent-transparent),
black 120%
);
color: var(--color-fg);
column-gap: var(--gutter-large);
display: grid;
@ -62,6 +61,77 @@ body {
text-shadow: 0 0 5px var(--color-glow);
top: 0;
}
body::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
background-attachment: fixed;
opacity: 0;
z-index: 2;
pointer-events: none;
animation: flicker 15s infinite;
}
body::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
linear-gradient(
90deg,
rgba(255, 0, 0, 0.06),
rgba(0, 255, 0, 0.02),
rgba(0, 0, 255, 0.06)
);
z-index: 2;
background-size:
100% 2px,
3px 100%;
background-attachment: fixed;
pointer-events: none;
}
:root[data-reduce-motion="on"] body,
:root[data-reduce-motion="on"] body::after {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
:root:not([data-reduce-motion="off"]) body,
:root:not([data-reduce-motion="off"]) body::after {
animation: none;
}
}
:root[data-more-contrast="on"] body {
background-image: none;
text-shadow: none;
animation: none;
}
:root[data-more-contrast="on"] body::before,
:root[data-more-contrast="on"] body::after {
content: none;
}
@media (prefers-contrast: more) {
:root:not([data-more-contrast="off"]) body {
background-image: none;
text-shadow: none;
animation: none;
}
:root:not([data-more-contrast="off"]) body::before,
:root:not([data-more-contrast="off"]) body::after {
content: none;
display: none;
background: none;
animation: none;
}
}
@keyframes flicker {
0% {
opacity: 0.27861;
@ -255,44 +325,6 @@ body {
0 0 3px;
}
}
body::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
background-attachment: fixed;
opacity: 0;
z-index: 2;
pointer-events: none;
animation: flicker 15s infinite;
}
body::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
linear-gradient(
90deg,
rgba(255, 0, 0, 0.06),
rgba(0, 255, 0, 0.02),
rgba(0, 0, 255, 0.06)
);
z-index: 2;
background-size:
100% 2px,
3px 100%;
background-attachment: fixed;
pointer-events: none;
}
header,
main,
footer {
@ -311,6 +343,48 @@ nav {
padding-inline: var(--gutter-small);
width: 100%;
}
.display-prefs-nav {
position: absolute;
top: 0;
right: 0;
z-index: 3;
}
.display-prefs-nav summary {
align-items: center;
cursor: pointer;
display: flex;
justify-content: flex-end;
list-style: none;
padding-block: var(--stack-small);
padding-inline: 1ch;
}
.display-prefs-nav summary::-webkit-details-marker {
display: none;
}
.display-prefs-nav summary:hover {
padding-inline: 0;
}
.display-prefs-nav summary:hover::before {
color: var(--color-glow);
content: "[";
}
.display-prefs-nav summary:hover::after {
color: var(--color-glow);
content: "]";
}
.display-prefs-nav summary > span {
translate: 0 -0.225em;
}
.display-prefs-panel {
background-color: var(--color-bg);
border: 2px solid var(--color-accent);
min-inline-size: 10em;
padding-block: var(--stack-small);
padding-inline: var(--gutter-small);
position: absolute;
right: 0;
inline-size: max-content;
}
nav ul {
column-gap: var(--gutter-large);
display: flex;