Website v2: design-system migration, redesigned homepage + team + research + news#86
Merged
Website v2: design-system migration, redesigned homepage + team + research + news#86
Conversation
Drops `tokens.css` (paper-on-ink palette, four font families, 4-px spacing scale, 28-px panel radius) as the new source of truth, plus a bridge layer that aliases the legacy `--color-*` / `--font-*` variable names onto the new tokens so every existing page renders the new palette without rewrites. Also: - `_includes/tokens-head.html` and `_includes/tokens-bridge.html` — shared chunks for standalone layouts that don't inherit from default.html. - `_config.yml` — exclude `comphy-lab-design-system/` (design handoff bundle, not source). - `.stylelintrc.json` / `.prettierignore` — skip the vendored tokens file so lint/format doesn't reshape the design-system export. - `.claude/launch.json` — `jekyll` dev server on port 4210 for the Claude Code preview sidebar. - `.gitignore` — track `.claude/` (only user-local `settings.local.json` stays ignored) and exclude the design handoff bundle.
Four-column layout (brand blurb · Explore · Work with us · Code & data) on a paper-tint background, with partner marks (Durham, Physics of Fluids, Basilisk) inverted onto paper via `.invert-on-light`. Silent legal strip underneath — copyright + 'Edit on GitHub' + back-to-top. Addresses the Red Team Audit A2 finding: the legacy dark slab broke the paper aesthetic every visitor hit at the bottom of every page.
Swaps the Cormorant-only font link for a combined load of Cormorant
Garamond (italic 500/600, hero only), Fraunces (opsz 9..144, headings),
IBM Plex Sans (body/UI), and IBM Plex Mono (code/DOIs/emails). Loads
`tokens.css` first, then legacy styles, then `bridge.css` — the bridge
is last so its :root wins the cascade over `styles.css`'s own :root
block (styles.css redeclared `--color-background: #fff` at line 43,
which was pinning the body to white regardless of the bridge).
Inlines the new paper-tint footer via `{% include footer-v2.html %}` on
every layout, and drops the legacy three-column dark slab. Standalone
layouts (history, join-us, teaching, teaching-course) get the new fonts
+ tokens via `_includes/tokens-head.html` and the bridge + footer CSS
via `_includes/tokens-bridge.html`.
`default.html` also conditionally loads homepage / research / team CSS
by `page.url` and `page.body_class`, and supports a `body_class`
frontmatter field so pages can opt in to the homepage / team / research
v2 styles.
Replaces the `.s-intro` / `.s-about` / `.s-featured-wrapper` scaffold (which fetched about/news markdown at runtime and scraped /research for featured papers) with a static, data-driven Liquid render. Sections, in order: 1. Hero — shrunk italic Cormorant wordmark clipped against the brand gradient, subtitle in Fraunces, one-sentence research statement with purple italic accents, PI + department + location surfaced above the fold, two CTAs, 4:5 physics image rotator (3 figures, 6.5 s fade, prefers-reduced-motion respected), three-stat strip. 2. 'Currently' strip — teal-accented callout for ongoing research. 3. Four research theme cards — each with a hero figure, tag, title, 2-sentence framing, and the three most impactful papers. 4. News feed — the five most recent items from `_data/news.yml`, with distinct templates for `paper`, `talk`, `people`, `move`, and `award` kinds. 5. Team preview — six present members driven by `_data/team.yml`, PI tile styled in teal, link to the full roster at /team/. 6. Closing CTA into /join. Real lab content throughout (24 papers, 6 present members, 5 recent news items, 4 themes inferred from the actual tag distribution). Addresses Red Team Audit findings A1 (hero was a rainbow wordmark with no sentence), B2 (research page was a CV not a research page), B4 (news had no narrative), B5 (team page was a long scroll), C2 (no visual content above the fold), C3 (⌘K had nothing to command), and C4 (spacing was tight — section gaps now 96 px, measure 68 ch).
Replaces the hand-rolled markdown + inline-HTML member list with a Liquid render of `_data/team.yml`. Three sections, hard-separated: Present team (6), Collaborators (4 shown, more available), Alumni (last seven years). Every tile has an identical square photo crop (`--r-md`), a Fraunces name, a mono role line, a 2-sentence bio clamped to three lines, and inline icons for email / Scholar / GitHub / Bluesky / ORCID / personal site. PI tile gets the teal `.t-member--pi` variant. Note: the full prose from the old `_team/index.md` (PI long bio, education history, thesis PDFs, full alumni thesis list) is not rendered on /team/ — it stays in git history. If restored, it should move into richer `_data/team.yml` fields rather than back into flat markdown. Addresses Red Team Audit B5.
Rewrites `_layouts/research.html` to inherit from default.html instead
of being a 500-line standalone HTML document. The new layout prepends:
- A 'Currently' strip (from `_data/research_themes.yml`).
- A 4-theme grid with figure + 2-sentence framing + top-3 papers.
Then renders the original `_research/index.md` body untouched via
`{{ content }}`, preserving the chronological paper list, tag-filter
chip row, and `research.js` client-side filtering. TOC sidebar with
IntersectionObserver active-link highlighting is kept.
Addresses Red Team Audit B2 while preserving every existing paper
entry and the filter behaviour.
- `news/index.md` — new route rendering the full `_data/news.yml` feed with the same paper/talk/people/move/award templates the homepage uses. Linked from the homepage 'All news' button and from the v2 footer. - `command-data.js` — appends 30+ new entries grouped as Actions (Email the PI, toggle theme, open Scholar / GitHub / Durham staff page), Papers (10 deep-links into `/research#N` anchors), People (6 members + 3 collaborators → `/team/#slug`), and News (institutional move, KHMW award, APS talk, archive). Addresses Red Team Audit C3 — ⌘K now has something to command. - `main.js` — null-guards the runtime `aboutCoMPhy.md`, `News.md`, and `/research` featured-paper scraping calls so they early-return when their legacy DOM targets are absent on v2 pages.
`_data/news.yml` now carries the full history that was only on /history/ before — 22 items back to May 2024 (KIVI Hoogendoorn Award). All port cleanly into the five kind templates (paper / talk / people / move / award), so /news/ and /history/ show the same content with different presentation. /history/ is kept live for inbound links.
Rewriting _layouts/research.html dropped the inline script that wrapped each h3 + its siblings in a .paper-container div and bound the tag click handler that hides non-matching papers. Re-added, plus the ?tag=<name> URL read on page load so deep-links and the filtered redirect pages (generated by scripts/generate_filtered_research.rb) work again. Behaviour: - Click a tag → filter narrows to matching papers, URL gains ?tag=<name>, the active tag gets a teal solid style. - Click the active tag again → clear filter, URL returns to /research/, all papers visible. - Open /research/?tag=Sheets directly → filter auto-applies on load. Verified via DOM: 27 papers wrap, 101 tag spans bound. Bubbles → 10 visible, Sheets → 4, toggle-off → 27.
Source markdown renders each sort-by-topic tag as its own `<div class="tags">` — 17 consecutive block-level siblings stacked vertically. Switches `.research-content .tags` to `display: inline-flex` so they flow as a single horizontal row with natural wrap, matching the pre-v2 behaviour. Per-paper tag rows stay `display: flex` (block-level in their `.paper-container` context) so they keep their own line as before.
`_data/hero.yml` entries now accept either `src:` (renders as an `<img>`) or `youtube:` with a video ID (renders as an autoplay+mute+loop embed). Optional `href:` wraps the caption in a link to the source paper. Hero cycles through three recent publications: - [23] Jana et al. — Soft Matter 2026 cover (image) - [22] Dixit et al. — Holes in Sheets, PRL 2026 (YouTube DNS video) - [14] Sanjay et al. — JFM 1004 cover, viscous drop-impact forces (image) CSS: YouTube iframe width set to 225% and centered so its 16:9 content fills the 4:5 hero panel edge-to-edge via parent `overflow: hidden`. Inactive figures fade via `opacity: 0`; the video keeps playing muted in the background to avoid restart flash on rotation.
`.m4v` is MPEG-4 with H.264 — browsers handle it natively with `type="video/mp4"`, no conversion needed. Native `<video autoplay muted loop playsinline>` replaces the YouTube iframe for paper [22]: - 960×720 (4:3) vs YouTube's 16:9 → only ~17% side-crop on the 4:5 hero panel vs ~50% before; central DNS content fully preserved. - 918 KB file, ~1 MB over the wire (vs ~1.5 MB for the YouTube player shell plus stream). - No tracking cookies, no player chrome risk, no third-party dependency. Template keeps `youtube:` support as a fallback so future entries can mix both sources, with `video:` taking precedence when set.
Matches Keynote's native 4:3 export (so video authoring needs zero
cropping) and fits the 960×720 m4v DNS asset edge-to-edge. Journal
covers are portrait 3:4 — they now render as framed posters via
`object-fit: contain` with paper-tint letterboxing, which reads as
editorial rather than cropped.
- `aspect-ratio: 4 / 3` on .hero__media
- Paper-tint background so contained images sit on a clean bed
- `.hero__media img { object-fit: contain }` + 16 px padding
- `.hero__media video { object-fit: cover }` keeps DNS full-bleed
Overlay caption on busy cover art was unreadable (screenshot shows white-on-sky-blue on the JFM Vol 1004 cover). Rewrites each slide as a two-column card: [ image / video · 5fr ][ caption panel · 3fr ] The caption panel sits on `--c-paper-tint` with full-strength ink, carrying: - 'FEATURED WORK' eyebrow in brand purple - Fraunces serif title, clamp-sized, opsz 48 - Author + venue in italic Fraunces, muted - Teal underlined 'Read the paper ↗' link Drops the `::after` dark-gradient overlay and the absolutely positioned `.hero__caption` entirely. Mobile (<820 px) stacks image on top, caption below, so the split doesn't cramp at narrow widths.
Two slide variants sharing the same rotator container + caption
markup, but laying out differently based on whether the entry has
an `src:` (still) or `video:`/`youtube:` (motion):
.hero__slide--still
- 3fr:2fr split inside the 4:3 container → the image column
resolves to a ~4:5 portrait cell, so journal covers render
full-height like editorial posters instead of cropped
landscape.
- Caption panel on the right on `--c-paper-tint` with dark
ink (max contrast, purple eyebrow, teal link).
.hero__slide--motion
- Video fills the full 4:3 card edge-to-edge, keeping the DNS
frame intact.
- Caption overlays the bottom behind a transparent → 88 %
ink gradient so white text pops against any frame of the
underlying DNS.
- Teal link → lifted to `#a7e3df` for contrast on dark bg.
The figure `.hero__slide--{still,motion}` class is emitted from
Liquid by inspecting `img.video` / `img.youtube`.
Two issues from the v2 hero landed after yesterday's split layout: 1. Still-slide links (the JFM card's 'Read the paper ↗') were un-clickable. Inactive figures still captured pointer events at opacity 0, so the rotator's topmost layer intercepted clicks meant for the visible slide. Fixed with `pointer-events: none` on inactive figures, `auto` on active. 2. The motion-slide caption overlay was a hard black gradient → clashed with the paper-on-ink aesthetic everywhere else on the site, and text contrast was marginal against busy DNS frames. Replaced with a frosted `--c-paper-tint` pane (backdrop-blur + 88 % opacity) bordered + shadowed. Text is normal `--fg-strong` ink; purple eyebrow, teal link — identical treatment to still slides. Also revert `grid-template-areas: stack` on `.hero__media` to plain `position: absolute; inset: 0` for figures. The still-slide caption was content-sizing the grid row to ~466 px, overflowing the 411 px aspect-ratio container and clipping the motion slide's 'Read the paper ↗' link. Absolute positioning forces every slide to match the container's aspect-ratio exactly.
Previous 88 % paper-tint completely hid the video behind the caption. Dropped to 55 % with blur(24px)+saturate(1.3), plus a no-backdrop-filter fallback at 82 %. DNS now peeks through behind the text while text stays legible against the frosted pane.
A/B test outcome: 16:9 wins for video + caption vertical stack. A 16:9 video at full width of the 4:3 hero panel takes ~75 % of the height; the remaining ~25 % becomes a solid paper-tint caption strip that fits the eyebrow + title + citation + link cleanly. Changes: - assets/videos/hero-holeySheets-16-9.m4v (1280×720, 4.3 s, 929 KB) replaces the 4:3 version in hero.yml. - .hero__slide--motion flips from absolute-positioned overlay to grid-template-rows: auto 1fr with image-well pinned at aspect- ratio 16 / 9. Caption panel sits on --c-paper-tint as a solid strip, not a frosted overlay. - No backdrop-filter, no text-shadow trickery, no dark gradient — same treatment as still slides. Result: video is 100 % visible (no caption hiding DNS content), caption is 100 % legible (full-contrast dark ink on paper tint). Keynote default 16:9 export is now the right authoring target for future hero videos.
The 4:3 version is no longer used — new canonical path is just `/assets/videos/hero-holeySheets.m4v` (1280×720, 4.3 s, 929 KB). Future hero videos should follow the same convention: 16:9, Keynote default export, h.264 in an .m4v container.
Italic 14 px citations at --fg-2 (#9a8e7d) were washed out against the dark paper-tint caption strip. Bumped dark-mode color to --fg-1 (#e6dfd0) — still reads as the muted sub-line against the brighter title, but now legible.
Academic site; the below-the-fold counters ('24 papers', '20+
collaborators', 'Open — always recruiting') read as marketing copy,
not a research group. Cut from index.html, _data/hero.yml, and
home.css. Hero now ends at PI + department + location + CTAs,
flowing straight into the Currently strip.
Three issues fixed in one audit: 1. Hero wordmark 'CoMPhy Lab' was invisible on dark. The light-mode gradient stops (#68236d, #2d1b69) are dark-on-dark. Added dark-mode-specific stops — pink #ff9388, lifted purple #cf75d3, periwinkle #8eaaff, soft violet #7864cc — that all read against warm-black paper. 2. --c-paper at #12100d felt terminal-harsh. Lifted the whole dark surface ramp to softer charcoal (#1b1814, #241f18, #2b251d), tracking closer to GitHub/Notion/VSCode dark while keeping the warm hue. Surface separation now visible between paper → tint → strong. 3. Borders bumped from 0.08 → 0.14 alpha (and 0.18 → 0.22 for strong) so cards and dividers register visually instead of dissolving into the background. Specificity fix: bridge.css used `[data-theme="dark"]` while tokens.css uses `:root[data-theme="dark"]` — tokens was winning despite bridge loading later. Bumped every bridge selector to the `:root[data-theme="dark"]` form so overrides actually apply.
Hero bottom padding (96 px) + first section top padding (96 px) compounded into a 192 px dead zone between the CTAs and the Currently strip. Hero bottom drops to 16 px, and `.hero + .home-section` gets a scoped 32 px top override. Total visual gap now ~48 px — breathes without wasting a screen.
Project finished April 2026. Short bio — 'Finished his MPhys project on Bretherton drops and bubbles in April 2026 — the first undergraduate researcher at the Durham location.' Thesis link to be added later.
…/alumni Bringing back the 16 collaborators that got dropped when the original markdown list was condensed into the initial _data/team.yml (the initial pass picked 7 'principal' names as a summary, which lost real signal). Full list restored: - Kept from the original: Lohse, Snoeijer, Krug, Jalaal, Kolinski, Zaleski, McKinley, Vollmer - Restored: Sen, Marin, Diddens, Constante-Amores, Cimpeanu, Feng, Matar, Dasgupta, Lauga, Datta, Chantelot, Bashkatov, Bertin, Oratis, Balasubramanian, Zinelis Also drops photo slots on collaborators + alumni — the initials avatars read as noise when we don't have consistent headshots for either group. Alumni are defined by their project, not their face. Tiles compact to a 240 px min-width grid (4 columns at desktop), with a 4-line bio clamp instead of 3 so the denser tiles can carry more substance.
Pairs every alumnus with their thesis — coral PDF icon + italic
title — and adds back the five alumni that got lost in the
initial YAML condense:
Niels Kuipers, Twan Heijink, Steven Meuleman,
Coen Verschuur, Dr. Pim J. Dekker
Data model: new `thesis: { title, href }` field per alumnus.
Template renders a `.t-member__thesis` anchor between the bio
and the social-icon row; omitted when the thesis isn't ready
(currently just Peter Croxford, who just finished his MPhys
project in April 2026).
15 alumni now, 14 with thesis links.
Durham, Physics of Fluids, and Basilisk marks were reading as small icons next to the 'PARTNERS & AFFILIATIONS' label — 50 % larger now so they carry proper weight in the footer.
- Durham: two assets, swap by theme. Light theme loads Durham-University.png (dark wordmark on paper); dark theme loads Durham-University-white.png. Controlled via `.logo-light-only` / `.logo-dark-only` classes. - Basilisk: drops the `.basilisk-bed` padded-white-card wrapper that used to sit behind it in dark mode. The transparent PNG reads fine on both paper + dark paper directly. - PoF: unchanged — single `LogoPof_transparent_white.png` + `.invert-on-light` filter, which silently handles both themes because the asset is a clean white-on-transparent silhouette.
Partners: 48 → 72 px so they visibly occupy the space between the two horizontal rules that bound the strip. CoMPhy brand mark on the footer-left: 32 → 56 px so the group's own mark registers as prominently as the partner marks it sits opposite to.
Use a direct mechanism-first sentence for the homepage research preview.
Keep the hero tagline short, make research and join-page descriptions more direct, update related search snippets, and link the footer maintainer credits.
Stop the bridge layer from removing the bottom border on shared pill buttons while still suppressing legacy link underlines.
Make teaching and course layouts inherit the shared default chrome, restyle teaching content with v2 tokens, remove page-local scripts, preserve anchors, and refresh affected search snippets.
Maintained elsewhere to avoid drift between in-repo copies and the canonical source.
Commit ec0d33f removed the in-repo .agents/skills/ mirror (canonical copies live elsewhere), but scripts/validate-content-rules.sh still required SKILL.md files at those paths, breaking content-rules CI. Drop those checks; keep CLAUDE.md/README.md <tags> guards intact.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 49 out of 58 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+184
to
+188
| {% if n.kind == "paper" %} | ||
| <div class="news-item__thumb"> | ||
| {% if n.thumb %}<img src="{{ n.thumb }}" alt="" loading="lazy" decoding="async" onerror="this.style.display='none'" />{% endif %} | ||
| </div> | ||
| <div id="news-content" class="s-about__desc" data-animate-el> | ||
| <!-- News content will be loaded here --> | ||
| {% else %} |
There was a problem hiding this comment.
Inline onerror handlers on <img> rely on unsafe-inline and will be blocked if the site ever adds a stricter CSP. Consider removing the inline handler and handling broken thumbnails via CSS/JS (e.g., hide the entire thumb container when the image fails to load).
Comment on lines
+35
to
+38
| {% if n.kind == "paper" %} | ||
| <div class="news-item__thumb"> | ||
| {% if n.thumb %}<img src="{{ n.thumb }}" alt="" loading="lazy" decoding="async" onerror="this.style.display='none'" />{% endif %} | ||
| </div> |
There was a problem hiding this comment.
Inline onerror handlers on <img> rely on unsafe-inline and will be blocked if the site ever adds a stricter CSP. Consider removing the inline handler and handling broken thumbnails via CSS/JS (e.g., hide the entire thumb container when the image fails to load).
Comment on lines
+68
to
+76
| <style> | ||
| .news-page { | ||
| width: min(100% - 2rem, var(--maxw-page)); | ||
| margin: 0 auto; | ||
| padding: var(--s-9) 0 var(--s-8); | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
| .news-page__head { |
There was a problem hiding this comment.
news/index.md inlines a large CSS block that duplicates the existing .news-item styles already present in assets/css/home.css (e.g., assets/css/home.css:649+). This duplication increases maintenance cost; consider extracting the archive-specific rules to a dedicated stylesheet (e.g., assets/css/news-v2.css) and reusing the shared .news-item rules from the existing CSS instead of re-defining them inline.
Comment on lines
+1
to
+6
| /* ============================================================= | ||
| CoMPhy Lab · Team page (v2) | ||
| Three sections — Present / Collaborators / Alumni — hard- | ||
| separated, with identical photo crop (1:1, --r-md) and | ||
| 2-sentence bio clamp. Driven by _data/team.yml. | ||
| ============================================================= */ |
There was a problem hiding this comment.
The header comment says “2-sentence bio clamp”, but the implementation clamps by line count (-webkit-line-clamp: 3). Consider updating the comment to match the actual behavior (or adjust the clamp if 2 lines is the intended constraint).
Comment on lines
+61
to
+62
| <a href="http://comphy-lab.org/VatsalSy">V. Sanjay</a> and | ||
| <a href="http://comphy-lab.org/comphy-bot">Worthy</a> |
There was a problem hiding this comment.
Footer links to internal pages use plain http://comphy-lab.org/.... When the site is served over HTTPS this can cause unnecessary redirects (or mixed-content warnings in some contexts). Prefer https:// (or relative links) for same-site URLs.
Suggested change
| <a href="http://comphy-lab.org/VatsalSy">V. Sanjay</a> and | |
| <a href="http://comphy-lab.org/comphy-bot">Worthy</a> | |
| <a href="/VatsalSy">V. Sanjay</a> and | |
| <a href="/comphy-bot">Worthy</a> |
Comment on lines
+1
to
+7
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="refresh" content="0;url=/#about"> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="refresh" content="0;url=/"> | ||
| <link rel="canonical" href="/"> | ||
| <title>Redirecting to CoMPhy Lab</title> |
There was a problem hiding this comment.
about.html is a plain static file, so it will only be served at /about.html. If you still want the canonical /about/ route (as in prior #85) to resolve, this needs Jekyll front matter with permalink: /about/ (and typically sitemap: false) or an about/index.html redirect instead; otherwise /about/ will remain a 404.
Comment on lines
+1
to
+13
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="refresh" content="0;url=/#about"> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="refresh" content="0;url=/"> | ||
| <link rel="canonical" href="/"> | ||
| <title>Redirecting to CoMPhy Lab</title> | ||
| </head> | ||
| <body> | ||
| <script>window.location.href = "/#about";</script> | ||
| <p>If you are not redirected automatically, please <a href="/#about">click here</a>.</p> | ||
| </body> No newline at end of file | ||
| <p>About has moved to the homepage. <a href="/">Go to CoMPhy Lab</a>.</p> | ||
| <script>window.location.replace("/");</script> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
The PR description says the about.html stub was removed, but the file still exists (now as a redirect). Either update the PR description to match, or remove/relocate this file if it’s no longer intended to be part of the site.
Pairs with the prior validator change. The trigger-parity check requires workflow paths to match the validated-file set, and the .agents/skills/ mirror is gone (commit ec0d33f), so trigger on the remaining files only.
- _includes/footer-v2.html: maintainer-credit links used http:// comphy-lab.org/... — switch to relative paths so HTTPS visitors don't bounce through an http→https redirect (and to avoid any mixed-content risk if a stricter CSP lands later). - assets/css/team-v2.css: header comment said "2-sentence bio clamp" but the implementation clamps by line count (3 for present, 4 for collaborators, unset for alumni). Update the comment to match the actual behaviour.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 50 out of 59 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+61
to
+62
| <a href="/VatsalSy">V. Sanjay</a> and | ||
| <a href="/comphy-bot">Worthy</a> |
There was a problem hiding this comment.
These look like internal links (/VatsalSy, /comphy-bot), but there are no pages in the repo providing those routes. As-is, they’ll 404 in the footer. Point them at real destinations (e.g., external GitHub profile, /team/#vatsal-sanjay, or create pages with those permalinks).
Suggested change
| <a href="/VatsalSy">V. Sanjay</a> and | |
| <a href="/comphy-bot">Worthy</a> | |
| <a href="https://www.durham.ac.uk/staff/vatsal-sanjay/" target="_blank" rel="noopener noreferrer">V. Sanjay</a> and | |
| <a href="https://github.com/comphy-lab" target="_blank" rel="noopener noreferrer">Worthy</a> |
Comment on lines
+3
to
+4
| title: "News & announcements" | ||
| permalink: /news/ |
There was a problem hiding this comment.
Front matter title contains an HTML entity (&). This can lead to inconsistent escaping (e.g., showing "News & announcements" in contexts that escape/encode titles). Prefer using the literal & in YAML ("News & announcements") and let the templates handle escaping.
Comment on lines
+68
to
+72
| <style> | ||
| .news-page { | ||
| width: min(100% - 2rem, var(--maxw-page)); | ||
| margin: 0 auto; | ||
| padding: var(--s-9) 0 var(--s-8); |
There was a problem hiding this comment.
The archive page’s CSS is embedded in a large inline <style> block. Elsewhere in this PR, v2 page styles live in dedicated files (e.g., assets/css/team-v2.css, assets/css/research-v2.css) and are conditionally included via the default layout. For maintainability/caching (and to keep stylelint coverage), move this block into something like assets/css/news-v2.css and include it based on page.body_class/layout, similar to the other v2 pages.
Comment on lines
+204
to
+208
| .news-page .news-item--people .news-item__body, | ||
| .news-page .news-item--move .news-item__body, | ||
| .news-page .news-item--award .news-item__body { | ||
| display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); align-items: start; | ||
| } |
There was a problem hiding this comment.
kind: talk items render the avatar variant (non-paper), but the CSS grid layout for avatar rows only targets people/move/award (.news-item--talk is missing). As a result, talk items will likely stack the avatar above the text instead of aligning it in a 2-column row. Include .news-item--talk in the same selector group so talk rows get the intended layout.
- Add .news-item--talk to the avatar-row grid selector group; kind: talk items render the avatar variant via the Liquid branch but were missing from the grid layout, so they were stacking instead of aligning in 2 columns. Three live talk entries in _data/news.yml were affected. - Strip the & entity from the front-matter title; YAML should hold the literal &, with templates handling escaping.
Production currently 404s on /about/ — the static about.html only serves at /about.html, so trailing-slash links and search-result URLs break. Add Jekyll front matter (layout: default, permalink: /about/, sitemap: false) so Jekyll emits about/index.html, the trailing-slash URL resolves, and the meta-refresh + JS redirect sends visitors to the landing page. Mirrors the contact.html redirect pattern already in the repo.
With layout: default, Jekyll wraps the body content in the default layout's <head>/<body>. The meta refresh and canonical link tags I added at the top of body would have rendered inside <body>, which is non-standard HTML. Match contact.html exactly: JS redirect + visible fallback link.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 50 out of 59 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
assets/js/main.js:33
loadAboutContent()still fetches/aboutCoMPhy.md, but that file is removed in this PR. While the v2 homepage no longer renders#about-content(so this is currently unreachable), this becomes a latent 404 if the container ever reappears (e.g., via a partial revert or reuse in another layout). Consider removing this legacy fetch path entirely, or updating it to use the new v2 data source instead of a deleted markdown file.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+8
to
+10
| <script> | ||
| // Immediately redirect to homepage without adding to browser history | ||
| window.location.replace("/"); |
There was a problem hiding this comment.
<meta http-equiv="refresh"> and <link rel="canonical"> are being rendered inside the page body because this file uses layout: default (the content is injected at {{ content }}). <meta> elements are not valid in <body> and some crawlers/browsers may ignore them. Prefer implementing this redirect in the layout <head> (e.g., a small redirect layout/include), or remove layout: default and serve a minimal HTML document where these tags live in <head>.
aboutCoMPhy.md was deleted in 9d40201 when the About nav was removed; loadAboutContent in main.js still fetched it (defensively gated on #about-content), and README.md still listed the file as tracked content. Strip the dead fetch path, the load listener, the test fixture div, and the README references.
AGENTS.md, CLAUDE.md, and README.md had drifted from the post-v2 codebase. Bring them back into alignment. - AGENTS.md becomes the canonical agent doc. Documents the v2 design system (tokens.css single source of truth, bridge.css legacy bridge, v2 page stylesheets), the data-driven pages (_data/hero.yml, news.yml, team.yml, research_themes.yml), the redirect pattern shared by about.html and contact.html, the content-rules CI workflow, and notes that /add-news and other slash skills live outside this repo. - CLAUDE.md becomes a thin '@AGENTS.md' shim — both files were near-duplicates and the drift was inevitable. - README.md: directory tree corrected (main.css was a phantom; styles.css is real, and the v2/legacy CSS layers are now both listed); _data/ added; v2 architecture explained in the CSS Architecture section; redirect pages documented as a pair; Theme Toggle section points at tokens.css; Scripts section adds check-ruby-toolchain.sh, validate-content-rules.sh, the trigger-parity check, and sync_org_profile_publications.py; GitHub Actions table updated to reflect all 10 workflows in use today; team-member workflow rewritten as the YAML data flow it actually is now.
The bullet-form note used a code span containing a trailing space
("`- `"), which markdownlint MD038 (no-space-in-code) rejects.
Reword to keep the literal example without the trailing-space code
span.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 52 out of 61 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The legacy --research-list-text chain in styles.css resolves to --color-secondary, which bridge.css remaps to --c-paper-tint -- invisible on dark paper. --c-brand-blue also lacks a dark override, leaving the Highlights heading dim. Override both in research-v2.css with theme-aware values.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Full implementation of the v2 design system handed off via Claude Design (
comphy-lab-design-system/bundle, now in.gitignore). Replaces the v1 site's brand-rainbow homepage, dark-slab footer, and gradient-Cormorant headings with a paper-on-ink scholarly aesthetic — matching the Red Team Audit recommendations.42 commits on the branch; below is the high-level grouping.
Type of Change
Changes Made
Foundation
assets/css/tokens.css— design-system source of truth (paper palette, four-stop hero gradient, Fraunces + IBM Plex Sans + IBM Plex Mono + Cormorant fonts, 4-px spacing, 28-px panel radius).assets/css/bridge.css— maps legacy--color-*/--font-*names onto the new tokens; runs a dark-mode audit pass (softer#1b1814paper, lifted gradient stops, brighter borders); pushes sitewide h1–h6 to Fraunces upright._includes/tokens-head.html,_includes/tokens-bridge.html— shared head chunks for standalone layouts.tokens.cssignored by stylelint + prettier (vendored from the design system).Footer
_includes/footer-v2.html,assets/css/footer-v2.css— paper-tint replaces dark slab; 4-column layout + partner strip; Durham logo swaps by theme; 72-px partner marks.Homepage (
/)src:(image),youtube:(iframe), andvideo:(native<video>); video-on-top + caption-strip layout when motion present._data/news.yml(Mar 2026 → May 2024) with thumbnails for 9 papers.Team page (
/team/)_data/team.yml: 5 present + 26 collaborators + 15 alumni.Around the world) with v2-styled legend, 16:9 paper-tint card, IntersectionObserver lazy-load.Research page (
/research/)default; prepends aCurrentlystrip + four-theme grid above the existing flat paper list.?tag=Sheets-style) restored — paper-container wrap + click + URL sync.News archive (
/news/)Command palette
command-data.jswith 30+ entries: papers (10), people (9), news (4), and quick actions (email PI, toggle theme, open Scholar / GitHub / Durham staff page).Standalone layouts
teaching,teaching-course,join-us,historyall load_includes/tokens-head.html+_includes/tokens-bridge.htmlso they pick up the new palette without rewrites.about.htmlstub, andaboutCoMPhy.mdremoved (the unique "Open Science" paragraph moved to/joinas a "How we work" section).Misc fixes
.gitignore: track.claude/launch.json(Jekyll dev-server config), exclude the design-system handoff bundle./news/; map legend reads "Places we've visited (no talk)".Testing Done
bundle exec jekyll buildand the Claude Code preview MCP onlocalhost:4210/,/team/,/research/,/news/,/teaching/,/join/,/history/all 200?tag=SheetsURL deep-link auto-applies on load (verified in preview)Screenshots
n/a here — every visual change was iterated against preview screenshots while building.
Related Issues
Closes #85 (About route fix superseded by removing the About entrypoint entirely).
Checklist
holey-sheets.pngre-saved 943 → 376 kB)Additional Notes
Big diff, lots of small commits. Each commit is intentionally focused (1 file → 1 concern → 1 commit) so reviewers can step through the migration commit-by-commit rather than face the full diff. Recommended order: foundation (tokens + bridge) → footer → homepage → team → research → news → palette → polish.
Old content preserved in git history.
aboutCoMPhy.md, the original_team/index.md, and the dark-slab_layouts/team.htmlare all recoverable viagit show e6e32f7:<path>.Design-system bundle is gitignored.
comphy-lab-design-system/is the Claude Design handoff bundle — kept on disk for reference, excluded from git + Jekyll build..claude/launch.jsonis now tracked so anyone using the Claude Code preview sidebar gets the same Jekyll port (4210). User-localsettings.local.jsonandplans/stay ignored.Future hero videos: author at 16:9, drop into
assets/videos/, point_data/hero.ymlat the path. Keynote's default export size matches the panel exactly.