xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: soften the focus ring on programmatically focused headings

Browse Source
This commit is contained in:
LucaP
2026-10-11 02:11:49 +03:00
parent 70b628f65a
commit 43dec06bbc
2 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/redesign/round6/heading-focus-after-1440.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

13
src/styles/base.css
View File

@@ -51,6 +51,19 @@ summary:focus-visible,
outline-offset: 3px; outline-offset: 3px;
} }
/* Destination headings take programmatic focus after a keyboard or scripted
jump. A thinner, softer ring still marks the landing point (about 5:1
against the night background) without shouting like a control's focus. */
:is(h1, h2)[tabindex]:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus) 60%, transparent);
outline-offset: 6px;
border-radius: 2px;
}
@media (forced-colors: active) {
:is(h1, h2)[tabindex]:focus-visible { outline-color: Highlight; }
}
.portfolio-main:focus-visible { .portfolio-main:focus-visible {
/* The localized cue lives outside the reading mask. Keep the main landmark /* The localized cue lives outside the reading mask. Keep the main landmark
focusable for native skip links without outlining the entire document. */ focusable for native skip links without outlining the entire document. */