Compare commits

...

3 commits

Author SHA1 Message Date
3a4d95ea77
Fix human typo 2025-12-28 05:08:58 -05:00
8622392944
Higlight active TOC entry 2025-12-28 05:08:58 -05:00
fc26a54f5e
Remove reference to HTML Tidy 2025-12-28 05:03:26 -05:00
3 changed files with 18 additions and 9 deletions

View file

@ -2,10 +2,6 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta
name="generator"
content="HTML Tidy for HTML5 for Apple macOS version 5.8.0"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Tough Guide to Fantasyland</title> <title>The Tough Guide to Fantasyland</title>
<link rel="stylesheet" href="style.css" inline /> <link rel="stylesheet" href="style.css" inline />
@ -8731,7 +8727,7 @@
<p> <p>
<span class="none2">OFFSHORE ISLANDS</span> <span class="none2">OFFSHORE ISLANDS</span>
<span class="none3" <span class="none3"
>exist in some quantity, some hav i ng human >exist in some quantity, some having human
inhabitants, and one at least being the abode of inhabitants, and one at least being the abode of
DRAGONS.</span DRAGONS.</span
> >

View file

@ -344,13 +344,20 @@ tocList?.addEventListener("click", (e) => {
} }
}); });
// scroll TOC item into view when navigating via hash // highlight active TOC entry based on hash
window.addEventListener("hashchange", () => { const updateActiveTocEntry = () => {
const id = location.hash.slice(1); const id = location.hash.slice(1);
tocList?.querySelector("a.active")?.classList.remove("active");
if (id) { 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 // Entry popup preview on hover
const popup = document.createElement("div"); const popup = document.createElement("div");

View file

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