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

fix subpixel shift when link hover brackets appear

Browse source
This commit is contained in:
badblocks 2026-07-20 12:11:29 -07:00
parent 8466324a59
commit 89cfe7bdec
Signed by: badblocks
SSH key fingerprint: SHA256:hEcM6BP4hKm9F7WsomNuXSBpPn2BSDnFzPSl3y1NerQ
1 changed files with 29 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

47
public/theme.css
View file

@ -356,28 +356,32 @@ nav {
justify-content: flex-end; justify-content: flex-end;
list-style: none; list-style: none;
padding-block: var(--stack-small); padding-block: var(--stack-small);
padding-inline: 1ch; padding-inline: 0;
} }
.display-prefs-nav summary::-webkit-details-marker { .display-prefs-nav summary::-webkit-details-marker {
display: none; display: none;
} }
.display-prefs-nav summary:hover { .display-prefs-nav summary::before {
padding-inline: 0; color: transparent;
text-shadow: none;
content: "[" / "";
} }
.display-prefs-nav summary:hover::before { .display-prefs-nav summary::after {
color: var(--color-glow); color: transparent;
content: "["; text-shadow: none;
content: "]" / "";
} }
.display-prefs-nav summary:hover::before,
.display-prefs-nav summary:hover::after { .display-prefs-nav summary:hover::after {
color: var(--color-glow); color: var(--color-glow);
content: "]"; text-shadow: inherit;
} }
.display-prefs-nav summary > span { .display-prefs-nav summary > span {
translate: 0 -0.225em; translate: 0 -0.225em;
} }
.display-prefs-panel { .display-prefs-panel {
background-color: var(--color-bg); background-color: var(--color-bg);
border: 2px solid var(--color-accent); border: 1px solid var(--color-accent);
min-inline-size: 10em; min-inline-size: 10em;
padding-block: var(--stack-small); padding-block: var(--stack-small);
padding-inline: var(--gutter-small); padding-inline: var(--gutter-small);
@ -414,21 +418,30 @@ form p {
a { a {
color: var(--color-fg); color: var(--color-fg);
margin: 0 -1ch; margin: 0 -1ch;
padding: 0 1ch;
text-decoration: underline; text-decoration: underline;
text-decoration-color: var(--color-glow); text-decoration-color: var(--color-glow);
&:hover::before { /* Brackets always occupy their space and hover only reveals them. Swapping
color: var(--color-glow); ch-based padding for a rendered glyph shifts the text by a subpixel,
content: "["; because the fluid root font-size makes 1ch fractional.
The / "" keeps them out of the accessible name. */
&::before {
color: transparent;
text-shadow: none;
content: "[" / "";
} }
&::after {
color: transparent;
text-shadow: none;
content: "]" / "";
}
&:hover::before,
&:hover::after { &:hover::after {
color: var(--color-glow); color: var(--color-glow);
content: "]"; text-shadow: inherit;
} }
&:hover { &:hover {
color: var(--color-fg); color: var(--color-fg);
padding: 0;
text-decoration: none; text-decoration: none;
} }
} }
@ -439,10 +452,8 @@ footer a {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
&:hover::before { &::before,
content: none; &::after {
}
&:hover::after {
content: none; content: none;
} }
} }