@nu-appdev/northwestern-starlight-theme 1.0.1 → 1.1.1

package/CHANGELOG.md

@@ -7,7 +7,42 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.0.0] - 2025-06-01
+## [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 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 uses Northwestern purple instead of the browser default.
+
+### Changed
+
+- Release workflow uses npm trusted publishing (OIDC) instead of long-lived tokens.
+
+## [1.0.0] - 2026-03-25
 
 - Initial public release
 - Northwestern Purple color palette mapped to Starlight's accent system
@@ -17,5 +52,7 @@ 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.0.0...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.1...HEAD
+[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/index.ts

@@ -1,3 +1,7 @@
+import { copyFileSync, mkdirSync, readFileSync } from "node:fs";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import type { StarlightPlugin } from "@astrojs/starlight/types";
 
 export interface NorthwesternHomepageConfig {
@@ -17,6 +21,15 @@ export interface NorthwesternHomepageConfig {
      * @default true
      */
     showTitle?: boolean;
+
+    /**
+     * Maximum width of the hero image in the centered layout, in pixels.
+     *
+     * Use a larger value for wide lockup images (e.g., `"750px"`, `"1000px"`).
+     *
+     * @default "500px"
+     */
+    imageWidth?: string;
 }
 
 export interface NorthwesternThemeConfig {
@@ -53,12 +66,27 @@ const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
 
 export default function northwesternTheme(config: NorthwesternThemeConfig = {}): StarlightPlugin {
     const { homepage = {}, mermaid = true } = config;
-    const themeConfig = { homepage: { layout: homepage.layout ?? "centered", showTitle: homepage.showTitle ?? true } };
+    const themeConfig = {
+        homepage: {
+            layout: homepage.layout ?? "centered",
+            showTitle: homepage.showTitle ?? true,
+            imageWidth: homepage.imageWidth ?? "500px",
+        },
+    };
 
     return {
         name: "northwestern-starlight-theme",
         hooks: {
             async "config:setup"({ config: starlightConfig, updateConfig, addIntegration, logger }) {
+                // Apply default favicon if consumer hasn't set one
+                const consumerSetFavicon =
+                    starlightConfig.favicon &&
+                    (starlightConfig.favicon as unknown as { href: string }).href !== "/favicon.svg";
+
+                // Read favicon bytes once for the Vite plugin to serve
+                const faviconPath = join(dirname(fileURLToPath(import.meta.url)), "src", "favicon.png");
+                const faviconBytes = consumerSetFavicon ? null : readFileSync(faviconPath);
+
                 addIntegration({
                     name: "northwestern-theme-config",
                     hooks: {
@@ -77,14 +105,54 @@ export default function northwesternTheme(config: NorthwesternThemeConfig = {}):
                                                 }
                                             },
                                         },
+                                        // Serve the bundled favicon during dev — no file touches public/
+                                        ...(faviconBytes
+                                            ? [
+                                                  {
+                                                      name: "northwestern-theme-favicon",
+                                                      configureServer(server: {
+                                                          middlewares: {
+                                                              use(
+                                                                  fn: (
+                                                                      req: IncomingMessage,
+                                                                      res: ServerResponse,
+                                                                      next: () => void,
+                                                                  ) => void,
+                                                              ): void;
+                                                          };
+                                                      }) {
+                                                          server.middlewares.use((req, res, next) => {
+                                                              if (req.url === "/favicon.png") {
+                                                                  res.setHeader("Content-Type", "image/png");
+                                                                  res.setHeader(
+                                                                      "Cache-Control",
+                                                                      "public, max-age=31536000, immutable",
+                                                                  );
+                                                                  res.end(faviconBytes);
+                                                              } else {
+                                                                  next();
+                                                              }
+                                                          });
+                                                      },
+                                                  },
+                                              ]
+                                            : []),
                                     ],
                                 },
                             });
                         },
+                        // Copy favicon into build output so nothing touches public/
+                        "astro:build:done": ({ dir }) => {
+                            if (faviconBytes) {
+                                const dest = join(fileURLToPath(dir), "favicon.png");
+                                mkdirSync(dirname(dest), { recursive: true });
+                                copyFileSync(faviconPath, dest);
+                            }
+                        },
                     },
                 });
                 // Detect mermaid availability
