diff --git a/src/components/LatestDispatchBanner.astro b/src/components/LatestDispatchBanner.astro
index ed74b37..227b6c2 100644
--- a/src/components/LatestDispatchBanner.astro
+++ b/src/components/LatestDispatchBanner.astro
@@ -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 : '';
-
{latest.title}
+
+ {latest.title}
+
+ {dispatchKindLabel(latest.kind)}
+
+
{excerpt}
@@ -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 {