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:
parent
1a169f3ac6
commit
33a21735e6
1 changed files with 33 additions and 7 deletions
|
|
@ -3,6 +3,7 @@ import Avatar from './Avatar.astro';
|
||||||
import { getLatestPublishedDispatches } from '../lib/db';
|
import { getLatestPublishedDispatches } from '../lib/db';
|
||||||
import {
|
import {
|
||||||
dispatchSlug, dispatchExcerptParas, relativeTime,
|
dispatchSlug, dispatchExcerptParas, relativeTime,
|
||||||
|
dispatchKindLabel, dispatchKindPigment,
|
||||||
} from '../lib/format';
|
} from '../lib/format';
|
||||||
|
|
||||||
const [latest] = getLatestPublishedDispatches(1);
|
const [latest] = getLatestPublishedDispatches(1);
|
||||||
|
|
@ -21,7 +22,12 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="b-mid">
|
<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>
|
<span class="b-excerpt">{excerpt}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -38,7 +44,7 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
|
||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 22px 26px;
|
padding: 28px 26px 26px;
|
||||||
background: var(--surface-card);
|
background: var(--surface-card);
|
||||||
border: 0.5px solid var(--surface-card-border);
|
border: 0.5px solid var(--surface-card-border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
@ -70,19 +76,39 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
|
||||||
white-space: nowrap;
|
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 {
|
.b-title {
|
||||||
font-family: var(--font-serif);
|
font-family: var(--font-serif);
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
color: var(--on-surface);
|
color: var(--on-surface);
|
||||||
}
|
}
|
||||||
.b-excerpt {
|
.b-kind-pill {
|
||||||
font-size: 12px;
|
background: color-mix(in oklab, var(--pill) 10%, transparent);
|
||||||
color: var(--on-surface-variant);
|
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;
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.b-excerpt {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
font-size: 13px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-right {
|
.b-right {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue