@nu-appdev/northwestern-starlight-theme 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -7,18 +7,55 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.0] - 2026-03-25
+
+### Added
+
+- Fullscreen Mermaid viewer: wheel zoom and double-click zoom anchor to the pointer position.
+- Zoom level badge (e.g. `84%`) in the fullscreen viewer.
+- GFM footnote styles: superscript `[n]` reference markers, footnotes section with separator, styled `↩︎` back-references.
+
+### Fixed
+
+- Mermaid diagrams sometimes breaking on Firefox and Safari. The toolbar script read `textContent` after `astro-mermaid` had already rendered SVG into the element. Reads `data-diagram` first now.
+- Horizontal rules in dark mode used `--nu-purple-140`, which was invisible against the background. Switched to `--nu-border-color`.
+
+### Accessibility
+
+- Fullscreen Mermaid overlay: `role="dialog"`, `aria-modal`, focus trap, focus restore on close.
+- White focus rings on overlay controls, theme toggle, and menu button (all sit on dark backgrounds where the purple ring was invisible).
+- Inline Mermaid toolbar buttons use a solid accent outline on focus instead of the near-invisible shadow ring.
+
+## [1.1.1] - 2026-03-25
+
+### Fixed
+
+- Scrollbar gutter reserved space on splash pages, leaving a gap next to the topbar. Now only applied on pages with a scrollbar.
+- Mermaid toolbar buttons use Northwestern purple focus rings instead of the browser default.
+- Mermaid fullscreen close button dropped the red danger style and matches the other overlay buttons.
+
+### Changed
+
+- Mermaid overlay buttons sized and styled to match the header theme toggle.
+
+### Added
+
+- Fullscreen mermaid viewer supports touch: one-finger pan, pinch-to-zoom, two-finger pan.
+- Mermaid toolbar stays visible on touch devices (`hover: none`) since hover is unavailable.
+- SVG downloads use descriptive filenames derived from the site title, page slug, and diagram type (e.g., `northwestern-starlight-theme_examples-mermaid-flowchart.svg`).
+
 ## [1.1.0] - 2026-03-25
 
 ### Added
 
-- Automatic favicon — the theme ships Northwestern's official favicon and applies it without touching `public/`. Consumers can still override it with their own `favicon` in Starlight config.
-- `homepage.imageWidth` option to control hero image size. Defaults to `500px`, useful for wide lockup images that need more space.
+- Automatic favicon shipped with the theme, applied without touching `public/`. Override with `favicon` in Starlight config.
+- `homepage.imageWidth` option for hero image size. Defaults to `500px`; set higher for wide lockup images.
 
 ### Fixed
 
 - `showTitle: false` now works in the centered hero layout (previously only worked in split layout).
 - Search result titles and headings no longer appear white-on-white in light mode. The `.header a` selector was too broad and bled into Pagefind's search modal.
-- Search input focus ring now uses the Northwestern purple treatment instead of the browser's default blue outline.
+- Search input focus ring uses Northwestern purple instead of the browser default.
 
 ### Changed
 
@@ -34,6 +71,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - OpenAPI plugin compatibility with method badge preservation
 - Reduced motion support for transitions
 
-[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.1...v1.2.0
+[1.1.1]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/releases/tag/v1.0.0

package/README.md

@@ -5,7 +5,7 @@
 
 <p align="center">
     <a href="https://nodejs.org"><img src="https://img.shields.io/badge/Node-22+-339933?style=flat&logo=node.js&logoColor=white" alt="Node Version"></a>
-    <a href="https://astro.build"><img src="https://img.shields.io/badge/Astro-5.x+-BC52EE?style=flat&logo=astro&logoColor=white" alt="Astro Version"></a>
+    <a href="https://astro.build"><img src="https://img.shields.io/badge/Astro-5.x%20%7C%206.x-BC52EE?style=flat&logo=astro&logoColor=white" alt="Astro Version"></a>
     <a href="https://starlight.astro.build"><img src="https://img.shields.io/badge/Starlight-0.32+-FF5D01?style=flat&logo=astro&logoColor=white" alt="Starlight Version"></a>
 </p>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-appdev/northwestern-starlight-theme",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A Northwestern-branded theme for Astro Starlight",
   "license": "MIT",
   "author": "Danny Foster <danny@northwestern.edu>",

package/src/scripts/mermaid-toolbar.ts

@@ -3,7 +3,7 @@
  *
  * Features:
  *   - Hover toolbar: fullscreen, download SVG, copy mermaid source
- *   - Fullscreen overlay: pan/zoom, download, copy, zoom indicator, diagram title
+ *   - Fullscreen overlay: pan/zoom, download, copy
  *   - Keyboard: +/- zoom, 0 reset, arrows pan, Escape close
  *   - Double-click to zoom in
  *   - Smooth open/close animation
@@ -22,7 +22,6 @@ declare global {
     }
 }
 
