style: equalise wordmark heights, drop event 'closes' line, rename pulse eyebrow

Three small tweaks:

- AppLayout wordmark: 'Project' and 'Bifrost' now share font-size 18 +
  line-height 1.4 + tracking-snug via a combined selector. The previous
  asymmetry (Bifrost had display: inline-block + padding 4/0/2 +
  line-height: 1 to lift the gradient-clip box for the italic ascender)
  was visibly making Bifrost render slightly off-height vs Project. With
  parent line-height 1.4 the gradient-clip bbox is tall enough on its
  own; padding hack removed.
- EventHeroCard footer status line drops the ' | CLOSES TUESDAY'
  trailer. The line now reads simply '{capacity} SEATS · {n} CONFIRMED'.
  closesDay variable and .hero-status-divider style both gone.
- /pulse pulse-col eyebrow: 'This week's' → 'Pulse Vote'. Matches the
  more direct labelling everywhere else.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 14:59:30 +02:00
parent d7c13d3c99
commit 1f95a6579d
3 changed files with 5 additions and 18 deletions

View file

@ -24,7 +24,6 @@ const dayPadded = event ? String(parseUtc(event.starts_at).getUTCDate()).padSt
const weekday = event ? fmt({ weekday: 'long' }, event.starts_at).toUpperCase() : ''; const weekday = event ? fmt({ weekday: 'long' }, event.starts_at).toUpperCase() : '';
const monthShort = event ? fmt({ month: 'short' }, event.starts_at).toUpperCase() : ''; const monthShort = event ? fmt({ month: 'short' }, event.starts_at).toUpperCase() : '';
const startTime = event ? fmt({ hour: '2-digit', minute: '2-digit', hour12: false }, event.starts_at) : ''; const startTime = event ? fmt({ hour: '2-digit', minute: '2-digit', hour12: false }, event.starts_at) : '';
const closesDay = event ? fmt({ weekday: 'long' }, event.starts_at).toUpperCase() : '';
const visibleAttendees = attendees.slice(0, 3); const visibleAttendees = attendees.slice(0, 3);
const overflow = Math.max(0, attendees.length - visibleAttendees.length); const overflow = Math.max(0, attendees.length - visibleAttendees.length);
@ -72,8 +71,6 @@ const overflow = Math.max(0, attendees.length - visibleAttendees.length);
<footer class="hero-foot"> <footer class="hero-foot">
<p class="hero-status"> <p class="hero-status">
{event.capacity ? `${event.capacity} SEATS · ` : ''}{confirmedCount} CONFIRMED {event.capacity ? `${event.capacity} SEATS · ` : ''}{confirmedCount} CONFIRMED
<span class="hero-status-divider" aria-hidden="true">|</span>
CLOSES {closesDay}
</p> </p>
<form method="POST" class="hero-actions"> <form method="POST" class="hero-actions">
@ -250,10 +247,6 @@ const overflow = Math.max(0, attendees.length - visibleAttendees.length);
color: var(--on-ink-muted); color: var(--on-ink-muted);
margin: 0; margin: 0;
} }
.hero-status-divider {
color: var(--ink-divider);
margin: 0 10px;
}
.hero-actions { .hero-actions {
display: flex; display: flex;

View file

@ -134,23 +134,17 @@ const year = new Date().getFullYear();
its baseline in Newsreader; this nudges it onto the visual midline. */ its baseline in Newsreader; this nudges it onto the visual midline. */
transform: translateY(-2px); transform: translateY(-2px);
} }
.wordmark-project { .wordmark-project,
.wordmark-bifrost {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 1.5; /* enough room for italic 'B' ascender + the gradient's clip box */ line-height: 1.4;
color: var(--on-surface);
letter-spacing: var(--tracking-snug); letter-spacing: var(--tracking-snug);
} }
.wordmark-project { color: var(--on-surface); }
.wordmark-bifrost { .wordmark-bifrost {
/* display: inline-block + padding lifts the gradient-clip bounding
box above the italic 'B' ascender so the cap doesn't render cut off. */
display: inline-block;
padding: 4px 0 2px;
font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-weight: 400;
line-height: 1;
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
var(--pigment-terracotta) 0%, var(--pigment-terracotta) 0%,

View file

@ -181,7 +181,7 @@ const members = getAllCabMembers();
{featured.poll && ( {featured.poll && (
<aside class="pulse-col" aria-label="This week's pulse"> <aside class="pulse-col" aria-label="This week's pulse">
<p class="pulse-eyebrow"><span class="pulse-eyebrow-dot" aria-hidden="true"></span>This week's</p> <p class="pulse-eyebrow"><span class="pulse-eyebrow-dot" aria-hidden="true"></span>Pulse Vote</p>
<p class="pulse-question">{featured.poll.question}</p> <p class="pulse-question">{featured.poll.question}</p>
<p class="pulse-status"> <p class="pulse-status">
{featured.poll.my_vote === null {featured.poll.my_vote === null