@abreen/tada 1.18.2 → 1.18.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.18.2",
+  "version": "1.18.4",
   "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

@@ -56,14 +56,16 @@ a.external:not(:has(.external-link-tail))::after {
   padding-top: 32px;
   margin-top: calc(var(--thematic-break-margin) / 2);
   font-size: 0.9em;
-  border-top: 3px solid var(--bg2-color);
 }
 
 .footnotes .title {
   @include user-select(none);
 
-  font-size: larger;
-  font-weight: 700;
+  padding: var(--gap) 0;
+  font-style: italic;
+  color: var(--fg2-color);
+  text-align: center;
+  border-bottom: 1px solid var(--fg2-color);
 }
 
 .footnotes p {
@@ -387,7 +389,7 @@ dfn {
   }
 
   [aria-current='page'] {
-    font-style: italic;
+    font-weight: 700;
   }
 
   .material-symbol-icon {

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,19 @@
   --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 +44,7 @@ body:has(header details[open]) > .container::before {
 }
 
 header > details {
+  grid-area: 1 / 1;
   min-width: 0;
 }
 
@@ -65,9 +53,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 +64,8 @@ header details summary {
       background: var(--bg2-color);
     }
 
-    &:hover .site-title {
+    &:hover .site-title,
+    &:hover .header-page-title {
       @include link-underline;
     }
   }
@@ -160,7 +147,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 +165,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 +194,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

@@ -75,6 +75,14 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   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.
 .site-banner {

package/src/navigate/runtime.ts

@@ -5,6 +5,7 @@ import {
   teardownPerPageComponents,
 } from './lifecycle';
 import { globals } from '../globals';
+import { swapHeaderTitle } from '../header';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
@@ -327,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;
   };
 

package/templates/_theme.scss

@@ -21,28 +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(5% * 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
@@ -110,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(3% * 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') %>