style(banner): give the dispatch banner room to read as an invitation

Three changes to <LatestDispatchBanner>:

- Padding: 22/26 → 28/26 — extra top weight stops the eyebrow + title
  feeling stuck to the card edge.
- Excerpt: the previous nowrap + text-overflow: ellipsis clamp was
  truncating mid-sentence. Replaced with -webkit-line-clamp: 2 so a
  real sentence (and a half) renders. line-height 1.55, font-size
  bumped 12 → 13 to match the longer reading rhythm.
- Kind pill next to the title, same pattern as the home-page dispatch
  byline pill: 9px tracked uppercase, 2/8 padding, 3px radius, kind-
  pigment-tinted background at 10% opacity. Wraps below the title on
  narrow widths via flex-wrap on .b-title-row.

Banner margin-bottom (set on /roadmap.astro) stays at 56px for now;
the spec's reduction to 40px is conditional on the In motion strip
landing, which is the commit after next.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 11:54:59 +02:00
parent 1a169f3ac6
commit 33a21735e6

View file

@ -3,6 +3,7 @@ import Avatar from './Avatar.astro';
import { getLatestPublishedDispatches } from '../lib/db';
import {
dispatchSlug, dispatchExcerptParas, relativeTime,
dispatchKindLabel, dispatchKindPigment,
} from '../lib/format';
const [latest] = getLatestPublishedDispatches(1);
@ -21,7 +22,12 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
</div>
<div class="b-mid">
<span class="b-title">{latest.title}</span>
<div class="b-title-row">
<span class="b-title">{latest.title}</span>
<span class="b-kind-pill" style={`--pill: ${dispatchKindPigment(latest.kind)}`}>
{dispatchKindLabel(latest.kind)}
</span>
</div>
<span class="b-excerpt">{excerpt}</span>
</div>
@ -38,7 +44,7 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
padding: 22px 26px;
padding: 28px 26px 26px;
background: var(--surface-card);
border: 0.5px solid var(--surface-card-border);
border-radius: 12px;
@ -70,19 +76,39 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
white-space: nowrap;
}
.b-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.b-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b-title-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.b-title {
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.3;
color: var(--on-surface);
}
.b-excerpt {
font-size: 12px;
color: var(--on-surface-variant);
.b-kind-pill {
background: color-mix(in oklab, var(--pill) 10%, transparent);
color: var(--pill);
padding: 2px 8px;
border-radius: 3px;
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: var(--tracking-wider);
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
}
.b-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
line-height: 1.55;
color: var(--on-surface-variant);
}
.b-right {