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