@abreen/tada 1.6.0 → 1.6.2

package/build/bundle.ts

@@ -9,7 +9,7 @@ import {
   getDistDir,
   toPosix,
 } from './utils/paths';
-import { deriveTheme } from './utils/derive-theme';
+import { deriveTheme, deriveLinkHue } from './utils/derive-theme';
 import type { PluginBuilder } from 'bun';
 import type { SiteVariables } from './types';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
@@ -27,6 +27,12 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const iconColorHoverDark = `hsl(${tintHue}deg ${(6 * tintAmount) / 100}% 60%)`;
   const iconColorTranslucentDark = `hsl(${tintHue}deg ${(85 * tintAmount) / 100}% 90%)`;
 
+  const linkHue = deriveLinkHue(tintHue);
+  const linkColor = `hsl(${linkHue}deg 44.4% 49.4%)`;
+  const linkColorHover = `hsl(${linkHue}deg 34% 60%)`;
+  const linkColorDark = `hsl(${linkHue}deg 50% 72%)`;
+  const linkColorHoverDark = `hsl(${linkHue}deg 40% 80%)`;
+
   const rendered = _.template(template)({
     ...theme,
     tintHue,
@@ -36,6 +42,10 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     iconColorDark,
     iconColorHoverDark,
     iconColorTranslucentDark,
+    linkColor,
+    linkColorHover,
+    linkColorDark,
+    linkColorHoverDark,
   });
 
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'tada-'));

package/build/external-links-plugin.ts

@@ -1,5 +1,5 @@
 import type MarkdownIt from 'markdown-it';
-import type Token from 'markdown-it/lib/token.mjs';
+import Token from 'markdown-it/lib/token.mjs';
 import { makeLogger } from './log';
 import type { SiteVariables } from './types';
 
