joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(dispatches): rename to "Dispatch", tonal rows, back-to-Pulse link

Browse source 
Retitle the page, rewrite the lead, give each row a subtle tonal background,
and add a back arrow to Pulse.
This commit is contained in:
Arlind 2026-06-18 16:05:09 +02:00
parent 436e19170e
commit ec24694a6d
1 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/pages/dispatches/index.astro
View file

@ -23,9 +23,16 @@ function fmt(iso: string): string {
<AppLayout title="Dispatches" user={user}> <AppLayout title="Dispatches" user={user}>
<div class="page"> <div class="page">
<a href="/pulse" class="back-link">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
<path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Pulse
</a>
<header class="head"> <header class="head">
<h1 class="head-title">Notes from the studio.</h1> <h1 class="head-title">Dispatch.</h1>
<p class="head-sub">Decisions, half-built ideas, and things we've changed our mind about.</p> <p class="head-sub">Where we share news from Fenja — progress, decisions, and what we're building next.</p>
</header> </header>
{dispatches.length === 0 ? ( {dispatches.length === 0 ? (
@ -75,6 +82,25 @@ function fmt(iso: string): string {
gap: var(--space-8); gap: var(--space-8);
} }
/* Back-to-Pulse link — a quiet arrow above the page title. */
.back-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
align-self: flex-start;
font-family: var(--font-sans);
font-size: var(--text-label-md);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--on-surface-variant);
text-decoration: none;
border-bottom: none;
transition: color var(--duration-fast) var(--ease-standard);
}
.back-link:hover { color: var(--pigment-terracotta); border-bottom: none; }
.back-link svg { transition: transform var(--duration-fast) var(--ease-standard); }
.back-link:hover svg { transform: translateX(-2px); }
.head { max-width: 46rem; } .head { max-width: 46rem; }
.head-eyebrow { .head-eyebrow {
letter-spacing: var(--tracking-wider); letter-spacing: var(--tracking-wider);
@ -94,23 +120,33 @@ function fmt(iso: string): string {
.head-sub { color: var(--on-surface-variant); margin-top: var(--space-3); max-width: 32rem; } .head-sub { color: var(--on-surface-variant); margin-top: var(--space-3); max-width: 32rem; }
.empty { color: var(--on-surface-muted); } .empty { color: var(--on-surface-muted); }
.d-list { list-style: none; padding: 0; margin: 0; } /* Rows are now standalone cards on a slight tonal background, separated by
.d-row { border-bottom: 0.5px solid var(--surface-card-border); } whitespace rather than borders (per design system). */
.d-row:last-child { border-bottom: none; } .d-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.d-row { border-bottom: none; }
.d-link { .d-link {
display: grid; display: grid;
grid-template-columns: 180px 1fr 130px; grid-template-columns: 180px 1fr 130px;
gap: var(--space-5); gap: var(--space-5);
padding: var(--space-5) var(--space-3); padding: var(--space-5) var(--space-5);
align-items: start; align-items: start;
text-decoration: none; text-decoration: none;
border-bottom: none; border-bottom: none;
color: inherit; color: inherit;
border-radius: var(--radius-md);
background: color-mix(in oklab, var(--surface-card) 55%, transparent);
transition: background var(--duration-fast) var(--ease-standard); transition: background var(--duration-fast) var(--ease-standard);
} }
.d-link:hover { .d-link:hover {
background: color-mix(in oklab, var(--surface-card) 60%, transparent); background: var(--surface-card);
border-bottom: none; border-bottom: none;
} }