-// ---- Icon paths ----
 const ICONS = {
     fullscreen: ["M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"],
     download: ["M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4", "M7 10l5 5 5-5", "M12 15V3"],
@@ -35,8 +34,6 @@ const ICONS = {
         "M16 4h2a2 2 0 012 2v6a2 2 0 01-2 2h-8a2 2 0 01-2-2V6a2 2 0 012-2",
     ],
     code: ["M16 18l6-6-6-6", "M8 6l-6 6 6 6"],
-    fitWidth: ["M21 3H3v18h18V3z", "M9 3v18", "M15 3v18"],
-    fitHeight: ["M21 3H3v18h18V3z", "M3 9h18", "M3 15h18"],
 };
 
 function createSvgIcon(paths: string[], size = 14): SVGElement {
@@ -97,7 +94,6 @@ function createZoomButton(
 
 type MermaidThemeMode = "light" | "dark";
 
-// ---- Store original mermaid source before rendering ----
 const mermaidSources = new Map<Element, string>();
 const renderedThemes = new WeakMap<HTMLElement, MermaidThemeMode>();
 let mermaidRuntimePromise: Promise<typeof import("mermaid")["default"]> | undefined;
@@ -118,13 +114,24 @@ async function getMermaidRuntime() {
 function captureSource() {
     document.querySelectorAll<HTMLElement>("pre.mermaid").forEach((pre) => {
         if (mermaidSources.has(pre)) return;
-        const source = pre.textContent?.trim() || "";
-        if (source) mermaidSources.set(pre, source);
+        // Prefer data-diagram attribute (set by astro-mermaid before it renders SVG)
+        // over textContent, which may contain rendered SVG text nodes instead of source
+        const source = pre.getAttribute("data-diagram")?.trim() || pre.textContent?.trim() || "";
+        if (source) {
+            mermaidSources.set(pre, source);
+            // Persist source to data attribute so it survives across render cycles
+            if (!pre.hasAttribute("data-diagram")) {
+                pre.setAttribute("data-diagram", source);
+            }
+        }
     });
 }
 
 async function renderDiagram(container: HTMLElement, mode: MermaidThemeMode, index: number) {
-    const source = mermaidSources.get(container) ?? container.textContent?.trim();
+    const source =
+        mermaidSources.get(container) ??
+        container.getAttribute("data-diagram")?.trim() ??
+        container.textContent?.trim();
     if (!source) return;
     const mermaid = await getMermaidRuntime();
 
@@ -176,7 +183,6 @@ async function renderMermaidDiagrams(force = false) {
     }
 }
 
-// ---- Success feedback (green check) ----
 function showSuccess(btn: HTMLButtonElement, label = "Copied!") {
     const originalTitle = btn.title;
     const originalIcon = btn.querySelector("svg");
@@ -197,7 +203,6 @@ function showSuccess(btn: HTMLButtonElement, label = "Copied!") {
     }, 1500);
 }
 
-// ---- Clipboard helper ----
 async function copyToClipboard(text: string, btn: HTMLButtonElement) {
     try {
         await navigator.clipboard.writeText(text);
@@ -207,7 +212,6 @@ async function copyToClipboard(text: string, btn: HTMLButtonElement) {
     }
 }
 
-// ---- Inline toolbar injection ----
 function initMermaidToolbar(): number {
     const diagrams = document.querySelectorAll<HTMLElement>(".mermaid");
     if (!diagrams.length) return 0;
@@ -242,9 +246,9 @@ function initMermaidToolbar(): number {
             if (!svg) return;
 
             const action = btn.dataset.action;
-            if (action === "fullscreen") openFullscreen(svg, container, index);
+            if (action === "fullscreen") openFullscreen(svg, container, index, btn, e.detail === 0);
             else if (action === "download-svg") {
-                downloadSvg(svg, index);
+                downloadSvg(svg, container, index);
                 showSuccess(btn, "Downloaded!");
             } else if (action === "copy-source" && source) copyToClipboard(source, btn);
         });
@@ -252,10 +256,18 @@ function initMermaidToolbar(): number {
     return injected;
 }
 
-// ---- Fullscreen overlay ----
-function openFullscreen(svg: SVGElement, container: HTMLElement, index: number) {
+function openFullscreen(
+    svg: SVGElement,
+    container: HTMLElement,
+    index: number,
+    triggerBtn?: HTMLElement,
+    keyboardOpen = false,
+) {
     const overlay = document.createElement("div");
     overlay.className = "nu-mermaid-overlay";
+    overlay.setAttribute("role", "dialog");
+    overlay.setAttribute("aria-modal", "true");
+    overlay.setAttribute("aria-label", "Mermaid diagram fullscreen viewer");
 
     // Controls
     const controls = document.createElement("div");
@@ -287,7 +299,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
 
     overlay.appendChild(controls);
 
-    // Viewport
     const viewport = document.createElement("div");
     viewport.className = "nu-mermaid-viewport";
 
@@ -297,7 +308,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     const cloned = svg.cloneNode(true) as SVGElement;
     cloned.removeAttribute("style");
 
-    // Calculate initial fit
     const viewBox = svg.getAttribute("viewBox");
     let vbWidth = 800;
     let vbHeight = 600;
@@ -307,11 +317,9 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         vbHeight = parts[3] || 600;
     }
 
-    function calcFitScale(mode: "both" | "width" | "height" = "both"): number {
+    function calcFitScale(): number {
         const maxW = window.innerWidth * 0.92;
-        const maxH = (window.innerHeight - 120) * 0.92; // account for title + controls
-        if (mode === "width") return maxW / vbWidth;
-        if (mode === "height") return maxH / vbHeight;
+        const maxH = (window.innerHeight - 120) * 0.92; // account for controls bar
         return Math.min(maxW / vbWidth, maxH / vbHeight);
     }
 
@@ -319,11 +327,15 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     cloned.setAttribute("width", String(Math.round(vbWidth * initialScale)));
     cloned.setAttribute("height", String(Math.round(vbHeight * initialScale)));
 
+    const zoomBadge = document.createElement("span");
+    zoomBadge.className = "nu-mermaid-zoom-badge";
+    zoomBadge.textContent = "100%";
+
     wrapper.appendChild(cloned);
     viewport.appendChild(wrapper);
+    viewport.appendChild(zoomBadge);
     overlay.appendChild(viewport);
 
-    // Add to DOM with animation
     overlay.style.opacity = "0";
     document.body.appendChild(overlay);
     document.body.style.overflow = "hidden";
@@ -342,6 +354,7 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     function updateTransform() {
         wrapper.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
         wrapper.style.transformOrigin = "center center";
+        zoomBadge.textContent = `${Math.round(scale * 100)}%`;
     }
 
     function zoomTo(newScale: number) {
@@ -356,18 +369,25 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         updateTransform();
     }
 
-    // Mouse wheel zoom
     viewport.addEventListener(
         "wheel",
         (e) => {
             e.preventDefault();
-            const delta = e.deltaY > 0 ? 0.9 : 1.1;
-            zoomTo(scale * delta);
+            const factor = e.deltaY > 0 ? 0.9 : 1.1;
+            const newScale = Math.min(Math.max(0.1, scale * factor), 20);
+            // Anchor zoom to cursor: keep the point under the cursor fixed
+            const rect = viewport.getBoundingClientRect();
+            const cx = e.clientX - rect.left - rect.width / 2;
+            const cy = e.clientY - rect.top - rect.height / 2;
+            const ratio = 1 - newScale / scale;
+            panX += (cx - panX) * ratio;
+            panY += (cy - panY) * ratio;
+            scale = newScale;
+            updateTransform();
         },
         { passive: false },
     );
 
-    // Pan with mouse drag
     viewport.addEventListener("mousedown", (e) => {
         isPanning = true;
         startX = e.clientX - panX;
@@ -391,13 +411,83 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
 
-    // Double-click to zoom in
+    let lastTouchDist = 0;
+    let lastTouchX = 0;
+    let lastTouchY = 0;
+    let isTouchPanning = false;
+
+    viewport.addEventListener(
+        "touchstart",
+        (e) => {
+            if (e.touches.length === 1) {
+                isTouchPanning = true;
+                lastTouchX = e.touches[0].clientX;
+                lastTouchY = e.touches[0].clientY;
+            } else if (e.touches.length === 2) {
+                isTouchPanning = false;
+                lastTouchDist = Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY,
+                );
+                lastTouchX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                lastTouchY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+            }
+            e.preventDefault();
+        },
+        { passive: false },
+    );
+
+    viewport.addEventListener(
+        "touchmove",
+        (e) => {
+            if (e.touches.length === 1 && isTouchPanning) {
+                panX += e.touches[0].clientX - lastTouchX;
+                panY += e.touches[0].clientY - lastTouchY;
+                lastTouchX = e.touches[0].clientX;
+                lastTouchY = e.touches[0].clientY;
+                updateTransform();
+            } else if (e.touches.length === 2) {
+                const dist = Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY,
+                );
+                const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+
+                if (lastTouchDist > 0) {
+                    zoomTo(scale * (dist / lastTouchDist));
+                    panX += midX - lastTouchX;
+                    panY += midY - lastTouchY;
+                    updateTransform();
+                }
+
+                lastTouchDist = dist;
+                lastTouchX = midX;
+                lastTouchY = midY;
+            }
+            e.preventDefault();
+        },
+        { passive: false },
+    );
+
+    viewport.addEventListener("touchend", () => {
+        isTouchPanning = false;
+        lastTouchDist = 0;
+    });
+
     viewport.addEventListener("dblclick", (e) => {
         e.preventDefault();
-        zoomTo(scale * 1.5);
+        const newScale = Math.min(Math.max(0.1, scale * 1.5), 20);
+        const rect = viewport.getBoundingClientRect();
+        const cx = e.clientX - rect.left - rect.width / 2;
+        const cy = e.clientY - rect.top - rect.height / 2;
+        const ratio = 1 - newScale / scale;
+        panX += (cx - panX) * ratio;
+        panY += (cy - panY) * ratio;
+        scale = newScale;
+        updateTransform();
     });
 
-    // Control buttons
     controls.addEventListener("click", (e) => {
         const btn = (e.target as HTMLElement).closest<HTMLButtonElement>(".nu-mermaid-overlay-btn");
         if (!btn) return;
@@ -408,14 +498,34 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         else if (action === "zoom-out") zoomTo(scale * 0.7);
         else if (action === "zoom-reset") resetView();
         else if (action === "download-svg") {
-            downloadSvg(svg, index);
+            downloadSvg(svg, container, index);
             showSuccess(btn, "Downloaded!");
         } else if (action === "copy-svg") copyToClipboard(svg.outerHTML, btn);
         else if (action === "copy-source" && source) copyToClipboard(source, btn);
     });
 
-    // Keyboard shortcuts
     const onKeydown = (e: KeyboardEvent) => {
+        if (e.key === "Tab") {
+            // Focus trap: cycle focus within the overlay
+            const focusable = overlay.querySelectorAll<HTMLElement>(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+            );
+            if (!focusable.length) return;
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            } else {
+                if (document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+            return;
+        }
         if (e.key === "Escape") close();
         else if (e.key === "+" || e.key === "=") zoomTo(scale * 1.2);
         else if (e.key === "-" || e.key === "_") zoomTo(scale * 0.8);
@@ -442,6 +552,15 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         if (e.target === overlay) close();
     });
 
+    // Keyboard: focus first button (shows focus ring). Mouse: focus overlay container (no ring, but Tab works).
+    if (keyboardOpen) {
+        const firstBtn = controls.querySelector<HTMLElement>(".nu-mermaid-btn");
+        firstBtn?.focus();
+    } else {
+        overlay.setAttribute("tabindex", "-1");
+        overlay.focus();
+    }
+
     function close() {
         overlay.style.opacity = "0";
         setTimeout(() => {
@@ -450,24 +569,61 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
             window.removeEventListener("mouseup", onMouseUp);
             document.body.style.overflow = "";
             overlay.remove();
-        }, 150);
+            triggerBtn?.focus();
+        }, 200);
     }
 }
 
-// ---- Download SVG ----
-function downloadSvg(svg: SVGElement, index: number) {
+function slugify(text: string): string {
+    return text
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+
+function getSiteSlug(): string {
+    const parts = document.title.split("|");
+    const site = (parts.length > 1 ? parts[parts.length - 1] : parts[0]).trim();
+    return slugify(site);
+}
+
+function getPageSlug(): string {
+    const path = window.location.pathname.replace(/^\/|\/$/g, "");
+    return slugify(path) || "index";
+}
+
+function getDiagramType(container: Element): string {
+    const source = mermaidSources.get(container) ?? "";
+    const raw = source.trim().split(/[\s\n]/)[0];
+    // Strip version suffixes (-v2, -beta), then common trailing words (Diagram, Chart)
+    return slugify(raw.replace(/[-_](v\d+|beta)$/i, "").replace(/(diagram|chart)$/i, "")) || "diagram";
+}
+
+function buildFilename(container: Element): string {
+    const site = getSiteSlug();
+    const page = getPageSlug();
+    const type = getDiagramType(container);
+
+    // Count diagrams of same type on page to add suffix if needed
+    const allDiagrams = [...document.querySelectorAll<HTMLElement>(".mermaid:not(.nu-mermaid-fullscreen)")];
+    const sameType = allDiagrams.filter((d) => getDiagramType(d) === type);
+    const suffix = sameType.length > 1 ? `-${sameType.indexOf(container as HTMLElement) + 1}` : "";
+
+    return `${site}_${page}-${type}${suffix}.svg`;
+}
+
+function downloadSvg(svg: SVGElement, container: Element, index: number) {
     const clone = svg.cloneNode(true) as SVGElement;
     clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     const blob = new Blob([clone.outerHTML], { type: "image/svg+xml" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = `diagram-${index + 1}.svg`;
+    a.download = buildFilename(container);
     a.click();
     URL.revokeObjectURL(url);
 }
 
-// ---- Watch for mermaid renders ----
 function watchForMermaidRender() {
     const toolbarEnabled = window.__NU_MERMAID_TOOLBAR__ !== false;
     // Initial load: lazy render (only diagrams in/near viewport)

package/src/styles/content.css

@@ -6,7 +6,7 @@
    ========================================================================== */
 
 @layer northwestern {
-    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content) {
+    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content, [data-footnote-ref], [data-footnote-backref]) {
         padding-bottom: 2px;
         font-weight: 700;
         color: var(--sl-color-accent);
@@ -15,11 +15,86 @@
         transition: all var(--nu-transition-default);
     }
 
-    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content):hover {
+    .sl-markdown-content
+        a:not(.anchor-link, [role="tab"], .not-content, [data-footnote-ref], [data-footnote-backref]):hover {
         text-decoration: none;
         border-bottom-style: solid;
     }
 
+    /* Footnote references — superscript markers with brackets */
+    .sl-markdown-content a[data-footnote-ref] {
+        font-weight: 600;
+        line-height: 1;
+        vertical-align: super;
+        color: var(--sl-color-accent);
+        text-decoration: none;
+    }
+
+    .sl-markdown-content a[data-footnote-ref]::before {
+        content: "[";
+    }
+
+    .sl-markdown-content a[data-footnote-ref]::after {
+        content: "]";
+    }
+
+    .sl-markdown-content a[data-footnote-ref]:hover {
+        text-decoration: underline;
+    }
+
+    /* Footnotes section */
+    .sl-markdown-content section[data-footnotes] {
+        padding-top: 1.5rem;
+        margin-top: 2.5rem;
+        font-size: 0.875rem;
+        color: var(--nu-color-text-muted);
+        border-top: 1px solid var(--nu-border-color);
+    }
+
+    /* Hide the default <hr> that remark-gfm inserts before footnotes */
+    .sl-markdown-content section[data-footnotes] > :first-child:is(hr) {
+        display: none;
+    }
+
+    /* Collapse the heading wrapper around the sr-only "Footnotes" label */
+    .sl-markdown-content section[data-footnotes] > .sl-heading-wrapper {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        white-space: nowrap;
+        border: 0;
+        clip-path: inset(50%);
+    }
+
+    .sl-markdown-content section[data-footnotes] ol {
+        padding-left: 1.5rem;
+    }
+
+    .sl-markdown-content section[data-footnotes] li {
+        padding-left: 0.25rem;
+    }
+
+    .sl-markdown-content section[data-footnotes] li + li {
+        margin-top: 0.5rem;
+    }
+
+    .sl-markdown-content section[data-footnotes] a[data-footnote-backref] {
+        margin-left: 0.25em;
+        font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
+        font-size: 1em;
+        font-weight: 700;
+        color: var(--sl-color-accent);
+        text-decoration: none;
+        font-variant-emoji: text;
+    }
+
+    .sl-markdown-content section[data-footnotes] a[data-footnote-backref]:hover {
+        border-bottom: 1px solid var(--sl-color-accent);
+    }
+
     .sl-markdown-content ul:not(:where(.not-content *)) {
         padding-left: 1.25rem;
         list-style: none;
@@ -55,16 +130,12 @@
     }
 
     .sl-markdown-content hr:not(:where(.not-content *)) {
-        height: 3px;
+        height: 1px;
         margin: 2.5rem 0;
-        background: var(--nu-purple-10);
+        background: var(--nu-border-color);
         border: 0;
     }
 
-    :root:not([data-theme="light"]) .sl-markdown-content hr:not(:where(.not-content *)) {
-        background: var(--nu-purple-140);
-    }
-
     .sl-markdown-content blockquote:not(:where(.not-content *)) {
         padding: 1rem 1.5rem;
         margin: 2rem 0;

package/src/styles/mermaid-toolbar.css

@@ -12,9 +12,17 @@
         right: 0.5rem;
         z-index: 2;
         display: flex;
-        gap: 0.25rem;
+        gap: 1px;
         align-items: center;
+        padding: 0;
+        overflow: hidden;
+        background: var(--nu-border-color);
+        border: 1px solid var(--nu-border-color);
         opacity: 0;
+
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefix */
+        -webkit-backdrop-filter: blur(12px) saturate(1.2);
+        backdrop-filter: blur(12px) saturate(1.2);
         transition: opacity var(--nu-transition-fast);
     }
 
@@ -23,6 +31,17 @@
         opacity: 1;
     }
 
+    /* Touch devices can't hover — keep toolbar visible */
+    @media (hover: none) {
+        .nu-mermaid-toolbar {
+            opacity: 0.8;
+        }
+
+        .mermaid:active .nu-mermaid-toolbar {
+            opacity: 1;
+        }
+    }
+
     .nu-mermaid-btn {
         box-sizing: border-box;
         display: inline-flex;
@@ -36,13 +55,17 @@
         line-height: 1;
         color: var(--nu-color-text-muted);
         cursor: pointer;
-        background: var(--nu-card-bg);
-        border: 1px solid var(--nu-border-color);
+        background: rgb(255 255 255 / 85%);
+        border: none;
         transition:
             color var(--nu-transition-fast),
             background var(--nu-transition-fast);
     }
 
+    :root:not([data-theme="light"]) .nu-mermaid-btn {
+        background: rgb(30 30 30 / 85%);
+    }
+
     .nu-mermaid-btn svg {
         display: block;
         flex-shrink: 0;
@@ -51,13 +74,18 @@
         pointer-events: none;
     }
 
+    .nu-mermaid-btn:focus-visible {
+        outline: 2px solid var(--sl-color-accent);
+        outline-offset: -2px;
+    }
+
     .nu-mermaid-btn:hover {
         color: var(--nu-color-text);
-        background: #ebedf0;
+        background: var(--nu-hover-bg);
     }
 
     :root:not([data-theme="light"]) .nu-mermaid-btn:hover {
-        background: #3a3a3a;
+        background: var(--nu-hover-bg);
     }
 
     .nu-mermaid-btn.nu-mermaid-success {
@@ -72,7 +100,8 @@
 
     .nu-mermaid-overlay-controls .nu-mermaid-btn.nu-mermaid-success {
         color: #fff !important;
-        background: var(--nu-color-success) !important;
+        background: rgb(0 134 86 / 60%) !important;
+        border-color: rgb(0 134 86 / 80%) !important;
     }
 
     .nu-mermaid-overlay {
@@ -82,7 +111,7 @@
         display: flex;
         flex-direction: column;
         background: #f3f5f7;
-        transition: opacity 150ms ease;
+        transition: opacity 200ms ease;
     }
 
     :root:not([data-theme="light"]) .nu-mermaid-overlay {
@@ -90,29 +119,43 @@
     }
 
     .nu-mermaid-overlay-controls {
+        box-sizing: border-box;
         display: flex;
+        flex-shrink: 0;
         gap: 0.25rem;
         align-items: center;
         height: var(--sl-nav-height);
         padding: 0 1.5rem;
         background: var(--nu-topbar-bg);
+        border-bottom: 1px solid var(--nu-border-color);
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-btn {
-        width: 1.75rem;
-        height: 1.75rem;
-        color: var(--nu-color-text-muted);
-        background: var(--nu-card-bg);
-        border: 1px solid var(--nu-border-color);
+        width: auto;
+        height: auto;
+        padding: 0.5rem;
+        color: #fff;
+        background: rgb(255 255 255 / 15%);
+        border: 1px solid rgb(255 255 255 / 25%);
+    }
+
+    .nu-mermaid-overlay-controls .nu-mermaid-btn svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .nu-mermaid-overlay-controls .nu-mermaid-btn:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px rgb(255 255 255 / 60%);
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-btn:hover {
-        color: var(--nu-color-text);
-        background: #ebedf0;
+        color: #fff;
+        background: rgb(255 255 255 / 25%);
     }
 
     :root:not([data-theme="light"]) .nu-mermaid-overlay-controls .nu-mermaid-btn:hover {
-        background: #3a3a3a;
+        background: rgb(255 255 255 / 25%);
     }
 
     .nu-mermaid-separator {
@@ -128,13 +171,13 @@
 
     .nu-mermaid-overlay-controls .nu-mermaid-close {
         color: #fff;
-        background: var(--nu-color-danger);
-        border-color: var(--nu-color-danger);
+        background: rgb(255 255 255 / 20%);
+        border-color: rgb(255 255 255 / 30%);
     }
 
     .nu-mermaid-overlay-controls .nu-mermaid-close:hover {
-        background: var(--nu-dark-orange);
-        border-color: var(--nu-dark-orange);
+        background: rgb(255 255 255 / 35%);
+        border-color: rgb(255 255 255 / 40%);
     }
 
     .nu-mermaid-viewport {
@@ -143,6 +186,7 @@
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        touch-action: none;
         cursor: grab;
     }
 
@@ -160,4 +204,27 @@
         background: transparent !important;
         border: none !important;
     }
+
+    .nu-mermaid-zoom-badge {
+        position: absolute;
+        right: 1rem;
+        bottom: 1rem;
+        padding: 0.2rem 0.5rem;
+        font-family: var(--nu-font-mono, ui-monospace, monospace);
+        font-size: 0.75rem;
+        line-height: 1;
+        color: rgb(255 255 255 / 70%);
+        pointer-events: none;
+        background: rgb(0 0 0 / 35%);
+        border-radius: 0.25rem;
+
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefix */
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+    }
+
+    :root[data-theme="light"] .nu-mermaid-zoom-badge {
+        color: rgb(0 0 0 / 55%);
+        background: rgb(255 255 255 / 50%);
+    }
 }

package/src/styles/navigation.css

@@ -38,6 +38,13 @@
         background: rgb(255 255 255 / 25%) !important;
     }
 
+    starlight-menu-button button:focus-visible,
+    northwestern-theme-toggle button:focus-visible,
+    .header northwestern-theme-toggle button:focus-visible {
+        outline: none !important;
+        box-shadow: 0 0 0 2px rgb(255 255 255 / 60%) !important;
+    }
+
     @media (width < 50rem) {
         site-search button {
             color: var(--nu-topbar-text) !important;

package/src/styles/theme.css

@@ -7,10 +7,13 @@
 
 /* Unlayered — paints immediately to prevent white flash on load */
 html {
-    scrollbar-gutter: stable;
     background-color: #18181b;
 }
 
+html:not([data-has-hero]) {
+    scrollbar-gutter: stable;
+}
+
 html[data-theme="light"] {
     background-color: #f8fafc;
 }