@abreen/tada 1.6.0 → 1.6.4

package/src/anchor/style.scss

@@ -1,40 +1,33 @@
-.heading-anchor {
+@use '../mixins' as *;
+
+a.heading-anchor {
   position: relative;
   display: inline-block;
-  color: var(--fg-color);
-  text-decoration: none;
+  @include subdued-link;
 }
 
-.heading-anchor::after {
-  content: var(--icon-anchor);
+a.heading-anchor::after {
+  content: '';
   display: inline-block;
-  height: 0.75em;
-  width: 0.75em;
+  height: 1em;
+  width: 1em;
   margin-left: 4px;
+  vertical-align: middle;
   opacity: 0;
+  @include contained-mask(var(--icon-anchor));
 }
 
-.heading-anchor:focus::after,
-.heading-anchor:focus-visible::after {
+a.heading-anchor:focus-visible::after {
   opacity: 1;
 }
 
 @media (hover: hover) {
-  h1:hover .heading-anchor::after,
-  h2:hover .heading-anchor::after,
-  h3:hover .heading-anchor::after,
-  h4:hover .heading-anchor::after,
-  h5:hover .heading-anchor::after,
-  h6:hover .heading-anchor::after {
+  h1:hover a.heading-anchor::after,
+  h2:hover a.heading-anchor::after,
+  h3:hover a.heading-anchor::after,
+  h4:hover a.heading-anchor::after,
+  h5:hover a.heading-anchor::after,
+  h6:hover a.heading-anchor::after {
     opacity: 1;
   }
-
-  h1:hover .heading-anchor,
-  h2:hover .heading-anchor,
-  h3:hover .heading-anchor,
-  h4:hover .heading-anchor,
-  h5:hover .heading-anchor,
-  h6:hover .heading-anchor {
-    color: var(--fg-color);
-  }
 }

package/src/header/_base.scss

@@ -1,3 +1,5 @@
+@use '../mixins' as *;
+
 :root {
   --header-collapsed-height: 45px;
 }
@@ -31,6 +33,12 @@ header details summary {
   @media (hover: hover) {
     &:hover {
       color: inherit;
+      text-decoration-line: none;
+      background: var(--bg2-color);
+    }
+
+    &:hover .site-title {
+      @include link-underline;
     }
   }
 

package/src/header/index.ts

@@ -35,9 +35,21 @@ export default (window: Window) => {
   }
   window.addEventListener('keydown', handleWindowKeyDown);
 
+  function handleDetailsFocusOut(e: FocusEvent) {
+    if (!details.open) {
+      return;
+    }
+    const next = e.relatedTarget as Node | null;
+    if (!next || !details.contains(next)) {
+      close();
+    }
+  }
+  details.addEventListener('focusout', handleDetailsFocusOut);
+
   return () => {
     window.removeEventListener('keydown', handleWindowKeyDown);
     window.removeEventListener('click', handleWindowClick);
     details.removeEventListener('click', handleDetailsClick);
+    details.removeEventListener('focusout', handleDetailsFocusOut);
   };
 };

package/src/header/style.scss

@@ -26,20 +26,7 @@ header nav ul li {
 header nav a {
   border: none;
   display: inline;
-  color: var(--fg-color);
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  header nav a {
-    &:hover {
-      color: var(--fg2-color);
-    }
-
-    &:active {
-      color: var(--link-active-color);
-    }
-  }
+  @include subdued-link;
 }
 
 header nav a.external {
@@ -60,10 +47,6 @@ header nav div > p {
 }
 
 @media (hover: hover) {
-  header details summary:hover {
-    background: var(--bg2-color);
-  }
-
   header:has(details[open]):hover {
     background: var(--bg-color-translucent);
   }

package/src/index.ts

@@ -59,6 +59,18 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Mount per-page components
   await mountPerPageComponents(window);
 
+  // On reload with manual scrollRestoration, browsers skip the initial
+  // fragment scroll. Do it ourselves once per-page components have
+  // finished mutating the DOM. On a fresh cold load the browser already
+  // scrolled, so this is a harmless re-align.
+  if (window.location.hash) {
+    const id = window.location.hash.slice(1);
+    const el = window.document.getElementById(id);
+    if (el) {
+      el.scrollIntoView();
+    }
+  }
+
   for (const [name, reason] of Object.entries(failed)) {
     console.error(`Failed to mount ${name} component:`, reason);
   }

package/src/navigate/index.ts

@@ -5,6 +5,11 @@ let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
 let currentPath = '';
 
+// In-memory scroll positions keyed by navIndex. Populated on scroll and
+// consulted by handlePopState so returning to a previous entry via
+// back/forward restores the user's scroll, not just scroll 0.
+const scrollByIndex = new Map<number, number>();
+
 type Direction = 'forward' | 'back';
 
 function findAnchor(event: MouseEvent): HTMLAnchorElement | null {
@@ -145,27 +150,35 @@ async function performNavigation(
     teardownPerPageComponents();
     swapContent(newDoc);
     updateHead(newDoc);
+    const parsed = new URL(url);
+    currentPath = parsed.pathname + parsed.search;
+
     if (isPush) {
       historyIndex++;
-      window.history.pushState({ navIndex: historyIndex }, '', url);
+      // Push without the hash; we add it back below via location.replace
+      // so the browser performs a real fragment navigation that updates
+      // :target and fires hashchange. pushState alone would not do
+      // either of those things.
+      const urlWithoutHash = parsed.origin + parsed.pathname + parsed.search;
+      window.history.pushState({ navIndex: historyIndex }, '', urlWithoutHash);
     }
-    const parsed = new URL(url);
-    currentPath = parsed.pathname + parsed.search;
 
     if (typeof scrollTarget === 'string') {
-      // Hash target
-      const el = document.getElementById(scrollTarget);
-      if (el) {
-        el.scrollIntoView();
-      } else {
-        window.scrollTo({ top: 0 });
-      }
+      // Trigger a real fragment navigation. location.replace overwrites
+      // the current entry's URL in place and runs fragment navigation
+      // (updating :target, firing hashchange, scrolling to the element).
+      // It wipes the entry's state object, so reapply it via
+      // replaceState.
+      const urlWithHash = parsed.pathname + parsed.search + '#' + scrollTarget;
+      window.location.replace(urlWithHash);
+      window.history.replaceState({ navIndex: historyIndex }, '', urlWithHash);
     } else if (typeof scrollTarget === 'number') {
       // Restore scroll position (popstate)
       window.scrollTo({ top: scrollTarget });
     } else {
       window.scrollTo({ top: 0 });
     }
+    scrollByIndex.set(historyIndex, window.scrollY);
   };
 
   const doc = document as Document & {
@@ -261,6 +274,16 @@ async function performNavigation(
 export default function mountNavigate(window: Window): () => void {
   window.history.scrollRestoration = 'manual';
   currentPath = window.location.pathname + window.location.search;
+  scrollByIndex.set(historyIndex, window.scrollY);
+
+  // Track scroll position on every scroll event. We keep the latest
+  // scrollY per navIndex so that back/forward navigation can restore
+  // where the user was, not just scroll 0. Map writes are cheap; no
+  // need to debounce.
+  const saveScroll = () => {
+    scrollByIndex.set(historyIndex, window.scrollY);
+  };
+  window.addEventListener('scroll', saveScroll, { passive: true });
 
   function handleClick(event: MouseEvent) {
     const anchor = findAnchor(event);
@@ -278,7 +301,8 @@ export default function mountNavigate(window: Window): () => void {
       return;
     }
 
-    // Same-page hash links: smooth scroll instead of letting the browser jump
+    // Same-page hash links: handle locally so we can clear search and
+    // close the header without a full SPA fetch.
     const url = new URL(anchor.href);
     if (
       url.pathname === window.location.pathname &&
@@ -293,11 +317,11 @@ export default function mountNavigate(window: Window): () => void {
         details.open = false;
       }
       if (url.hash) {
-        window.history.pushState(null, '', url.hash);
-        const el = window.document.getElementById(url.hash.slice(1));
-        if (el) {
-          el.scrollIntoView({ behavior: 'smooth' });
-        }
+        // location.hash assignment performs a real fragment navigation:
+        // updates :target, fires hashchange (which the TOC listens for),
+        // creates a new history entry, and scrolls to the element.
+        // pushState would do none of those things.
+        window.location.hash = url.hash.slice(1);
       }
       return;
     }
@@ -314,15 +338,8 @@ export default function mountNavigate(window: Window): () => void {
       details.open = false;
     }
 
-    // Save current scroll position and history index
-    window.history.replaceState(
-      {
-        ...window.history.state,
-        scrollY: window.scrollY,
-        navIndex: historyIndex,
-      },
-      '',
-    );
+    // Save current scroll position for the entry we're leaving
+    scrollByIndex.set(historyIndex, window.scrollY);
 
     const hash = url.hash ? url.hash.slice(1) : null;
 
@@ -337,23 +354,23 @@ export default function mountNavigate(window: Window): () => void {
       if (hash) {
         const el = window.document.getElementById(hash);
         if (el) {
-          el.scrollIntoView({ behavior: 'smooth' });
+          el.scrollIntoView();
         }
       } else {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
+        window.scrollTo({ top: 0 });
       }
       return;
     }
     currentPath = newPath;
 
-    const scrollY = event.state?.scrollY ?? null;
     const targetIndex = event.state?.navIndex ?? 0;
     const direction: Direction =
       targetIndex >= historyIndex ? 'forward' : 'back';
     historyIndex = targetIndex;
+    const savedY = scrollByIndex.get(targetIndex);
     performNavigation(
       window.location.href,
-      typeof scrollY === 'number' ? scrollY : null,
+      typeof savedY === 'number' ? savedY : null,
       direction,
       false,
     );
@@ -367,5 +384,6 @@ export default function mountNavigate(window: Window): () => void {
   return () => {
     window.document.removeEventListener('click', handleClick, true);
     window.removeEventListener('popstate', handlePopState);
+    window.removeEventListener('scroll', saveScroll);
   };
 }

package/src/print/style.scss

@@ -65,7 +65,7 @@
     width: 100%;
   }
 
-  .heading-anchor::after {
+  a.heading-anchor::after {
     display: none;
   }
 

package/src/style.scss

@@ -55,42 +55,23 @@ a.disabled {
   @media (hover: hover) {
     &:hover {
       color: var(--fg-color-translucent);
+      text-decoration-line: none;
     }
   }
 }
 
-a.external::after {
-  content: '';
-  background: var(--icon-external-link);
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-  margin-left: 4px;
-  padding-right: 18px;
-}
-
-@media (hover: hover) {
-  a.external:hover::after {
-    background: var(--icon-external-link-hover);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
-
-a.external:active::after {
-  background: var(--icon-external-link-active) !important;
-  background-size: contain !important;
-  background-repeat: no-repeat !important;
-  background-position: center center !important;
+.external-link-tail {
+  white-space: nowrap;
 }
 
-a.external.disabled::after,
-a.external.disabled:active::after {
-  background: var(--icon-external-translucent) !important;
-  background-size: contain !important;
-  background-repeat: no-repeat !important;
-  background-position: center center !important;
+.external-link-tail::after,
+a.external:not(:has(.external-link-tail))::after {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  @include contained-mask(var(--icon-external-link));
 }
 
 .footnotes {
@@ -110,14 +91,34 @@ a.external.disabled:active::after {
   margin: 0;
 }
 
+.footnotes ol {
+  list-style: none;
+  padding-left: 0;
+}
+
 .footnotes li {
+  position: relative;
+  padding-left: 1.8em;
   margin-bottom: 8px;
 }
 
 a.footnote-ref {
-  vertical-align: super;
-  border-bottom: none;
+  vertical-align: text-bottom;
   font-size: 0.8em;
+  font-weight: 600;
+}
+
+.footnote-marker {
+  @include user-select(none);
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-weight: 500;
+}
+
+a.footnote-ref,
+.footnote-marker {
+  font-feature-settings: 'ss06';
 }
 
 .footnote-item {
@@ -127,7 +128,10 @@ a.footnote-ref {
   }
 }
 
-a.footnote-ref,
+a.footnote-ref {
+  @include user-select(none);
+}
+
 .footnotes .footnote-backref {
   display: inline-block;
   @include user-select(none);
@@ -379,21 +383,6 @@ dl {
   dt {
     font-weight: 600;
     color: var(--theme-color-text);
-
-    a {
-      color: var(--theme-color-text);
-      text-decoration-color: var(--theme-color-text);
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration-color: var(--fg2-color);
-        }
-      }
-
-      &:active {
-        text-decoration-color: var(--link-active-color);
-      }
-    }
   }
 
   dd > *:first-child {
@@ -407,12 +396,17 @@ dfn {
   font-style: italic;
 }
 
-.breadcrumb {
+a.breadcrumb {
   @include user-select(none);
+  @include subdued-link;
 
   &::after {
-    content: var(--icon-breadcrumb);
+    content: '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
     vertical-align: middle;
+    @include contained-mask(var(--icon-breadcrumb));
   }
 }
 

package/src/toc/index.ts

@@ -37,7 +37,7 @@ function scrollIfNeeded(element: HTMLElement, doc: Document) {
     elementRect.height / 2;
   const desiredScrollTop = elementCenter - container.clientHeight / 2;
 
-  container.scrollTo({ top: desiredScrollTop, behavior: 'smooth' });
+  container.scrollTo({ top: desiredScrollTop });
 }
 
 export function getHighlightIndexes(items: (Heading | Alert | Dinkus)[]) {

package/src/toc/style.scss

@@ -127,51 +127,22 @@ body.code .toc ol a {
   position: relative;
 }
 
-// Preload hover icon variants so the browser decodes them before first hover
-.toc ol li.alert-item.warning::after {
-  content: var(--icon-warning-sm-hover);
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-}
-
-.toc ol li.alert-item.note::after {
-  content: var(--icon-note-sm-hover);
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-}
-
 .toc ol li.alert-item.warning a::before,
 .toc ol li.alert-item.note a::before {
+  content: '';
   display: inline-block;
+  width: 20px;
   height: 20px;
   vertical-align: bottom;
   margin-right: 4px;
 }
 
 .toc ol li.alert-item.warning a::before {
-  content: var(--icon-warning-sm);
-}
-
-@media (hover: hover) {
-  .toc ol li.alert-item.warning:hover a::before,
-  .toc ol li.alert-item.warning a:hover::before {
-    content: var(--icon-warning-sm-hover);
-  }
+  @include contained-mask(var(--icon-warning));
 }
 
 .toc ol li.alert-item.note a::before {
-  content: var(--icon-note-sm);
-}
-
-@media (hover: hover) {
-  .toc ol li.alert-item.note:hover a::before,
-  .toc ol li.alert-item.note a:hover::before {
-    content: var(--icon-note-sm-hover);
-  }
+  @include contained-mask(var(--icon-note));
 }
 
 .toc ol li.label {

package/src/top/index.ts

@@ -30,11 +30,15 @@ export default (window: Window) => {
     e.preventDefault();
     const cleanUrl = window.location.pathname + window.location.search;
     if (window.location.hash) {
-      window.history.pushState(null, '', cleanUrl);
+      // Clear the hash via fragment navigation so :target clears and
+      // hashchange fires. location.hash = '' may leave a trailing '#';
+      // strip it with replaceState.
+      window.location.hash = '';
+      window.history.replaceState(null, '', cleanUrl);
     } else {
       window.history.replaceState(null, '', cleanUrl);
     }
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    window.scrollTo({ top: 0 });
     const toc = window.document.querySelector('nav.toc') as HTMLElement | null;
     if (toc) {
       toc.scrollTop = 0;

package/templates/_theme.scss

@@ -21,6 +21,9 @@
   // Secondary foreground color (lighter)
   --fg2-color: hsl(var(--tint-hue) calc(6% * var(--tint-amount)) 45%);
 
+  --link-color: <%= linkColor %>;
+  --link-color-hover: <%= linkColorHover %>;
+
   // Main background color (the color of the page background)
   --bg-color: hsl(var(--tint-hue) calc(5% * var(--tint-amount)) 97%);
   --bg-color-translucent: hsl(
@@ -56,20 +59,14 @@
   --mono-border-radius: 0.375em;
 
   // SVG icons
-  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='<%= iconColor %>' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='<%= iconColorHover %>' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-link-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='black' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  --icon-external-translucent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g opacity='0.3' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round' fill='none'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 15 L15 9' stroke-linecap='round'/><path d='M9 9 H15 V15' stroke-linecap='round'/></g></svg>");
-  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='<%= iconColor %>' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-warning-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='<%= iconColor %>' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-warning-sm-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='<%= iconColor %>' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-note-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='<%= iconColor %>' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-note-sm-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='<%= iconColorHover %>' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='<%= iconColorHover %>' stroke-width='2' stroke-linecap='round'/></svg>");
+  // Mask icons (color-agnostic, painted via background-color: currentColor)
+  --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M6 18 L20 4 M10 4 H20 V14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
+  --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
+  --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
+  --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
-  --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='<%= iconColor %>' fill-rule='evenodd' clip-rule='evenodd' d='M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z'/></svg>");
   --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
+  --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
 
   color-scheme: light dark;
 }
@@ -85,6 +82,8 @@
       var(--tint-hue) calc(85% * var(--tint-amount)) 90% / 33%
     );
     --fg2-color: hsl(var(--tint-hue) calc(6% * var(--tint-amount)) 60%);
+    --link-color: <%= linkColorDark %>;
+    --link-color-hover: <%= linkColorHoverDark %>;
     --bg-color: hsl(var(--tint-hue) calc(3% * var(--tint-amount)) 5%);
     --bg-color-translucent: hsl(
       var(--tint-hue) calc(15% * var(--tint-amount)) 10% / 66%
@@ -103,19 +102,7 @@
     --note-bg-color: hsl(209 90% 25%);
 
     // SVG icons (dark overrides)
-    --icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='<%= iconColorDark %>' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-    --icon-external-link-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='<%= iconColorHoverDark %>' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-    --icon-external-link-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' stroke='white' stroke-width='2' fill='none' rx='2'/><path d='M9 15 L15 9' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M9 9 H15 V15' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-    --icon-external-translucent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g opacity='0.3' stroke='<%= iconColorTranslucentDark %>' stroke-width='2' stroke-linecap='round' fill='none'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M9 15 L15 9' stroke-linecap='round'/><path d='M9 9 H15 V15' stroke-linecap='round'/></g></svg>");
-    --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-warning-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-warning-sm-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='<%= iconColorDark %>' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-note-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='<%= iconColorDark %>' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-note-sm-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='<%= iconColorHoverDark %>' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='<%= iconColorHoverDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
     --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColorDark %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round'/></svg>");
-    --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='<%= iconColorDark %>' fill-rule='evenodd' clip-rule='evenodd' d='M10.975 14.51a1.05 1.05 0 0 0 0-1.485 2.95 2.95 0 0 1 0-4.172l3.536-3.535a2.95 2.95 0 1 1 4.172 4.172l-1.093 1.092a1.05 1.05 0 0 0 1.485 1.485l1.093-1.092a5.05 5.05 0 0 0-7.142-7.142L9.49 7.368a5.05 5.05 0 0 0 0 7.142c.41.41 1.075.41 1.485 0zm2.05-5.02a1.05 1.05 0 0 0 0 1.485 2.95 2.95 0 0 1 0 4.172l-3.5 3.5a2.95 2.95 0 1 1-4.171-4.172l1.025-1.025a1.05 1.05 0 0 0-1.485-1.485L3.87 12.99a5.05 5.05 0 0 0 7.142 7.142l3.5-3.5a5.05 5.05 0 0 0 0-7.142 1.05 1.05 0 0 0-1.485 0z'/></svg>");
     --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColorDark %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-    --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='<%= iconColorDark %>' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   }
 }