@abreen/tada 1.18.1 → 1.18.3

package/README.md

@@ -109,7 +109,7 @@ Create a new Tada site in a new directory. Prompts for:
 - **Site title**: displayed in the header and `<title>` tag
 - **Symbol**: short text (1-5 uppercase characters) shown in the logo and favicon
 - **Theme color**: HSL color, e.g. `hsl(195 70% 40%)`
-- **Background tint hue**: hue (0-360) for background/foreground tinting (defaults to `20`)
+- **Background tint hue**: hue (0-360) for background/foreground tinting (defaults to `33`)
 - **Background tint amount**: percentage (0-100) of tint to apply (defaults to `100`)
 - **Default time zone**: for `<time>` elements (defaults to your system zone)
 - **Production base URL**: e.g. `https://example.edu`
@@ -272,7 +272,7 @@ vars:
 | `logo` | *Optional*, image path relative to `public/`, replacing the header symbol |
 | `favicon` | *Optional*, `.ico` path relative to `public/`, replacing generated favicons and the web app manifest |
 | `themeColor` | Theme color for the site (e.g., `"tomato"`, `"#c04040"`, `"hsl(195 70% 40%)"`) |
-| `tintHue` | *Optional*, hue (0-360) for background and foreground tinting (default `20`) |
+| `tintHue` | *Optional*, hue (0-360) for background and foreground tinting (default `33`) |
 | `tintAmount` | *Optional*, percentage (0-100) of tint to apply to the neutral palette (default `100`); link saturation stays fixed |
 | `defaultFont` | *Optional*, initial font pairing: `sans` or `serif` (default `sans`) |
 | `defaultContrast` | *Optional*, initial neutral-palette contrast: `standard` or `high` (default `standard`) |

package/bin/tada.ts

