shmup/fantasyland
shmup/fantasyland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Higlight active TOC entry

Browse source
This commit is contained in:
Jared Miller 2025-12-28 05:00:51 -05:00
parent e3c3def763
commit 6ad6fe864c
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C
2 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
script.js
View file

@ -344,13 +344,20 @@ tocList?.addEventListener("click", (e) => {
}
});
// scroll TOC item into view when navigating via hash
window.addEventListener("hashchange", () => {
// highlight active TOC entry based on hash
const updateActiveTocEntry = () => {
const id = location.hash.slice(1);
tocList?.querySelector("a.active")?.classList.remove("active");
if (id) {
tocList?.querySelector(`a[href="#${id}"]`)?.scrollIntoView({ block: "nearest" });
const link = tocList?.querySelector(`a[href="#${id}"]`);
link?.classList.add("active");
}
});
};
window.addEventListener("hashchange", updateActiveTocEntry);
if (location.hash) {
updateActiveTocEntry();
}
// Entry popup preview on hover
const popup = document.createElement("div");

6
style.css
View file

@ -151,6 +151,12 @@ body {
color: var(--accent-deep);
}
.toc-list a.active {
background: rgba(182, 82, 47, 0.22);
color: var(--accent-deep);
font-weight: 600;
}
.content {
background: rgba(255, 255, 255, 0.6);
border-radius: clamp(12px, 3vw, 24px);