-                let mermaidEnabled = mermaid !== false;
+                let mermaidEnabled = mermaid;
 
                 if (mermaidEnabled) {
                     const hasMermaid = await canResolve("astro-mermaid");
@@ -102,6 +170,7 @@ export default function northwesternTheme(config: NorthwesternThemeConfig = {}):
                 }
 
                 updateConfig({
+                    ...(consumerSetFavicon ? {} : { favicon: "/favicon.png" }),
                     components: {
                         ...(starlightConfig.components ?? {}),
                         Hero:

package/package.json

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

package/src/components/Hero.astro

@@ -7,11 +7,12 @@ const PAGE_TITLE_ID = "_top";
 const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
 
+const imageWidthPx = parseInt(themeConfig.homepage.imageWidth, 10) || 500;
+
 const imageAttrs = {
     loading: "eager" as const,
     decoding: "async" as const,
-    width: 400,
-    height: 400,
+    width: imageWidthPx,
     alt: image?.alt || "",
 };
 
@@ -32,9 +33,10 @@ if (image) {
 const hasImage = Boolean(darkImage || lightImage || rawHtml);
 const isSplit = hasImage && themeConfig.homepage.layout === "split";
 const showTitle = themeConfig.homepage.showTitle;
+const imageWidth = themeConfig.homepage.imageWidth;
 ---
 
-<div class:list={["hero", { "hero--split": isSplit }]}>
+<div class:list={["hero", { "hero--split": isSplit }]} style={`--hero-image-width: ${imageWidth};`}>
     {
         isSplit ? (
             <>
@@ -81,7 +83,7 @@ const showTitle = themeConfig.homepage.showTitle;
                     </div>
                 )}
                 <div class="sl-flex copy">
-                    <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+                    {showTitle && <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />}
                     {tagline && <div class="tagline" set:html={tagline} />}
                 </div>
                 {actions.length > 0 && (
@@ -163,7 +165,7 @@ const showTitle = themeConfig.homepage.showTitle;
     .hero-image-centered .hero-image,
     .hero-image-centered .hero-html {
         object-fit: contain;
-        width: min(90%, 500px);
+        width: min(90%, var(--hero-image-width, 500px));
         height: auto;
     }
 

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"],
@@ -97,7 +96,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;
@@ -176,7 +174,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 +194,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 +203,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;
@@ -244,7 +239,7 @@ function initMermaidToolbar(): number {
             const action = btn.dataset.action;
             if (action === "fullscreen") openFullscreen(svg, container, index);
             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,7 +247,6 @@ function initMermaidToolbar(): number {
     return injected;
 }
 
-// ---- Fullscreen overlay ----
 function openFullscreen(svg: SVGElement, container: HTMLElement, index: number) {
     const overlay = document.createElement("div");
     overlay.className = "nu-mermaid-overlay";
@@ -287,7 +281,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 +290,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;
@@ -309,7 +301,7 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
 
     function calcFitScale(mode: "both" | "width" | "height" = "both"): number {
         const maxW = window.innerWidth * 0.92;
-        const maxH = (window.innerHeight - 120) * 0.92; // account for title + controls
+        const maxH = (window.innerHeight - 120) * 0.92; // account for controls bar
         if (mode === "width") return maxW / vbWidth;
         if (mode === "height") return maxH / vbHeight;
         return Math.min(maxW / vbWidth, maxH / vbHeight);
@@ -323,7 +315,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     viewport.appendChild(wrapper);
     overlay.appendChild(viewport);
 
-    // Add to DOM with animation
     overlay.style.opacity = "0";
     document.body.appendChild(overlay);
     document.body.style.overflow = "hidden";
@@ -356,7 +347,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         updateTransform();
     }
 
-    // Mouse wheel zoom
     viewport.addEventListener(
         "wheel",
         (e) => {
@@ -367,7 +357,6 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         { passive: false },
     );
 
-    // Pan with mouse drag
     viewport.addEventListener("mousedown", (e) => {
         isPanning = true;
         startX = e.clientX - panX;
@@ -391,13 +380,75 @@ 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);
     });
 
-    // Control buttons
     controls.addEventListener("click", (e) => {
         const btn = (e.target as HTMLElement).closest<HTMLButtonElement>(".nu-mermaid-overlay-btn");
         if (!btn) return;
@@ -408,13 +459,12 @@ 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 === "Escape") close();
         else if (e.key === "+" || e.key === "=") zoomTo(scale * 1.2);
@@ -450,24 +500,60 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
             window.removeEventListener("mouseup", onMouseUp);
             document.body.style.overflow = "";
             overlay.remove();
-        }, 150);
+        }, 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, index: number): 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, index);
     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/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: none;
+        box-shadow: 0 0 0 0.25rem var(--nu-focus-shadow-color);
+    }
+
     .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,38 @@
     }
 
     .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: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 +166,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 +181,7 @@
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        touch-action: none;
         cursor: grab;
     }
 

package/src/styles/navigation.css

@@ -7,7 +7,8 @@
 
 @layer northwestern {
     .site-title,
-    .header a,
+    .header > a,
+    .header > nav a,
     .social-icons a,
     starlight-theme-select,
     starlight-theme-select label,
@@ -58,6 +59,13 @@
         line-height: 1 !important;
     }
 
+    /* stylelint-disable-next-line selector-id-pattern -- Starlight's own ID */
+    #starlight__search input:focus {
+        --pagefind-ui-border: var(--nu-focus-border) !important;
+        outline: none !important;
+        box-shadow: 0 0 0 0.25rem var(--nu-focus-shadow-color) !important;
+    }
+
     site-search button[data-open-modal] > svg {
         flex-shrink: 0;
         align-self: center;

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;
 }

package/src/virtual.d.ts

@@ -3,6 +3,7 @@ declare module "virtual:northwestern-theme/config" {
         homepage: {
             layout: "centered" | "split";
             showTitle: boolean;
+            imageWidth: string;
         };
     };
     export default config;