@@ -90,7 +90,7 @@ const INIT_QUESTIONS: Record<string, InitQuestion> = {
   },
   tintHue: {
     prompt: 'Background tint hue (0-360)',
-    defaultValue: '20',
+    defaultValue: '33',
     validate: validateHue,
   },
   tintAmount: {

package/build/bundle.ts

@@ -52,12 +52,12 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const templatePath = path.join(getPackageDir(), 'templates/_theme.scss');
   const template = fs.readFileSync(templatePath, 'utf-8');
   const theme = deriveTheme(siteVariables.themeColor);
-  const tintHue = siteVariables.tintHue ?? 20;
+  const tintHue = siteVariables.tintHue ?? 33;
   const tintAmount = siteVariables.tintAmount ?? 100;
 
   const linkHue = formatCssNumber(deriveLinkHue(tintHue));
-  const linkColor = `hsl(${linkHue}deg 44.4% 49.4%)`;
-  const linkColorHover = `hsl(${linkHue}deg 34% 60%)`;
+  const linkColor = `hsl(${linkHue}deg 66% 38%)`;
+  const linkColorHover = `hsl(${linkHue}deg 56% 49%)`;
   const linkColorDark = `hsl(${linkHue}deg 50% 72%)`;
   const linkColorHoverDark = `hsl(${linkHue}deg 40% 80%)`;
   const traceLineActiveHue = formatCssNumber(deriveTraceLineActiveHue(tintHue));

package/init/content/labs/00/VowelCounter.java.md

@@ -18,7 +18,7 @@ The <dfn>standard in</dfn> (or `stdin`) is one of three streams available to a
 running program. The other two streams are the standard out and standard error.
 
 <figure>
-<svg viewBox="0 50 410 90" xmlns="http://www.w3.org/2000/svg" font-size="14" fill="none" style="margin:1rem auto;display:block;max-width:410px">
+<svg viewBox="15 50 380 90" xmlns="http://www.w3.org/2000/svg" font-size="14" fill="none" style="margin:1rem auto;display:block;max-width:380px">
   <defs>
     <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
       <path d="M0,0 L8,4 L0,8 Z" stroke="currentColor" fill="currentColor"></path>

package/package.json

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

package/schema/site.schema.json

@@ -38,7 +38,7 @@
       "type": "integer",
       "minimum": 0,
       "maximum": 360,
-      "default": 20
+      "default": 33
     },
     "tintAmount": {
       "type": "integer",

package/src/_content.scss

@@ -387,7 +387,7 @@ dfn {
   }
 
   [aria-current='page'] {
-    font-style: italic;
+    font-weight: 700;
   }
 
   .material-symbol-icon {

package/src/_layout.scss

@@ -152,14 +152,16 @@ body.literate main table {
 .info {
   @include user-select(none);
 
-  display: grid;
-  grid-template-columns: 1fr auto;
+  // Flex instead of a `1fr auto` grid: WebKit keeps the auto column's width
+  // after the font changes, which wraps the author avatar onto its own line.
+  display: flex;
   align-items: baseline;
+  justify-content: space-between;
   font-size: var(--font-size-smaller);
   color: var(--fg2-color);
 
   @media (width < 450px) {
-    grid-template-columns: 1fr;
+    flex-direction: column;
   }
 
   aside.author {

package/src/globals.ts

@@ -11,6 +11,10 @@ export interface Globals {
   createResizeObserver: (
     callback: ResizeObserverCallback,
   ) => Pick<ResizeObserver, 'disconnect' | 'observe'>;
+  createIntersectionObserver: (
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverInit,
+  ) => Pick<IntersectionObserver, 'disconnect' | 'observe'>;
   fetch: FetchFunction;
   importModule: ImportModuleFunction;
   isDocumentHidden: (document: Document) => boolean;
@@ -26,6 +30,9 @@ export const globals: Globals = {
   createResizeObserver(callback) {
     return new ResizeObserver(callback);
   },
+  createIntersectionObserver(callback, options) {
+    return new IntersectionObserver(callback, options);
+  },
   fetch(input: RequestInfo | URL, init?: RequestInit) {
     return fetch(input, init);
   },

package/src/header/README.md

@@ -5,6 +5,12 @@ and, where supported, animates its `<details>` content. The component's
 JavaScript adds dismissal behavior for outside clicks, focus leaving the menu,
 and the Escape key.
 
-This component doesn't provide any other functionality related to the header.
+The component also rolls the header title between the site title and the page
+title as the page heading scrolls under the header (see
+[Header Title](../../spec/header-title.md)). The navigator calls
+`swapHeaderTitle()` after each content swap so the header adopts the new page
+title and shows the title for the new scroll position without rolling.
+
 If JavaScript is turned off in the web browser, the `<details>` element is still
-functional and its disclosure content opens immediately.
+functional and its disclosure content opens immediately, and the header shows
+only the site title.

package/src/header/_index.scss

@@ -5,32 +5,20 @@
   --header-menu-icon-size: 24px;
 }
 
+// The summary and the controls share one grid row, so the site title gets
+// exactly the width the currently rendered controls leave behind.
 header {
-  --header-search-reservation: 0px;
-  --header-to-top-reservation: 0px;
-
   position: fixed;
   top: 0;
   z-index: 1000;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr) max-content;
   width: 100%;
+  container-type: inline-size;
   background: var(--bg-color-translucent);
   border-bottom: 1px solid var(--bg2-color);
   backdrop-filter: var(--backdrop-filter);
   view-transition-name: site-header;
-
-  &:has(.search-controls) {
-    --header-search-reservation: 200px;
-
-    @media (width <= 400px) {
-      --header-search-reservation: 0px;
-    }
-  }
-
-  &:has(.to-top-container .is-visible) {
-    --header-to-top-reservation: 120px;
-  }
 }
 
 :root[data-contrast-preference='high'] header {
@@ -57,6 +45,7 @@ body:has(header details[open]) > .container::before {
 }
 
 header > details {
+  grid-area: 1 / 1;
   min-width: 0;
 }
 
@@ -65,9 +54,7 @@ header details summary {
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
-  padding: 0
-    calc(var(--header-search-reservation) + var(--header-to-top-reservation)) 0
-    0;
+  padding: 0;
   cursor: pointer;
   list-style-type: none;
 
@@ -78,7 +65,8 @@ header details summary {
       background: var(--bg2-color);
     }
 
-    &:hover .site-title {
+    &:hover .site-title,
+    &:hover .header-page-title {
       @include link-underline;
     }
   }
@@ -160,7 +148,9 @@ header details[open] summary .menu-icon-line-bottom {
 
     :root.js header > details::details-content {
       min-block-size: 0;
-      overflow: clip;
+
+      // Clip only the height animation; the navigation spans the full header
+      overflow: visible clip;
       opacity: 0;
       transform: translateY(-4px);
       transition:
@@ -176,8 +166,12 @@ header details[open] summary .menu-icon-line-bottom {
   }
 }
 
+// The details element sits in the first column; its navigation extends under
+// the controls column to fill the header.
 header .content {
   position: relative;
+  box-sizing: border-box;
+  width: 100cqw;
 }
 
 header summary .logo {
@@ -201,36 +195,89 @@ header summary .logo-image {
   object-fit: contain;
 }
 
-header summary .site-title {
+// The site title and page title sit on a reel, one header row each, behind a
+// window one row tall. Scrolling past the page heading rolls the reel up to the
+// page title; without JavaScript, only the site title is shown.
+header summary .header-title {
   flex: 1 1 0;
+  align-self: stretch;
   min-width: 0;
-  margin: 0 8px 0 0;
+  margin: 0 var(--gap) 0 0;
   overflow: hidden;
-  text-overflow: ellipsis;
 
   // Values above 500 resolve to the supplied bold face when a custom family
   // provides only fixed 400 and 700 weights.
   font-weight: 600;
-  white-space: nowrap;
   pointer-events: none;
 }
 
+// Feather the window's top and bottom edges so a title fades as it rolls out
+:root.js header summary .header-title {
+  -webkit-mask-image: linear-gradient(
+    transparent,
+    #000 25%,
+    #000 75%,
+    transparent
+  );
+  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
+}
+
+header summary .header-title-reel {
+  display: block;
+}
+
+header summary .header-title.is-page-title .header-title-reel {
+  transform: translateY(calc(-1 * var(--header-collapsed-height)));
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  header summary .header-title-reel {
+    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
+  }
+}
+
+header summary .site-title,
+header summary .header-page-title {
+  display: block;
+  height: var(--header-collapsed-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--header-collapsed-height);
+  white-space: nowrap;
+}
+
+// Code page titles keep their monospace font, without the inline code chip,
+// like the file title heading
+header summary .header-page-title :is(tt, code) {
+  padding: 0;
+  background: none;
+}
+
+:root:not(.js) header summary .header-page-title {
+  display: none;
+}
+
 header > .header-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
   display: flex;
+  grid-area: 1 / 2;
+  gap: var(--gap);
   align-items: center;
+  align-self: start;
   height: var(--header-collapsed-height);
   padding: 0 var(--gap) 0 0;
 }
 
+// Continue the summary's hover background behind the controls
+@media (hover: hover) {
+  header:has(> details > summary:hover) > .header-controls {
+    background: var(--bg2-color);
+  }
+}
+
 header .to-top-container {
   display: none;
   align-items: center;
   height: var(--header-collapsed-height);
-  padding: 0 var(--gap) 0 0;
   white-space: nowrap;
   pointer-events: none;
 

package/src/header/index.ts

@@ -1,10 +1,150 @@
 import { getElement } from '../util';
+import { globals } from '../globals';
+
+export type HeaderTitleState = 'site' | 'page';
+
+export interface HeadingGeometry {
+  /** Bottom edge of the page heading block (breadcrumbs, h1, and info) */
+  blockBottom: number;
+  /** Top edge of the page's h1 */
+  titleTop: number;
+  /** Bottom edge of the collapsed header */
+  headerBottom: number;
+}
+
+const HEADING_BLOCK_SELECTOR = '.title-and-info, .file-header';
+const PAGE_TITLE_CLASS = 'is-page-title';
+
+/**
+ * Show the page title once the whole heading block has scrolled under the
+ * header, and the site title once the h1 is entirely below the header again.
+ * In between, keep the current title so it does not flicker.
+ */
+export function nextHeaderTitleState(
+  current: HeaderTitleState,
+  geometry: HeadingGeometry | null,
+): HeaderTitleState {
+  if (!geometry) {
+    return 'site';
+  }
+  if (geometry.blockBottom <= geometry.headerBottom) {
+    return 'page';
+  }
+  if (geometry.titleTop >= geometry.headerBottom) {
+    return 'site';
+  }
+  return current;
+}
+
+function getHeadingElements(document: Document) {
+  const block = document.querySelector(HEADING_BLOCK_SELECTOR);
+  const title = block?.querySelector('h1');
+  return block && title ? { block, title } : null;
+}
+
+interface TitleRoll {
+  swap(newDoc: Document): void;
+  disconnect(): void;
+}
+
+let titleRoll: TitleRoll | null = null;
+
+function getTitleElements(summary: HTMLElement) {
+  const container = summary.querySelector<HTMLElement>('.header-title');
+  const reel = container?.querySelector<HTMLElement>('.header-title-reel');
+  const pageTitle = reel?.querySelector<HTMLElement>('.header-page-title');
+  return container && reel && pageTitle ? { container, reel, pageTitle } : null;
+}
+
+function mountTitleRoll(
+  window: Window,
+  summary: HTMLElement,
+): TitleRoll | null {
+  const elements = getTitleElements(summary);
+  if (!elements) {
+    return null;
+  }
+  const { container, reel, pageTitle } = elements;
+
+  let state: HeaderTitleState = 'site';
+
+  function measure(): HeadingGeometry | null {
+    const heading = getHeadingElements(window.document);
+    // A hidden heading (for example, while presenting slides) has no boxes
+    if (!heading || heading.block.getClientRects().length === 0) {
+      return null;
+    }
+    return {
+      blockBottom: heading.block.getBoundingClientRect().bottom,
+      titleTop: heading.title.getBoundingClientRect().top,
+      headerBottom: summary.getBoundingClientRect().bottom,
+    };
+  }
+
+  // Scrolling rolls the reel; other changes, like navigation, switch at once
+  function update(roll: boolean) {
+    const next = nextHeaderTitleState(state, measure());
+    if (next !== state) {
+      state = next;
+      container.classList.toggle(PAGE_TITLE_CLASS, state === 'page');
+    }
+    if (!roll && typeof reel.getAnimations === 'function') {
+      for (const animation of reel.getAnimations()) {
+        animation.finish();
+      }
+    }
+  }
+
+  const observer = globals.createIntersectionObserver(() => update(true), {
+    rootMargin: `${-summary.getBoundingClientRect().bottom}px 0px 0px 0px`,
+    threshold: [0, 1],
+  });
+
+  function observeHeading() {
+    observer.disconnect();
+    const heading = getHeadingElements(window.document);
+    if (heading) {
+      observer.observe(heading.block);
+      observer.observe(heading.title);
+    }
+  }
+
+  update(false);
+  observeHeading();
+
+  return {
+    swap(newDoc) {
+      const newPageTitle = newDoc.querySelector('header .header-page-title');
+      if (newPageTitle) {
+        pageTitle.replaceChildren(
+          ...window.document.importNode(newPageTitle, true).childNodes,
+        );
+      }
+      observeHeading();
+      update(false);
+    },
+    disconnect() {
+      observer.disconnect();
+    },
+  };
+}
+
+/**
+ * Called by the navigator once a new page's content and scroll position are in
+ * place: adopt the new page title and show the title for the new position
+ * without rolling, so the page transition crossfades it.
+ */
+export function swapHeaderTitle(newDoc: Document): void {
+  titleRoll?.swap(newDoc);
+}
 
 export default (window: Window) => {
   const header: HTMLElement = getElement(window.document, 'header');
   const details = getElement(header, 'details') as HTMLDetailsElement;
   const summary = getElement(details, 'summary') as HTMLElement;
 
+  titleRoll = mountTitleRoll(window, summary);
+
   function close() {
     details.open = false;
   }
@@ -47,6 +187,8 @@ export default (window: Window) => {
   details.addEventListener('focusout', handleDetailsFocusOut);
 
   return () => {
+    titleRoll?.disconnect();
+    titleRoll = null;
     window.removeEventListener('keydown', handleWindowKeyDown);
     window.removeEventListener('click', handleWindowClick);
     details.removeEventListener('click', handleDetailsClick);

package/src/navigate/_index.scss

@@ -43,19 +43,45 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   }
 }
 
-// Page heading and info: crossfade in place instead of sliding with the page
+// Page heading parts: crossfade in place instead of sliding with the page
 // view-transition-name is set via inline style by the navigator
-// only when .title-and-info is visible in the viewport
-
+// only when .title-and-info is visible in the viewport. All parts share one
+// duration and easing so they move in step when the layout changes; the
+// crossfades inherit the group timing.
+::view-transition-group(page-breadcrumbs),
+::view-transition-old(page-breadcrumbs),
+::view-transition-new(page-breadcrumbs),
+::view-transition-group(page-title),
 ::view-transition-old(page-title),
 ::view-transition-new(page-title),
+::view-transition-group(page-info),
 ::view-transition-old(page-info),
 ::view-transition-new(page-info) {
   animation-duration: $duration;
 }
 
-// Breadcrumbs use per-item named rules installed by the navigator. Shared
-// items stay opaque and preserve their position; removed/added suffixes fade.
+::view-transition-group(page-breadcrumbs),
+::view-transition-group(page-title),
+::view-transition-group(page-info) {
+  animation-timing-function: $movement-easing;
+}
+
+// Breadcrumbs: the whole trail is one group, so every item moves together when
+// the layout changes. The default plus-lighter crossfade keeps unchanged items
+// opaque while added or removed items fade. Snapshots keep their natural size
+// so a change in trail width does not stretch the text.
+::view-transition-old(page-breadcrumbs),
+::view-transition-new(page-breadcrumbs) {
+  inline-size: auto;
+}
+
+// The header stays in place. Parts that change between pages, such as the
+// title shown in it, crossfade in step with the page heading.
+::view-transition-group(site-header),
+::view-transition-old(site-header),
+::view-transition-new(site-header) {
+  animation-duration: $duration;
+}
 
 // The site-wide banner does not change between pages. Keep it out of the root
 // slide and pin its named transition layer in place without a crossfade.

package/src/navigate/runtime.ts

@@ -5,22 +5,13 @@ import {
   teardownPerPageComponents,
 } from './lifecycle';
 import { globals } from '../globals';
-import {
-  cleanupBreadcrumbTransitionNames,
-  getBreadcrumbItems,
-  prepareBreadcrumbTransitionStyles,
-  setBreadcrumbTransitionNames,
-  sharedBreadcrumbCount,
-} from './breadcrumbs';
+import { swapHeaderTitle } from '../header';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
 let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
 let currentPath = '';
-// Unlike the browser URL (which already changes on popstate), this tracks the
-// page whose content is currently displayed, for relative breadcrumb identity.
-let renderedPageUrl = '';
 
 const scrollByIndex = new Map<number, number>();
 const scrollByLocation = new Map<string, number>();
@@ -127,21 +118,29 @@ function dispatchNavigationEvent(
   );
 }
 
-function cleanupViewTransitionNames(document: Document): void {
-  const newH1 = document.querySelector(
-    '.title-and-info h1',
-  ) as HTMLElement | null;
-  const newInfo = document.querySelector(
-    '.title-and-info .info',
-  ) as HTMLElement | null;
-
-  if (newH1) {
-    newH1.style.viewTransitionName = '';
+// Heading parts that get their own layer instead of sliding with the page. The
+// breadcrumb trail is one group so every item, including the current one,
+// moves together when the page layout changes.
+const TITLE_TRANSITION_NAMES = [
+  ['nav.breadcrumbs', 'page-breadcrumbs'],
+  ['h1', 'page-title'],
+  ['.info', 'page-info'],
+] as const;
+
+function setTitleTransitionNames(titleEl: Element, enabled: boolean): void {
+  for (const [selector, name] of TITLE_TRANSITION_NAMES) {
+    const element = titleEl.querySelector<HTMLElement>(selector);
+    if (element) {
+      element.style.viewTransitionName = enabled ? name : '';
+    }
   }
-  if (newInfo) {
-    newInfo.style.viewTransitionName = '';
+}
+
+function cleanupViewTransitionNames(document: Document): void {
+  const titleEl = document.querySelector('.title-and-info');
+  if (titleEl) {
+    setTitleTransitionNames(titleEl, false);
   }
-  cleanupBreadcrumbTransitionNames(document);
 }
 
 function getLocationKey(window: Window): string {
@@ -177,7 +176,6 @@ export function initNavigation(window: Window): void {
   scrollByLocation.clear();
   window.history.scrollRestoration = 'manual';
   currentPath = window.location.pathname + window.location.search;
-  renderedPageUrl = window.location.href;
   scrollByIndex.set(historyIndex, window.scrollY);
   scrollByLocation.set(getLocationKey(window), window.scrollY);
 }
@@ -311,7 +309,6 @@ export async function navigateToUrl(
     updateHead(document, newDoc);
     mountAppearancePickerForPage(window);
     currentPath = parsed.pathname + parsed.search;
-    renderedPageUrl = parsed.href;
 
     if (pushHistory) {
       historyIndex++;
@@ -331,6 +328,9 @@ export async function navigateToUrl(
 
     scrollByIndex.set(historyIndex, window.scrollY);
     scrollByLocation.set(getLocationKey(window), window.scrollY);
+
+    // Measured at the destination scroll position; the transition crossfades it
+    swapHeaderTitle(newDoc);
     return true;
   };
 
@@ -343,18 +343,6 @@ export async function navigateToUrl(
     !prefersReducedMotion(window) &&
     typeof transitionDoc.startViewTransition === 'function'
   ) {
-    const oldBreadcrumbItems = getBreadcrumbItems(document, renderedPageUrl);
-    const newBreadcrumbItems = getBreadcrumbItems(newDoc, parsed.href);
-    const sharedCount = sharedBreadcrumbCount(
-      oldBreadcrumbItems,
-      newBreadcrumbItems,
-    );
-    prepareBreadcrumbTransitionStyles(
-      document,
-      oldBreadcrumbItems.length,
-      newBreadcrumbItems.length,
-      sharedCount,
-    );
     const titleEl = document.querySelector('.title-and-info');
     const headerHeight =
       document.querySelector('header')?.getBoundingClientRect().height ?? 0;
@@ -362,20 +350,7 @@ export async function navigateToUrl(
       titleEl != null && titleEl.getBoundingClientRect().top >= headerHeight;
 
     if (titleVisible) {
-      const h1 = titleEl.querySelector('h1') as HTMLElement | null;
-      const info = titleEl.querySelector('.info') as HTMLElement | null;
-      if (h1) {
-        h1.style.viewTransitionName = 'page-title';
-      }
-      if (info) {
-        info.style.viewTransitionName = 'page-info';
-      }
-      setBreadcrumbTransitionNames(
-        document,
-        renderedPageUrl,
-        sharedCount,
-        'leave',
-      );
+      setTitleTransitionNames(titleEl, true);
     }
 
     document.documentElement.classList.add(
@@ -395,20 +370,7 @@ export async function navigateToUrl(
         newTitleEl.getBoundingClientRect().top >= newHeaderHeight;
 
       if (newTitleVisible && newTitleEl) {
-        const h1 = newTitleEl.querySelector('h1') as HTMLElement | null;
-        const info = newTitleEl.querySelector('.info') as HTMLElement | null;
-        if (h1) {
-          h1.style.viewTransitionName = 'page-title';
-        }
-        if (info) {
-          info.style.viewTransitionName = 'page-info';
-        }
-        setBreadcrumbTransitionNames(
-          document,
-          renderedPageUrl,
-          sharedCount,
-          'enter',
-        );
+        setTitleTransitionNames(newTitleEl, true);
       }
     });
 

package/templates/_theme.scss

@@ -21,26 +21,28 @@
   --note-bg-color: hsl(209deg 95% 75%);
 
   // Main foreground color (the color of most text)
-  --fg-color: hsl(var(--tint-hue) calc(8% * var(--tint-amount)) 8%);
+  --fg-color: hsl(var(--tint-hue) calc(30% * var(--tint-amount)) 8%);
   --fg-color-translucent: hsl(
     var(--tint-hue) calc(70% * var(--tint-amount)) 8% / 33%
   );
 
   // Secondary foreground color (lighter)
-  --fg2-color: hsl(var(--tint-hue) calc(6% * var(--tint-amount)) 45%);
+  --fg2-color: hsl(var(--tint-hue) calc(8% * 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: hsl(var(--tint-hue) calc(65% * var(--tint-amount)) 97%);
+
+  // Same saturation as --bg-color, so frosting doesn't add color to the page
   --bg-color-translucent: hsl(
-    var(--tint-hue) calc(30% * var(--tint-amount)) 95% / 66%
+    var(--tint-hue) calc(65% * var(--tint-amount)) 95% / 66%
   );
 
   // Secondary background color (lighter)
-  --bg2-color: hsl(var(--tint-hue) calc(12% * var(--tint-amount)) 92%);
+  --bg2-color: hsl(var(--tint-hue) calc(55% * var(--tint-amount)) 92%);
   --bg2-color-translucent: hsl(
-    var(--tint-hue) calc(12% * var(--tint-amount)) 92% / 66%
+    var(--tint-hue) calc(55% * var(--tint-amount)) 92% / 66%
   );
   --bg-trace-line-active: <%= bgTraceLineActive %>;
   --box-shadow: 0 2px 9px
@@ -108,20 +110,20 @@
     --theme-color: <%= themeColorDark %>;
     --theme-color-text: <%= themeColorTextDark %>;
     --text-on-theme: <%= textOnThemeDark %>;
-    --fg-color: hsl(var(--tint-hue) calc(10% * var(--tint-amount)) 92%);
+    --fg-color: hsl(var(--tint-hue) calc(40% * var(--tint-amount)) 92%);
     --fg-color-translucent: hsl(
       var(--tint-hue) calc(85% * var(--tint-amount)) 90% / 33%
     );
-    --fg2-color: hsl(var(--tint-hue) calc(6% * var(--tint-amount)) 60%);
+    --fg2-color: hsl(var(--tint-hue) calc(10% * 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: hsl(var(--tint-hue) calc(35% * var(--tint-amount)) 5%);
     --bg-color-translucent: hsl(
-      var(--tint-hue) calc(15% * var(--tint-amount)) 10% / 66%
+      var(--tint-hue) calc(35% * var(--tint-amount)) 10% / 66%
     );
-    --bg2-color: hsl(var(--tint-hue) calc(12% * var(--tint-amount)) 12%);
+    --bg2-color: hsl(var(--tint-hue) calc(40% * var(--tint-amount)) 12%);
     --bg2-color-translucent: hsl(
-      var(--tint-hue) calc(12% * var(--tint-amount)) 12% / 66%
+      var(--tint-hue) calc(40% * var(--tint-amount)) 12% / 66%
     );
     --bg-trace-line-active: <%= bgTraceLineActiveDark %>;
     --box-shadow: 0 3px 8px

package/templates/_top.html

@@ -220,7 +220,12 @@
             <path class="menu-icon-line menu-icon-line-bottom" d="M3 18h18" />
           </svg>
           <% if (site.logo) { %><img class="logo-image" src="/<%- encodePublicAssetPath(site.logo) %>" alt="" aria-hidden="true" /><% } else if (site.symbol) { %><span class="logo" aria-hidden="true"><%- site.symbol %></span><% } %>
-          <span class="site-title" aria-hidden="true"><%- site.title %></span>
+          <span class="header-title" aria-hidden="true">
+            <span class="header-title-reel">
+              <span class="site-title"><%- site.title %></span>
+              <span class="header-page-title"><%= page.titleHtml %></span>
+            </span>
+          </span>
         </summary>
         <div class="content">
           <%= render('_nav.html') %>

package/src/navigate/breadcrumbs.ts

@@ -1,129 +0,0 @@
-interface BreadcrumbIdentity {
-  label: string;
-  url: string;
-}
-
-interface BreadcrumbItem extends BreadcrumbIdentity {
-  element: HTMLElement;
-}
-
-export function breadcrumbPageKey(href: string, pageUrl: string): string {
-  const url = new URL(href, pageUrl);
-  // Fragments identify positions on the same page; query strings can identify
-  // different content. URL serialization also resolves relative paths/spaces.
-  return url.origin + url.pathname + url.search;
-}
-
-export function sharedBreadcrumbCount(
-  oldItems: readonly BreadcrumbIdentity[],
-  newItems: readonly BreadcrumbIdentity[],
-): number {
-  let count = 0;
-  while (
-    count < Math.min(oldItems.length, newItems.length) &&
-    oldItems[count].url === newItems[count].url &&
-    oldItems[count].label === newItems[count].label
-  ) {
-    count++;
-  }
-  return count;
-}
-
-export function getBreadcrumbItems(
-  document: Document,
-  pageUrl: string,
-): BreadcrumbItem[] {
-  return Array.from(
-    document.querySelectorAll<HTMLElement>('nav.breadcrumbs ol > li'),
-  ).flatMap(element => {
-    const text = element.querySelector('a, [aria-current="page"]');
-    if (!text) {
-      return [];
-    }
-    const href = text.getAttribute('href') ?? pageUrl;
-    return [
-      {
-        element,
-        label: (text.textContent ?? '').trim().replace(/\s+/g, ' '),
-        url: breadcrumbPageKey(href, pageUrl),
-      },
-    ];
-  });
-}
-
-export function setBreadcrumbTransitionNames(
-  document: Document,
-  pageUrl: string,
-  sharedCount: number,
-  side: 'enter' | 'leave',
-): void {
-  const breadcrumb = document.querySelector<HTMLElement>('nav.breadcrumbs');
-  if (!breadcrumb) {
-    return;
-  }
-  getBreadcrumbItems(document, pageUrl).forEach((item, index) => {
-    const kind = index < sharedCount ? 'shared' : side;
-    item.element.style.viewTransitionName = `page-breadcrumb-${kind}-${index}`;
-  });
-}
-
-export function prepareBreadcrumbTransitionStyles(
-  document: Document,
-  oldCount: number,
-  newCount: number,
-  sharedCount: number,
-): void {
-  if (!oldCount && !newCount) {
-    return;
-  }
-  const style = document.createElement('style');
-  style.setAttribute('data-breadcrumb-transition-styles', '');
-  const rules: string[] = [];
-  const duration = 'var(--page-transition-duration)';
-  for (let index = 0; index < sharedCount; index++) {
-    const name = `page-breadcrumb-shared-${index}`;
-    rules.push(`
-      ::view-transition-group(${name}) {
-        animation-duration: ${duration};
-        animation-timing-function: var(--page-transition-movement-easing);
-      }
-      ::view-transition-old(${name}), ::view-transition-new(${name}) {
-        mix-blend-mode: normal;
-        animation: none;
-      }
-      ::view-transition-old(${name}) { display: none; }
-      ::view-transition-old(${name}):only-child {
-        display: block;
-        animation: page-fade-out ${duration} ease-in both;
-      }
-      ::view-transition-new(${name}):only-child {
-        animation: page-fade-in ${duration} ease-out both;
-      }
-    `);
-  }
-  for (let index = sharedCount; index < oldCount; index++) {
-    rules.push(`::view-transition-old(page-breadcrumb-leave-${index}) {
-      mix-blend-mode: normal;
-      animation: page-fade-out ${duration} ease-in both;
-    }`);
-  }
-  for (let index = sharedCount; index < newCount; index++) {
-    rules.push(`::view-transition-new(page-breadcrumb-enter-${index}) {
-      mix-blend-mode: normal;
-      animation: page-fade-in ${duration} ease-out both;
-    }`);
-  }
-  // Exact names keep these rules compatible with the bundled CSS parser, which
-  // does not yet accept view-transition-class selectors. Names use indices only.
-  style.textContent = rules.join('\n');
-  document.head.appendChild(style);
-}
-
-export function cleanupBreadcrumbTransitionNames(document: Document): void {
-  for (const element of document.querySelectorAll<HTMLElement>(
-    'nav.breadcrumbs, nav.breadcrumbs li',
-  )) {
-    element.style.removeProperty('view-transition-name');
-  }
-  document.querySelector('[data-breadcrumb-transition-styles]')?.remove();
-}