servius/sukr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): add CSS-only scrollspy for TOC navigation

Browse Source 
Use CSS Overflow Level 5 properties (scroll-target-group, :target-current)
to highlight the current section in the sidebar TOC as the user scrolls.

Progressive enhancement: gracefully degrades in unsupported browsers
(Firefox, Safari) — they retain existing hover/click behavior.

Browser support: Chrome 140+, Edge 140+, Opera 124+ (~65% global).
This commit is contained in:
Timothy DeHerrera
2026-02-04 11:26:49 -07:00
parent 7af7fa34e4
commit 98977136c8
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/static/style.css vendored
View File

@@ -136,6 +136,20 @@ body {
color: var(--accent); color: var(--accent);
} }
/* CSS-only scrollspy (progressive enhancement)
* Uses CSS Overflow Level 5: scroll-target-group + :target-current
* Browser support: Chrome 140+, Edge 140+, Opera 124+
* Graceful degradation: unsupported browsers ignore these properties
*/
.sidebar .nav-anchors {
scroll-target-group: auto;
}
.sidebar .nav-anchors .anchor-link:target-current {
color: var(--accent);
font-weight: 600;
}
/* Indent anchors by heading level */ /* Indent anchors by heading level */
.sidebar .nav-anchors .level-3 { .sidebar .nav-anchors .level-3 {
margin-left: 0.5rem; margin-left: 0.5rem;