@@ -9,38 +9,197 @@ export default function externalLinks(
   md: MarkdownIt,
   siteVariables: SiteVariables,
 ): void {
-  function addClass(token: Token): void {
-    if (token.type === 'link_open') {
-      const href = token.attrGet('href');
-      if (!href) {
-        return;
+  function isExternal(href: string): boolean {
+    if (!href.match(/^https?:\/\/.*$/)) {
+      return false;
+    }
+    const url = new URL(href);
+    return !siteVariables.internalDomains?.includes(url.host);
+  }
+
+  function findMatchingClose(children: Token[], openIdx: number): number {
+    let depth = 1;
+    for (let i = openIdx + 1; i < children.length; i++) {
+      if (children[i].type === 'link_open') {
+        depth++;
+      } else if (children[i].type === 'link_close') {
+        depth--;
+        if (depth === 0) {
+          return i;
+        }
       }
+    }
+    return -1;
+  }
+
+  function makeSpanOpen(): Token {
+    const t = new Token('html_inline', '', 0);
+    t.content = '<span class="external-link-tail">';
+    return t;
+  }
 
-      if (href.match(/^https?:\/\/.*$/)) {
-        const url = new URL(href);
-        if (!siteVariables.internalDomains?.includes(url.host)) {
-          const classAttr = token.attrGet('class');
-          let newClassAttr;
+  function makeSpanClose(): Token {
+    const t = new Token('html_inline', '', 0);
+    t.content = '</span>';
+    return t;
+  }
+
+  // Wrap the trailing word of an external link in
+  // <span class="external-link-tail"> so the icon (added via that span's
+  // ::after) stays glued to the last word and doesn't wrap on its own.
+  // The span is inserted inside any inline-formatting elements (em,
+  // strong, code, ...) that are still open at the split point, so the
+  // resulting markup stays nested.
+  function wrapTail(linkChildren: Token[]): Token[] | null {
+    if (linkChildren.length === 0) {
+      return null;
+    }
 
-          if (classAttr) {
-            newClassAttr = classAttr + ' external';
-          } else {
-            newClassAttr = 'external';
-          }
+    // Find the rightmost split char (space or hyphen) in a text token,
+    // skipping any candidate that would produce an empty tail (e.g. a
+    // trailing hyphen with no content after it).
+    let splitTokenIdx = -1;
+    let splitCharIdx = -1;
+    for (let i = linkChildren.length - 1; i >= 0; i--) {
+      const tok = linkChildren[i];
+      if (tok.type !== 'text') {
+        continue;
+      }
+      const text = tok.content;
+      const hasLaterTokens = i < linkChildren.length - 1;
+      let foundIdx = -1;
+      for (let j = text.length - 1; j >= 0; j--) {
+        const c = text[j];
+        if (c !== ' ' && c !== '-') {
+          continue;
+        }
+        if (j < text.length - 1 || hasLaterTokens) {
+          foundIdx = j;
+          break;
+        }
+      }
+      if (foundIdx !== -1) {
+        splitTokenIdx = i;
+        splitCharIdx = foundIdx;
+        break;
+      }
+    }
 
-          log.debug`${href} -> "${newClassAttr}"`;
-          token.attrSet('class', newClassAttr);
+    if (splitTokenIdx === -1) {
+      // No space anywhere in the link's text. Wrap the whole content.
+      return [makeSpanOpen(), ...linkChildren, makeSpanClose()];
+    }
 
-          log.debug`${href} -> target="_blank"`;
-          token.attrSet('target', '_blank');
+    // Find where to put the span close: walk forward from the split
+    // point tracking nesting depth (locally opened elements after the
+    // split). The span must close before any -1 token that would close
+    // an element that was already open at the split point.
+    let spanCloseIdx = linkChildren.length;
+    let depth = 0;
+    for (let i = splitTokenIdx + 1; i < linkChildren.length; i++) {
+      const tok = linkChildren[i];
+      if (tok.nesting === 1) {
+        depth++;
+      } else if (tok.nesting === -1) {
+        if (depth > 0) {
+          depth--;
+        } else {
+          spanCloseIdx = i;
+          break;
         }
       }
     }
 
-    token.children?.map(addClass);
+    const splitToken = linkChildren[splitTokenIdx];
+    const before = splitToken.content.slice(0, splitCharIdx + 1);
+    const after = splitToken.content.slice(splitCharIdx + 1);
+
+    const result: Token[] = [];
+
+    // Tokens before the split, unchanged.
+    for (let i = 0; i < splitTokenIdx; i++) {
+      result.push(linkChildren[i]);
+    }
+
+    // The "before" part of the split text token.
+    if (before.length > 0) {
+      const beforeToken = new Token('text', '', 0);
+      beforeToken.content = before;
+      result.push(beforeToken);
+    }
+
+    result.push(makeSpanOpen());
+
+    // The "after" part of the split text token.
+    if (after.length > 0) {
+      const afterToken = new Token('text', '', 0);
+      afterToken.content = after;
+      result.push(afterToken);
+    }
+
+    // Tokens between the split and the span close.
+    for (let i = splitTokenIdx + 1; i < spanCloseIdx; i++) {
+      result.push(linkChildren[i]);
+    }
+
+    result.push(makeSpanClose());
+
+    // Tokens from the span close position to the end.
+    for (let i = spanCloseIdx; i < linkChildren.length; i++) {
+      result.push(linkChildren[i]);
+    }
+
+    return result;
+  }
+
+  function processChildren(children: Token[]): Token[] {
+    const result: Token[] = [];
+    let i = 0;
+    while (i < children.length) {
+      const token = children[i];
+
+      if (token.type !== 'link_open') {
+        result.push(token);
+        i++;
+        continue;
+      }
+
+      const href = token.attrGet('href');
+      if (!href || !isExternal(href)) {
+        result.push(token);
+        i++;
+        continue;
+      }
+
+      const classAttr = token.attrGet('class');
+      const newClassAttr = classAttr ? `${classAttr} external` : 'external';
+      token.attrSet('class', newClassAttr);
+      token.attrSet('target', '_blank');
+      log.debug`${href} -> "${newClassAttr}"`;
+
+      const closeIdx = findMatchingClose(children, i);
+      if (closeIdx === -1) {
+        result.push(token);
+        i++;
+        continue;
+      }
+
+      const linkContent = children.slice(i + 1, closeIdx);
+      const wrapped = wrapTail(linkContent);
+
+      result.push(token);
+      result.push(...(wrapped ?? linkContent));
+      result.push(children[closeIdx]);
+      i = closeIdx + 1;
+    }
+    return result;
   }
 
   md.core.ruler.push('external_links', state => {
-    state.tokens.map(addClass);
+    state.tokens.forEach(token => {
+      if (token.children) {
+        token.children = processChildren(token.children);
+      }
+    });
   });
 }

package/build/utils/derive-theme.ts

@@ -14,6 +14,9 @@ const LIGHT_TEXT_L_MAX = 0.5;
 const DARK_TEXT_L_MIN = 0.7;
 const DARK_TEXT_L_MAX = 0.82;
 
+const LINK_ANCHOR_HUE = 212;
+const LINK_TINT_BLEND = 0.05;
+
 function clamp(v: number, min: number, max: number): number {
   return Math.min(Math.max(v, min), max);
 }
@@ -75,6 +78,11 @@ export function deriveTheme(cssColor: string): DerivedTheme {
   };
 }
 
+export function deriveLinkHue(tintHue: number): number {
+  const diff = ((tintHue - LINK_ANCHOR_HUE + 540) % 360) - 180;
+  return (LINK_ANCHOR_HUE + diff * LINK_TINT_BLEND + 360) % 360;
+}
+
 export function getTextOnColor(cssColor: string): '#fff' | '#000' {
   const parsed = parse(cssColor);
   if (!parsed) {

package/build/utils/render.ts

@@ -46,12 +46,17 @@ const log = makeLogger(import.meta.url);
 
 const REQUIRED_FRONT_MATTER_FIELDS = ['title'];
 
+function isWatchMode(assetFiles: string[]): boolean {
+  return assetFiles.some(f => f.includes('watch-reload-client'));
+}
+
 interface TemplateParametersInput {
   pageVariables: Record<string, unknown>;
   siteVariables: SiteVariables;
   content: string | null;
   applyBasePath: (subPath: string) => string;
   subPath: string;
+  isWatchMode: boolean;
 }
 
 function resolveAuthor(
@@ -101,6 +106,7 @@ function createTemplateParameters({
   content,
   applyBasePath,
   subPath,
+  isWatchMode,
 }: TemplateParametersInput): Record<string, unknown> {
   return {
     vars: siteVariables.vars || {},
@@ -111,6 +117,7 @@ function createTemplateParameters({
     page: pageVariables,
     content,
     applyBasePath,
+    isWatchMode,
   };
 }
 
@@ -188,12 +195,14 @@ export function renderPlainTextPageAsset({
   const applyBasePath = createApplyBasePath(siteVariables);
 
   log.info`Rendering page ${B`${subPath + ext}`}`;
+  const watchMode = isWatchMode(assetFiles);
   const { content, pageVariables, tocItems, alertIds } = renderPlainTextContent(
     filePath,
     subPath,
     siteVariables,
     applyBasePath,
     validInternalTargets,
+    watchMode,
     {
       validateInternalLinks: extensionIsMarkdown(ext.toLowerCase()),
       traceCache,
@@ -223,6 +232,7 @@ export function renderPlainTextPageAsset({
     content,
     applyBasePath,
     subPath,
+    isWatchMode: watchMode,
   });
 
   const templateHtml = render(
@@ -286,6 +296,7 @@ export function renderCodePageAsset({
     content,
     applyBasePath,
     subPath,
+    isWatchMode: isWatchMode(assetFiles),
   });
 
   const html = injectAssetTags(
@@ -339,6 +350,7 @@ function renderPlainTextContent(
   siteVariables: SiteVariables,
   applyBasePath: (subPath: string) => string,
   validInternalTargets: Set<string>,
+  isWatchMode: boolean,
   {
     validateInternalLinks = true,
     traceCache,
@@ -396,6 +408,7 @@ function renderPlainTextContent(
     content: null,
     applyBasePath,
     subPath,
+    isWatchMode,
   });
   const pageVariablesProcessed: Record<string, unknown> = Object.entries(
     pageVariables,
@@ -446,6 +459,7 @@ function renderPlainTextContent(
     content: strippedContent,
     applyBasePath,
     subPath,
+    isWatchMode,
   });
 
   if (traceCache && contentDir && distDir) {
@@ -649,6 +663,7 @@ export function renderLiterateJavaPageAsset({
     content: contentHtml,
     applyBasePath,
     subPath,
+    isWatchMode: isWatchMode(assetFiles),
   });
 
   const templateHtml = render('literate.html', templateParameters) as string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/_alerts.scss

@@ -39,10 +39,15 @@
   }
 
   a {
-    text-decoration-color: var(--fg-color);
+    @include link-underline;
+    color: var(--fg-color);
 
     &:hover {
-      text-decoration-color: inherit;
+      color: var(--fg2-color);
+    }
+
+    &:active {
+      color: var(--link-active-color);
     }
   }
 
@@ -60,6 +65,7 @@
 }
 
 .alert .title::before {
+  content: '';
   left: 8px;
   top: 8px;
   position: absolute;
@@ -68,12 +74,11 @@
 }
 
 .alert.warning .title::before {
-  content: var(--icon-warning);
+  @include contained-mask(var(--icon-warning));
 }
 
 i.warning {
-  background: var(--icon-warning);
-  background-size: contain;
+  @include contained-mask(var(--icon-warning));
   display: inline-block;
   height: 1em;
   width: 1em;
@@ -81,7 +86,7 @@ i.warning {
 }
 
 .alert.note .title::before {
-  content: var(--icon-note);
+  @include contained-mask(var(--icon-note));
 }
 
 .alert .title {

package/src/_base.scss

@@ -66,22 +66,18 @@ html {
 }
 
 a {
-  color: var(--fg-color);
-  text-decoration-color: var(--fg2-color);
-  text-decoration-thickness: 1.5px;
+  color: var(--link-color);
+  text-decoration-line: none;
 
   @media (hover: hover) {
     &:hover {
-      color: var(--fg2-color);
+      color: var(--link-color-hover);
+      @include link-underline;
     }
   }
-}
 
-a:active {
-  color: var(--link-active-color);
-
-  @media (hover: hover) {
-    text-decoration-color: var(--link-active-color);
+  &:active {
+    color: var(--link-active-color);
   }
 }
 
@@ -146,6 +142,7 @@ details .content {
   details summary {
     &:hover {
       color: var(--fg2-color);
+      @include link-underline;
     }
 
     &:active {

package/src/_layout.scss

@@ -156,10 +156,31 @@ body.literate main table {
       .text {
         color: var(--fg2-color);
         text-decoration: underline;
-        text-decoration-color: var(--fg2-color);
         text-decoration-thickness: 1px;
         text-underline-offset: 3px;
       }
+
+      &:hover .text {
+        color: var(--link-color-hover);
+      }
+
+      &:active .text {
+        color: var(--link-active-color);
+      }
+
+      &:active .avatar {
+        border-color: var(--link-active-color);
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      &:focus-visible .text,
+      &:focus-visible .avatar {
+        outline: 2px solid var(--theme-color);
+        outline-offset: 2px;
+      }
     }
 
     .avatar {
@@ -167,6 +188,7 @@ body.literate main table {
       height: 24px;
       vertical-align: middle;
       margin-left: 4px;
+      border: 1px solid transparent;
     }
   }
 }

package/src/_mixins.scss

@@ -2,3 +2,44 @@
   -webkit-user-select: $val;
   user-select: $val;
 }
+
+@mixin link-underline {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.11rem;
+}
+
+@mixin subdued-link {
+  color: var(--fg-color);
+  text-decoration-line: none;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--fg2-color);
+      @include link-underline;
+    }
+  }
+
+  &:active {
+    color: var(--link-active-color);
+  }
+}
+
+@mixin contained-icon {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+@mixin contained-mask($url) {
+  -webkit-mask-image: $url;
+  mask-image: $url;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: currentColor;
+}

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/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 {
@@ -379,21 +360,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 +373,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>");
   }
 }

package/templates/_top.html

@@ -33,6 +33,7 @@
     <meta property="og:author" content="<%= page.author.name %>" />
     <% } %>
     <title><%= page.title %><%= site.titlePostfix %></title>
+    <% if (!isWatchMode) { %>
     <script type="speculationrules">
     {
       "prerender": [{
@@ -43,6 +44,7 @@
       }]
     }
   </script>
+    <% } %>
   <script>document.head.appendChild(document.createElement('style')).textContent='.time-zone-label[hidden],select.time-zone[hidden]{display:revert}'</script>
   <noscript><style>
     .question-a-body:not([data-revealed]) > * { color: unset; background-color: unset; }