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:
parent
d7c13d3c99
commit
1f95a6579d
3 changed files with 5 additions and 18 deletions
|
|
@ -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 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 closesDay = event ? fmt({ weekday: 'long' }, event.starts_at).toUpperCase() : '';
|
||||
|
||||
const visibleAttendees = attendees.slice(0, 3);
|
||||
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">
|
||||
<p class="hero-status">
|
||||
{event.capacity ? `${event.capacity} SEATS · ` : ''}{confirmedCount} CONFIRMED
|
||||
<span class="hero-status-divider" aria-hidden="true">|</span>
|
||||
CLOSES {closesDay}
|
||||
</p>
|
||||
|
||||
<form method="POST" class="hero-actions">
|
||||
|
|
@ -250,10 +247,6 @@ const overflow = Math.max(0, attendees.length - visibleAttendees.length);
|
|||
color: var(--on-ink-muted);
|
||||
margin: 0;
|
||||
}
|
||||
.hero-status-divider {
|
||||
color: var(--ink-divider);
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -134,23 +134,17 @@ const year = new Date().getFullYear();
|
|||
its baseline in Newsreader; this nudges it onto the visual midline. */
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.wordmark-project {
|
||||
.wordmark-project,
|
||||
.wordmark-bifrost {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5; /* enough room for italic 'B' ascender + the gradient's clip box */
|
||||
color: var(--on-surface);
|
||||
line-height: 1.4;
|
||||
letter-spacing: var(--tracking-snug);
|
||||
}
|
||||
.wordmark-project { color: var(--on-surface); }
|
||||
.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-weight: 400;
|
||||
line-height: 1;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
var(--pigment-terracotta) 0%,
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ const members = getAllCabMembers();
|
|||
|
||||
{featured.poll && (
|
||||
<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-status">
|
||||
{featured.poll.my_vote === null
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue