@nu-appdev/northwestern-starlight-theme 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -7,6 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.2] - 2026-03-30
+
+### Fixed
+
+- H1/H2 now use Noto Serif (`--nu-font-display`), H3–H6 use Poppins (`--nu-font-heading`). Sizes, weights, and colors match the [Department 4.0 stylesheet](https://common.northwestern.edu/dept/4.0/css/styles.css).
+- Poppins 400 loaded the Light file instead of Regular. Poppins 500 (Medium) added from v4 CDN.
+- Table headers now use `--nu-purple-100` with white text.
+- Table striping moved to odd rows (`#f9f6ff`); dark mode uses `rgb(78 42 132 / 10%)`.
+- `--nu-purple-surface` corrected to `#f9f6ff`, `--nu-purple-surface-subtle` to `#f3f0f7`.
+- Blockquote background uses `#f9f6ff` instead of translucent purple.
+- Horizontal rules use 3px `--nu-purple-10` instead of 1px gray.
+- List markers use `--nu-purple-100` instead of `--nu-purple-40`.
+
+## [1.3.1] - 2026-03-27
+
+### Fixed
+
+- Tooltips on mobile rendered outside the viewport near screen edges. Horizontal position now clamps with 8px padding; arrow shifts to track the trigger.
+- Tooltips stayed visible while scrolling on touch devices. Dismisses when the trigger moves 50px from its open position or leaves the viewport.
+- Tapping a tooltip after scroll-dismiss had no effect. Trigger now blurs on scroll-dismiss so the next tap re-focuses.
+- Tooltips near the top of the page overlapped Starlight's fixed header and "On this page" dropdown. Flips to bottom when space above is insufficient (100px header safe zone).
+
 ## [1.3.0] - 2026-03-26
 
 ### Added
@@ -121,7 +143,9 @@ 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.3.0...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.3.2...HEAD
+[1.3.2]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.3.1...v1.3.2
+[1.3.1]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.2.0...v1.3.0
 [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

package/package.json

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

package/src/components/Hero.astro

@@ -130,6 +130,7 @@ const imageWidth = themeConfig.homepage.imageWidth;
         line-height: var(--sl-line-height-headings);
         font-weight: 600;
         color: var(--nu-purple-100);
+        box-shadow: none;
     }
 
     :root:not([data-theme="light"]) h1 {

package/src/components/Tooltip.astro

@@ -66,15 +66,25 @@ if (resolvedColor) {
             if (!trigger || !content) return;
 
             let isVisible = false;
+            let openY = 0;
             const hasPopover = "showPopover" in content;
+            const preferredSide = wrapper.classList.contains("nu-tooltip--bottom") ? "bottom" : "top";
 
             function onScroll() {
-                if (isVisible) position();
+                if (!isVisible) return;
+                const rect = trigger!.getBoundingClientRect();
+                if (rect.bottom < 0 || rect.top > window.innerHeight || Math.abs(rect.top - openY) > 50) {
+                    trigger!.blur();
+                    hide();
+                    return;
+                }
+                position();
             }
 
             function show() {
                 if (isVisible) return;
                 isVisible = true;
+                openY = trigger!.getBoundingClientRect().top;
                 if (hasPopover) {
                     content!.showPopover();
                 } else {
@@ -102,17 +112,52 @@ if (resolvedColor) {
 
             function position() {
                 const rect = trigger!.getBoundingClientRect();
-                const side = wrapper.classList.contains("nu-tooltip--bottom") ? "bottom" : "top";
+                const preferred = preferredSide;
                 const gap = 8;
+                const pad = 8;
+                const vw = document.documentElement.clientWidth;
+
+                // Measure tooltip height to decide if we need to flip
+                content!.style.transform = "";
+                content!.style.left = "0";
+                content!.style.top = "0";
+                const tipHeight = content!.offsetHeight;
+                const tipWidth = content!.offsetWidth;
+
+                // Reserve space for fixed header + mobile TOC (~100px)
+                const headerZone = 100;
+
+                // Auto-flip: if preferred side would overflow, use the other
+                const spaceAbove = rect.top - headerZone - gap;
+                const spaceBelow = window.innerHeight - rect.bottom - gap;
+                let side = preferred;
+                if (preferred === "top" && spaceAbove < tipHeight + pad && spaceBelow > spaceAbove) {
+                    side = "bottom";
+                } else if (preferred === "bottom" && spaceBelow < tipHeight + pad && spaceAbove > spaceBelow) {
+                    side = "top";
+                }
 
-                content!.style.left = `${rect.left + rect.width / 2}px`;
+                // Update wrapper class so CSS arrow borders match
+                wrapper.classList.toggle("nu-tooltip--top", side === "top");
+                wrapper.classList.toggle("nu-tooltip--bottom", side === "bottom");
 
-                if (side === "top") {
-                    content!.style.top = `${rect.top - gap}px`;
-                    content!.style.transform = "translate(-50%, -100%)";
-                } else {
-                    content!.style.top = `${rect.bottom + gap}px`;
-                    content!.style.transform = "translate(-50%, 0)";
+                content!.style.top = side === "top"
+                    ? `${rect.top - gap}px`
+                    : `${rect.bottom + gap}px`;
+
+                let left = rect.left + rect.width / 2 - tipWidth / 2;
+                left = Math.max(pad, Math.min(left, vw - tipWidth - pad));
+
+                content!.style.left = `${left}px`;
+                content!.style.transform = side === "top" ? "translateY(-100%)" : "";
+
+                // Shift arrow to stay centered on trigger and flip its direction
+                const arrow = content!.querySelector<HTMLElement>(".nu-tooltip__arrow");
+                if (arrow) {
+                    const tipCenter = left + tipWidth / 2;
+                    const triggerCenter = rect.left + rect.width / 2;
+                    const offset = triggerCenter - tipCenter;
+                    arrow.style.left = `calc(50% + ${offset}px)`;
                 }
             }
 

package/src/styles/components/blockquotes.css

@@ -7,8 +7,9 @@
         padding: 1rem 1.5rem;
         margin: 2rem 0;
         color: var(--nu-color-text);
-        background: rgb(228 224 238 / 42%);
+        background: #f9f6ff;
         border-inline-start: 10px solid var(--nu-purple-100);
+        border-radius: 0 0.75rem 0.75rem 0 !important;
     }
 
     .sl-markdown-content blockquote:not(:where(.not-content *)) p:last-child {

package/src/styles/components/property-table.css

@@ -557,6 +557,7 @@
         .nu-property-table:not(.nu-property-table--table) .nu-property__head {
             flex-direction: column;
             gap: 0.25rem;
+            align-items: flex-start;
         }
 
         .nu-property-table:not(.nu-property-table--table) .nu-property__prop-col {

package/src/styles/components/tables.css

@@ -16,18 +16,20 @@
     }
 
     .sl-markdown-content table:not(:where(.not-content *)) > thead > tr > th {
-        padding: 0.5rem 1rem;
-        font-family: var(--nu-font-heading);
-        font-weight: 600;
-        color: var(--nu-black-80);
+        padding: 0.75rem 0.5rem;
+        font-family: var(--nu-font-body);
+        font-size: 1rem;
+        font-weight: 700;
+        color: #fff;
         text-align: left;
-        background-color: var(--nu-purple-surface);
+        background-color: var(--nu-purple-100);
         border: 1px solid var(--nu-border-color);
+        border-right: 1px solid rgb(255 255 255 / 30%);
+        border-left: 1px solid rgb(255 255 255 / 30%);
     }
 
     :root:not([data-theme="light"]) .sl-markdown-content table:not(:where(.not-content *)) > thead > tr > th {
-        color: var(--nu-color-text);
-        background-color: rgb(78 42 132 / 14%);
+        background-color: rgb(78 42 132 / 40%);
     }
 
     .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr > td {
@@ -46,15 +48,19 @@
         text-align: center;
     }
 
-    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr:nth-child(even) {
-        background-color: #f3f4f6;
+    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr:nth-child(odd) {
+        background-color: #f9f6ff;
+    }
+
+    .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr:hover {
+        background-color: #f0f0f0;
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr:nth-child(odd) {
+        background-color: rgb(78 42 132 / 10%);
     }
 
-    :root:not([data-theme="light"])
-        .sl-markdown-content
-        table:not(:where(.not-content *))
-        > tbody
-        > tr:nth-child(even) {
-        background-color: #1e1e1e;
+    :root:not([data-theme="light"]) .sl-markdown-content table:not(:where(.not-content *)) > tbody > tr:hover {
+        background-color: rgb(255 255 255 / 5%);
     }
 }

package/src/styles/content.css

@@ -39,7 +39,7 @@
         width: 6px;
         height: 6px;
         content: "";
-        background: var(--nu-purple-40);
+        background: var(--nu-purple-100);
     }
 
     :root:not([data-theme="light"]) .sl-markdown-content ul:not(:where(.not-content *)) > li::before {
@@ -56,10 +56,16 @@
         border-color: var(--nu-purple-30);
     }
 
+    .sl-markdown-content mark:not(:where(.not-content *)),
+    .sl-markdown-content .highlight:not(:where(.not-content *)) {
+        padding: 3px;
+        background: rgb(228 224 238 / 50%);
+    }
+
     .sl-markdown-content hr:not(:where(.not-content *)) {
-        height: 1px;
+        height: 3px;
         margin: 2.5rem 0;
-        background: var(--nu-border-color);
+        background: var(--nu-purple-10);
         border: 0;
     }
 

package/src/styles/typography.css

@@ -78,7 +78,15 @@
     font-family: Poppins;
     font-style: normal;
     font-weight: 400;
-    src: url("https://common.northwestern.edu/v8/css/fonts/Poppins-Light.woff") format("woff");
+    src: url("https://common.northwestern.edu/v8/css/fonts/Poppins-Regular.woff") format("woff");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: Poppins;
+    font-style: normal;
+    font-weight: 500;
+    src: url("https://common.northwestern.edu/dept/4.0/css/fonts/poppins/poppins-v21-latin-500.woff2") format("woff2");
     font-display: swap;
 }
 
@@ -150,18 +158,81 @@
 
     h1,
     h2 {
-        font-family: var(--nu-font-heading);
-    }
-
-    h1 {
-        color: var(--sl-color-text-accent);
+        font-family: var(--nu-font-display);
     }
 
     h3,
     h4,
     h5,
     h6 {
-        font-family: var(--nu-font-body);
+        font-family: var(--nu-font-heading);
+    }
+
+    .main-pane h1 {
+        display: inline;
+        font-size: clamp(2rem, 1rem + 3vw, 2.8125rem);
+        font-weight: 500;
+        line-height: 1.4;
+        color: #000;
+        box-shadow: inset 0 -0.55em 0 0 var(--nu-purple-10);
+        box-decoration-break: clone;
+    }
+
+    :root:not([data-theme="light"]) .main-pane h1 {
+        color: #fff;
+        box-shadow: inset 0 -0.55em 0 0 var(--nu-purple-140);
+    }
+
+    .sl-markdown-content h2 {
+        font-size: 1.875rem;
+        font-weight: 700;
+        line-height: 1.4;
+        color: var(--nu-purple-120);
+    }
+
+    .sl-markdown-content h3 {
+        font-size: 1.625rem;
+        font-weight: 500;
+        line-height: 1.4;
+        color: var(--nu-black-80);
+    }
+
+    .sl-markdown-content h4 {
+        font-size: 1.4375rem;
+        font-weight: 500;
+        line-height: 1.4;
+        color: var(--nu-purple-120);
+    }
+
+    .sl-markdown-content h5 {
+        font-size: 1.25rem;
+        font-weight: 500;
+        line-height: 1.4;
+        color: var(--nu-black-80);
+    }
+
+    .sl-markdown-content h6 {
+        font-size: 1.125rem;
+        font-weight: 500;
+        line-height: 1.4;
+        color: var(--nu-black-80);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content h2 {
+        color: var(--nu-purple-30);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content h3 {
+        color: var(--nu-color-text);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content h4 {
+        color: var(--nu-purple-30);
+    }
+
+    :root:not([data-theme="light"]) .sl-markdown-content h5,
+    :root:not([data-theme="light"]) .sl-markdown-content h6 {
+        color: var(--nu-color-text);
     }
 
     .site-title {

package/src/styles/variables.css

@@ -55,12 +55,12 @@
         --nu-transition-default: 200ms ease;
         --nu-transition-slow: 300ms ease-in-out;
 
-        --nu-purple-surface: #f3f0f7;
-        --nu-purple-surface-subtle: #f7f5f9;
+        --nu-purple-surface: #f9f6ff;
+        --nu-purple-surface-subtle: #f3f0f7;
         --nu-purple-tint: rgb(78 42 132 / 15%);
         --nu-purple-tint-strong: rgb(78 42 132 / 20%);
         --nu-surface-muted: #f9fafb;
-        --nu-hover-bg: #f3f4f6;
+        --nu-hover-bg: #f0f0f0;
 
         --nu-focus-ring: var(--nu-purple-100);
         --nu-focus-border: #a795c2;
@@ -90,10 +90,10 @@
         --nu-focus-ring: var(--nu-purple-100);
         --nu-focus-shadow-color: rgb(78 42 132 / 25%);
 
-        --nu-purple-surface: #f3f0f7;
-        --nu-purple-surface-subtle: #f7f5f9;
+        --nu-purple-surface: #f9f6ff;
+        --nu-purple-surface-subtle: #f3f0f7;
         --nu-surface-muted: #f9fafb;
-        --nu-hover-bg: #f3f4f6;
+        --nu-hover-bg: #f0f0f0;
     }
 
     :root:not([data-theme="light"]),