diff --git a/_layouts/default.html b/_layouts/default.html index 625ba6b..dc4b0ef 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -83,6 +83,9 @@ {% if page.url == "/" %} {% endif %} + {% if page.body_class contains "news-v2" %} + + {% endif %} {% if page.layout == "research" or page.body_class contains "research-v2" %} {% endif %} diff --git a/assets/css/bridge.css b/assets/css/bridge.css index a01f8ba..88cf623 100644 --- a/assets/css/bridge.css +++ b/assets/css/bridge.css @@ -273,24 +273,28 @@ h6 { color: var(--fg-2); } -/* --- 8. News-row primitive (shared with /news archive) ------ */ -.news-row { +/* --- 8. News-row primitive (home feed and /news archive) ---- */ +.newsfeed { display: grid; - grid-template-columns: 90px 1fr auto; - gap: var(--s-4); - align-items: start; - padding: var(--s-4) 0; - border-bottom: 1px solid var(--c-border); + gap: 0; + border-top: 1px solid var(--c-border); } -.news-row:last-child { - border-bottom: 0; +.news-row { + display: grid; + grid-template-columns: auto auto minmax(0, 1fr); + column-gap: var(--s-4); + row-gap: var(--s-3); + align-items: center; + padding: var(--s-5) 0; + border-bottom: 1px solid var(--c-border); } .news-row__date { display: grid; + width: 100%; text-align: center; - padding: var(--s-2); + padding: var(--s-3) var(--s-2); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-brand-purple) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-brand-purple) 15%, transparent); @@ -298,38 +302,153 @@ h6 { .news-row__day { font-family: var(--t-serif); - font-size: 26px; - font-weight: 700; + font-size: var(--t-h1); + font-weight: var(--t-weight-bold); color: var(--c-brand-purple); line-height: 1; + letter-spacing: var(--t-track-tight); + font-variation-settings: "opsz" 48; } :root[data-theme="dark"] .news-row__day { - color: #d99adc; + color: var(--hero-grad-2); } .news-row__mo { - font-size: 11px; + font-family: var(--t-mono); + font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--t-track-wide); color: var(--fg-2); - margin-top: 4px; + margin-top: var(--s-2); +} + +.news-row__body { + display: contents; +} + +.news-row__copy { + min-width: 0; } .news-row__kicker { + display: inline-flex; + align-items: center; + gap: var(--s-2); + margin-bottom: var(--s-2); + font-family: var(--t-sans); font-size: var(--t-eyebrow); - font-weight: var(--t-weight-semi); - color: var(--c-brand-blue); + font-weight: var(--t-weight-bold); letter-spacing: var(--t-track-wide); text-transform: uppercase; - margin-bottom: 4px; + color: var(--fg-2); } -.news-row__body p { - font-size: var(--t-body); - line-height: 1.55; - color: var(--fg-1); +.news-row__kicker .swatch { + width: var(--s-2); + height: var(--s-2); + border-radius: var(--r-pill); +} + +.news-row[data-kind="paper"] .swatch { + background: var(--c-brand-purple); +} + +.news-row[data-kind="talk"] .swatch { + background: var(--c-accent-coral); +} + +.news-row[data-kind="people"] .swatch, +.news-row[data-kind="move"] .swatch, +.news-row[data-kind="award"] .swatch { + background: var(--c-accent-teal); +} + +.news-row__title { + margin: 0 0 var(--s-2); + padding: 0; + max-width: 58ch; + font-family: var(--t-serif); + font-size: var(--t-body-lg); + font-weight: var(--t-weight-semi); + line-height: 1.35; + letter-spacing: var(--t-track-tight); + color: var(--fg-strong); + font-variation-settings: "opsz" 24; +} + +.news-row__meta { margin: 0; + max-width: var(--maxw-read); + font-size: var(--t-small); + line-height: 1.5; + color: var(--fg-2); +} + +.news-row__meta em { + font-family: var(--t-serif); + font-variation-settings: "opsz" 14; +} + +.news-row__meta strong { + font-weight: var(--t-weight-semi); + color: var(--c-accent-coral-text); +} + +.news-row__copy, +.news-row__action { + grid-column: 1 / -1; + align-self: start; +} + +.news-row__action { + justify-self: start; +} + +.news-row__thumb { + width: var(--s-9); + aspect-ratio: 5 / 6; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: var(--r-xs); + background: linear-gradient( + 135deg, + var(--c-brand-purple), + var(--c-brand-blue) + ); +} + +.news-row__thumb img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.news-row__avatar { + width: var(--s-8); + height: var(--s-8); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: var(--r-pill); + background: linear-gradient( + 145deg, + var(--c-accent-teal), + var(--c-brand-purple) + ); + color: var(--c-accent-teal-fg); + font-family: var(--t-serif); + font-size: var(--t-h3); + font-weight: var(--t-weight-semi); + letter-spacing: var(--t-track-tight); +} + +:root[data-theme="dark"] .news-row__avatar { + color: var(--fg-strong); } /* --- 9. Paper-card primitive (for per-paper lists) ---------- */ @@ -436,15 +555,34 @@ h6 { } @media (max-width: 820px) { + .paper-card { + grid-template-columns: 80px 1fr; + } +} + +/* Wider viewports keep the date, media, and action in one row. */ +@media (min-width: 761px) { .news-row { - grid-template-columns: 70px 1fr; + grid-template-columns: var(--s-9) minmax(0, 1fr) auto; + gap: var(--s-5); + align-items: start; } - .news-row > *:last-child { - grid-column: 1 / -1; + .news-row__body { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: var(--s-4); + align-items: start; + min-width: 0; } - .paper-card { - grid-template-columns: 80px 1fr; + .news-row__copy, + .news-row__action { + grid-column: auto; + } + + .news-row__action { + align-self: center; + justify-self: auto; } } diff --git a/assets/css/home.css b/assets/css/home.css index 600846f..f7f77c2 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -112,7 +112,7 @@ body.home-v2 #featured-wrapper { font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.015em; - color: var(--hero-grad-2); /* solid fallback; clip+fill applied only when supported */ + color: var(--hero-grad-2); /* solid fallback before the clip */ margin: 0 0 var(--s-3); display: inline-block; } @@ -733,193 +733,7 @@ body.home-v2 #featured-wrapper { } /* ========================================================= - 5. NEWS feed — three kinds - ========================================================= */ -.newsfeed { - display: grid; - gap: 0; - border-top: 1px solid var(--c-border); -} - -.news-item { - display: grid; - grid-template-columns: 90px 1fr auto; - gap: var(--s-5); - padding: var(--s-5) 0; - border-bottom: 1px solid var(--c-border); - align-items: start; -} - -.news-item__date { - display: grid; - text-align: center; - padding: var(--s-3) var(--s-2); - background: color-mix(in srgb, var(--c-brand-purple) 6%, transparent); - border: 1px solid color-mix(in srgb, var(--c-brand-purple) 15%, transparent); - border-radius: var(--r-sm); -} - -.news-item__day { - font-family: var(--t-serif); - font-weight: 700; - font-size: 30px; - line-height: 1; - color: var(--c-brand-purple); - letter-spacing: -0.02em; - font-variation-settings: "opsz" 48; -} - -[data-theme="dark"] .news-item__day { - color: #d99adc; -} - -.news-item__mo { - font-family: var(--t-mono); - font-size: 10px; - text-transform: uppercase; - letter-spacing: var(--t-track-wide); - color: var(--fg-2); - margin-top: 6px; -} - -.news-item__kicker { - display: inline-flex; - align-items: center; - gap: 6px; - font-family: var(--t-sans); - font-size: var(--t-eyebrow); - font-weight: 700; - letter-spacing: var(--t-track-wide); - text-transform: uppercase; - color: var(--fg-2); - margin-bottom: 6px; -} - -.news-item__kicker .swatch { - width: 8px; - height: 8px; - border-radius: 2px; -} - -.news-item[data-kind="paper"] .swatch { - background: var(--c-brand-purple); -} - -.news-item[data-kind="talk"] .swatch { - background: var(--c-accent-coral); -} - -.news-item[data-kind="people"] .swatch, -.news-item[data-kind="move"] .swatch, -.news-item[data-kind="award"] .swatch { - background: var(--c-accent-teal); -} - -.news-item__title { - font-family: var(--t-serif); - font-weight: 600; - font-size: var(--t-body-lg); - line-height: 1.35; - color: var(--fg-strong); - margin: 0 0 var(--s-2); - letter-spacing: -0.005em; - max-width: 58ch; - font-variation-settings: "opsz" 24; -} - -.news-item__meta { - font-size: var(--t-small); - color: var(--fg-2); - line-height: 1.5; - margin: 0; - max-width: 68ch; -} - -.news-item__meta em { - font-family: var(--t-serif); - font-variation-settings: "opsz" 14; -} - -.news-item__meta strong { - color: var(--c-accent-coral); - font-weight: 600; -} - -.news-item__action { - align-self: center; -} - -.news-item--paper .news-item__body { - display: grid; - grid-template-columns: 88px 1fr; - gap: var(--s-4); -} - -.news-item__thumb { - width: 88px; - height: 104px; - border-radius: var(--r-xs); - overflow: hidden; - background: linear-gradient( - 135deg, - var(--c-brand-purple), - var(--c-brand-blue) - ); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.news-item__thumb img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.news-item--people .news-item__body, -.news-item--move .news-item__body, -.news-item--award .news-item__body { - display: grid; - grid-template-columns: 56px 1fr; - gap: var(--s-4); - align-items: start; -} - -.news-item__avatar { - width: 56px; - height: 56px; - border-radius: 50%; - background: linear-gradient( - 145deg, - var(--c-accent-teal), - var(--c-brand-purple) - ); - display: flex; - align-items: center; - justify-content: center; - color: #fff; - font-family: var(--t-serif); - font-weight: 600; - font-size: 20px; - letter-spacing: -0.02em; - flex-shrink: 0; -} - -@media (max-width: 760px) { - .news-item { - grid-template-columns: 70px 1fr; - } - - .news-item__action { - grid-column: 1 / -1; - justify-self: start; - margin-top: var(--s-2); - } -} - -/* ========================================================= - 6. TEAM preview (6 tiles) + 5. TEAM preview (6 tiles) ========================================================= */ .team-preview { display: grid; @@ -1041,7 +855,7 @@ body.home-v2 #featured-wrapper { } /* ========================================================= - 7. Closing CTA (mini panel linking to /research) + 6. Closing CTA (mini panel linking to /research) ========================================================= */ .closing-cta { margin-top: var(--s-7); diff --git a/assets/css/news-v2.css b/assets/css/news-v2.css new file mode 100644 index 0000000..fd3cf00 --- /dev/null +++ b/assets/css/news-v2.css @@ -0,0 +1,57 @@ +/* News archive chrome. Rows come from bridge.css .news-row. */ + +.news-page { + position: relative; + z-index: 1; + width: min(100% - var(--s-6), var(--maxw-page)); + margin: 0 auto; + padding: var(--s-9) 0 var(--s-8); +} + +.news-page__head { + max-width: var(--maxw-read); + margin: 0 auto var(--s-8); + text-align: center; +} + +.news-page__kicker { + display: inline-flex; + align-items: center; + gap: var(--s-3); + margin-bottom: var(--s-4); + font-family: var(--t-sans); + font-size: var(--t-eyebrow); + font-weight: var(--t-weight-semi); + letter-spacing: var(--t-track-wide); + text-transform: uppercase; + color: var(--fg-2); +} + +.news-page__rule { + width: var(--s-6); + height: 0; + border-top: 1px solid var(--c-border-strong); +} + +.news-page__title { + margin: 0 0 var(--s-4); + font-family: var(--t-serif); + font-size: var(--t-h1); + font-weight: var(--t-weight-semi); + line-height: 1.1; + letter-spacing: var(--t-track-tight); + color: var(--fg-strong); + text-wrap: balance; + font-variation-settings: "opsz" 96; +} + +.news-page__lede { + max-width: 60ch; + margin: 0 auto; + font-family: var(--t-serif); + font-size: var(--t-body-lg); + font-weight: var(--t-weight-reg); + line-height: 1.55; + color: var(--fg-1); + font-variation-settings: "opsz" 18; +} diff --git a/assets/js/command-data.js b/assets/js/command-data.js index 3858a57..d71924a 100644 --- a/assets/js/command-data.js +++ b/assets/js/command-data.js @@ -20,7 +20,7 @@ window.location.href = "/"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "team", @@ -29,7 +29,7 @@ window.location.href = "/team/"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "research", @@ -38,7 +38,7 @@ window.location.href = "/research"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "projects", @@ -47,7 +47,7 @@ window.location.href = "/projects/"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "talks", @@ -56,7 +56,7 @@ window.location.href = "/talks/"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "teaching", @@ -65,7 +65,7 @@ window.location.href = "/teaching"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "join", @@ -74,7 +74,7 @@ window.location.href = "/join"; }, section: "Navigation", - icon: "", + icon: '', }, { id: "blog", @@ -84,7 +84,7 @@ }, section: "Navigation", - icon: "", + icon: '', }, { id: "back", @@ -93,7 +93,7 @@ window.history.back(); }, section: "Navigation", - icon: "", + icon: '', }, { id: "forward", @@ -102,7 +102,7 @@ window.history.forward(); }, section: "Navigation", - icon: "", + icon: '', }, // External links @@ -114,7 +114,7 @@ }, section: "External Links", - icon: "", + icon: '', }, { id: "scholar", @@ -126,7 +126,7 @@ }, section: "External Links", - icon: "", + icon: '', }, { id: "youtube", @@ -136,7 +136,7 @@ }, section: "External Links", - icon: "", + icon: '', }, { id: "bluesky", @@ -146,7 +146,7 @@ }, section: "External Links", - icon: "", + icon: '', }, // Tools @@ -157,7 +157,7 @@ window.scrollTo({ top: 0, behavior: "smooth" }); }, section: "Tools", - icon: "", + icon: '', }, { id: "bottom", @@ -170,7 +170,7 @@ }, section: "Tools", - icon: "", + icon: '', }, // Help commands @@ -178,13 +178,11 @@ id: "repository", title: "View Website Repository", handler: () => { - openExternalUrl( - "https://github.com/comphy-lab/comphy-lab.github.io" - ); + openExternalUrl("https://github.com/comphy-lab/comphy-lab.github.io"); }, section: "Help", - icon: "", + icon: '', }, // ========================================================== @@ -197,7 +195,7 @@ window.location.href = "mailto:vatsal.sanjay@durham.ac.uk"; }, section: "Actions", - icon: "", + icon: '', }, { id: "action-toggle-theme", @@ -207,7 +205,7 @@ if (toggle) toggle.click(); }, section: "Actions", - icon: "", + icon: '', }, { id: "action-open-scholar", @@ -218,7 +216,7 @@ ); }, section: "Actions", - icon: "", + icon: '', }, { id: "action-open-github", @@ -227,7 +225,7 @@ openExternalUrl("https://github.com/comphy-lab"); }, section: "Actions", - icon: "", + icon: '', }, { id: "action-durham-staff", @@ -236,7 +234,7 @@ openExternalUrl("https://www.durham.ac.uk/staff/vatsal-sanjay/"); }, section: "Actions", - icon: "", + icon: '', }, // ========================================================== @@ -245,30 +243,33 @@ // ========================================================== { id: "paper-impacting-spheres", - title: "Impacting spheres: from liquid drops to elastic beads (Soft Matter 2026, cover)", + title: + "Impacting spheres: from liquid drops to elastic beads (Soft Matter 2026, cover)", handler: () => { window.location.href = "/research#23"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-holes-sheets", - title: "Holes in Sheets: double-threshold rupture of draining films (PRL 2026)", + title: + "Holes in Sheets: double-threshold rupture of draining films (PRL 2026)", handler: () => { window.location.href = "/research#22"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-stood-up-drop", - title: "Stood-up Drop to Determine Receding Contact Angles (Soft Matter 2026)", + title: + "Stood-up Drop to Determine Receding Contact Angles (Soft Matter 2026)", handler: () => { window.location.href = "/research#21"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-viscoelastic-worthington", @@ -277,7 +278,7 @@ window.location.href = "/research#16"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-unifying-scaling", @@ -286,16 +287,17 @@ window.location.href = "/research#15"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-viscosity-impact", - title: "Role of viscosity on drop impact forces on non-wetting surfaces (JFM 2025)", + title: + "Role of viscosity on drop impact forces on non-wetting surfaces (JFM 2025)", handler: () => { window.location.href = "/research#14"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-evp-bubble", @@ -304,7 +306,7 @@ window.location.href = "/research#12"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-bouncing-drop", @@ -313,16 +315,17 @@ window.location.href = "/research#11"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-taylor-culick", - title: "Taylor–Culick retractions and the influence of the surroundings (JFM 2022)", + title: + "Taylor–Culick retractions and the influence of the surroundings (JFM 2022)", handler: () => { window.location.href = "/research#9"; }, section: "Papers", - icon: "", + icon: '', }, { id: "paper-viscoplastic-bubble", @@ -331,7 +334,7 @@ window.location.href = "/research#7"; }, section: "Papers", - icon: "", + icon: '', }, // ========================================================== @@ -344,7 +347,7 @@ window.location.href = "/team/#vatsal-sanjay"; }, section: "People", - icon: "", + icon: '', }, { id: "person-ayush-dixit", @@ -353,7 +356,7 @@ window.location.href = "/team/#ayush-dixit"; }, section: "People", - icon: "", + icon: '', }, { id: "person-aman-bhargava", @@ -362,7 +365,7 @@ window.location.href = "/team/#aman-bhargava"; }, section: "People", - icon: "", + icon: '', }, { id: "person-jnandeep-talukdar", @@ -371,7 +374,7 @@ window.location.href = "/team/#jnandeep-talukdar"; }, section: "People", - icon: "", + icon: '', }, { id: "person-saumili-jana", @@ -380,7 +383,7 @@ window.location.href = "/team/#saumili-jana"; }, section: "People", - icon: "", + icon: '', }, { id: "person-peter-croxford", @@ -389,7 +392,7 @@ window.location.href = "/team/#peter-croxford"; }, section: "People", - icon: "", + icon: '', }, { id: "person-detlef-lohse", @@ -398,7 +401,7 @@ window.location.href = "/team/#prof-detlef-lohse"; }, section: "People", - icon: "", + icon: '', }, { id: "person-jacco-snoeijer", @@ -407,7 +410,7 @@ window.location.href = "/team/#prof-jacco-snoeijer"; }, section: "People", - icon: "", + icon: '', }, { id: "person-john-kolinski", @@ -416,7 +419,7 @@ window.location.href = "/team/#dr-john-kolinski"; }, section: "People", - icon: "", + icon: '', }, // ========================================================== @@ -429,7 +432,7 @@ window.location.href = "/news/"; }, section: "News", - icon: "", + icon: '', }, { id: "news-khmw-award", @@ -438,7 +441,7 @@ window.location.href = "/news/"; }, section: "News", - icon: "", + icon: '', }, { id: "news-aps-talk", @@ -447,7 +450,7 @@ openExternalUrl("https://www.youtube.com/watch?v=uFP5K9i8ah8"); }, section: "News", - icon: "", + icon: '', }, { id: "news-archive", @@ -456,7 +459,7 @@ window.location.href = "/news/"; }, section: "News", - icon: "", + icon: '', }, ]; @@ -478,16 +481,16 @@ sections[command.section].push(command); }); - let html = "

Commands

"; + let html = '

Commands

'; const shortcutKey = Utils.isMacPlatform() ? "⌘K" : "Ctrl+K"; html += `

Press ${shortcutKey} to open the command palette

`; // Add each section and its commands Object.keys(sections).forEach((section) => { html += `

${section}

`; - html += ""; + html += '
'; html += - ""; + ''; sections[section].forEach((command) => { html += ` @@ -500,7 +503,7 @@ // Add close button html += - "
"; + '
'; // Create modal using shared utility const modal = Utils.createModal({ @@ -613,7 +616,7 @@ document.body.appendChild(modal); // Get content element for focus and event handling - const content = modal.querySelector("div[tabindex=\"-1\"]"); + const content = modal.querySelector('div[tabindex="-1"]'); // Get all tag buttons const tagButtons = content.querySelectorAll(".tag-filter-btn"); @@ -722,7 +725,7 @@ content.focus(); }, section: "Page Actions", - icon: "", + icon: '', }, ]; } @@ -736,7 +739,7 @@ window.location.href = "/join"; }, section: "Page Actions", - icon: "", + icon: '', }, ]; } @@ -753,7 +756,7 @@ } }, section: "Page Actions", - icon: "", + icon: '', }, ]; } diff --git a/index.html b/index.html index 8b6f962..1f3b9cf 100644 --- a/index.html +++ b/index.html @@ -171,22 +171,22 @@

What's happening in the lab

{% for n in sorted_news limit:5 %} {% assign d = n.date | date: "%-d" %} {% assign mo = n.date | date: "%b %y" %} -
-
- {{ d }} - {{ mo }} +
+
+ {{ d }} + {{ mo }}
-
+
{% if n.kind == "paper" %} -
+
{% if n.thumb %}{% endif %}
{% else %} -
{{ n.avatar | default: "·" }}
+
{{ n.avatar | default: "·" }}
{% endif %} -
-
+
+
{% case n.kind %} {% when "paper" %}Paper @@ -196,12 +196,12 @@

What's happening in the lab

{% when "award" %}Award {% endcase %}
-

{{ n.title }}

-

{{ n.meta }}

+

{{ n.title }}

+

{{ n.meta }}

- {{ n.action_label }} diff --git a/news/index.md b/news/index.md index 049328b..20b900b 100644 --- a/news/index.md +++ b/news/index.md @@ -13,9 +13,9 @@ description: >-

- + CoMPhy Lab · News archive - +

News & announcements

Papers, talks, arrivals, and awards.

@@ -25,22 +25,22 @@ description: >- {% for n in news_items %} {% assign d = n.date | date: "%-d" %} {% assign mo = n.date | date: "%b %y" %} -
-
- {{ d }} - {{ mo }} +
+
+ {{ d }} + {{ mo }}
-
+
{% if n.kind == "paper" %} -
+
{% if n.thumb %}{% endif %}
{% else %} -
{{ n.avatar | default: "·" }}
+
{{ n.avatar | default: "·" }}
{% endif %} -
-
+
+
{% case n.kind %} {% when "paper" %}Paper @@ -51,12 +51,12 @@ description: >- {% else %}Update {% endcase %}
-

{{ n.title }}

-

{{ n.meta }}

+

{{ n.title }}

+

{{ n.meta }}

- {{ n.action_label }} @@ -68,160 +68,3 @@ description: >- {% endfor %}
- -
Command
Command