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

refactor(roadmap): single centred header + dispatch banner below the route

Browse source 
Order on the page:
  1. Centred header — 48px serif 'Roadmap' h1, one merged subtitle that
     combines the original page lead ('A live picture of the work…')
     with both interaction hints (tap-or-hover, drag-or-scroll).
  2. <RoadmapRoute> — full-bleed track + right-edge advance arrow.
  3. Legend — centred in content column.
  4. <LatestDispatchBanner> — moved from above the route to below the
     legend. The dispatch becomes supplementary editorial that sits at
     the foot of the page; the route is the primary surface and now
     leads.

Banner spacing flipped: was margin-bottom 56px above the route, now
margin-top 64px below the legend.

The previous left-aligned 'What we are building.' top header and the
secondary centred 'Roadmap' route-intro block are both gone — merged
into one centred header at the top.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 15:27:29 +02:00
parent b2e0e8f518
commit 4009d5b711
1 changed files with 28 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/pages/roadmap.astro
View file

@ -12,31 +12,20 @@ const items = getAllRoadmapItems()
<AppLayout title="Roadmap" user={user}>
<article class="roadmap-page">
<!-- Page-level header — left-aligned, the page's editorial lead. -->
<header class="page-header">
<p class="page-eyebrow">Roadmap</p>
<h1 class="page-title">What we are building.</h1>
<p class="page-sub">
<!-- Single centred header — merges the page lead with the route's
interaction hints. -->
<header class="roadmap-header">
<h1 class="roadmap-title">Roadmap</h1>
<p class="roadmap-sub">
A live picture of the work. What's in motion, what's queued,
what we're still thinking about.
what we're still thinking about. Tap or hover any milestone
for the full story. Drag or scroll to move.
</p>
</header>
<LatestDispatchBanner />
<!-- Centred section intro for the route specifically. Sits between
the dispatch banner and the full-bleed route; carries the two
interaction hints (hover/tap + drag/scroll). -->
<section class="route-intro">
<h2 class="route-intro-title">Roadmap</h2>
<p class="route-intro-hint">
Tap or hover any milestone for the full story. Drag or scroll to move.
</p>
</section>
<RoadmapRoute items={items} />
<!-- Legend — final row, centred in content column. -->
<!-- Legend — final row inside content column. -->
<div class="roadmap-legend" aria-label="Status legend">
<span><i style="background:#6d8c7c"></i>Shipping</span>
<span><i style="background:#b96b58"></i>In beta</span>
@ -44,6 +33,11 @@ const items = getAllRoadmapItems()
<span><i style="background:#d4d2c8"></i>Considering</span>
</div>
<!-- Latest dispatch — moved below the route. The route is the page's
primary surface; the dispatch is supplementary editorial that
sits at the foot. -->
<LatestDispatchBanner />
</article>
</AppLayout>
@ -54,21 +48,14 @@ const items = getAllRoadmapItems()
margin: 0 auto;
}
/* ── Page header (left-aligned editorial lead) ────────────────── */
.page-header {
max-width: 540px;
margin-bottom: 36px;
/* ── Centred header ──────────────────────────────────────────── */
.roadmap-header {
text-align: center;
max-width: 640px;
margin: 0 auto 48px;
padding-top: 32px;
}
.page-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--on-surface-variant);
margin: 0 0 12px;
}
.page-title {
.roadmap-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 48px;
@ -77,38 +64,12 @@ const items = getAllRoadmapItems()
color: var(--on-surface);
margin: 0 0 14px;
}
.page-sub {
.roadmap-sub {
font-size: 14px;
line-height: 1.65;
color: var(--on-surface-variant);
margin: 0;
max-width: 480px;
}
.roadmap-page :global(.banner),
.roadmap-page :global(.rr-dispatch) { margin-bottom: 56px; }
/* ── Centred route intro ──────────────────────────────────────── */
.route-intro {
text-align: center;
max-width: 560px;
margin: 0 auto 28px;
}
.route-intro-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color: var(--on-surface);
margin: 0 0 10px;
}
.route-intro-hint {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: var(--tracking-wide);
color: var(--on-surface-variant);
margin: 0;
line-height: 1.5;
margin: 0 auto;
max-width: 520px;
}
/* ── Legend ───────────────────────────────────────────────────── */
@ -136,13 +97,13 @@ const items = getAllRoadmapItems()
flex-shrink: 0;
}
/* ── Dispatch banner (now below the route) ───────────────────── */
.roadmap-page :global(.rr-dispatch) { margin-top: 64px; }
@media (max-width: 767px) {
.roadmap-page { padding: 0 24px 64px; }
.page-header { padding-top: 24px; margin-bottom: 28px; }
.page-title { font-size: 36px; }
.roadmap-page :global(.banner),
.roadmap-page :global(.rr-dispatch) { margin-bottom: 40px; }
.route-intro { margin-bottom: 22px; }
.route-intro-title { font-size: 19px; }
.roadmap-header { padding-top: 24px; margin-bottom: 32px; }
.roadmap-title { font-size: 36px; }
.roadmap-page :global(.rr-dispatch) { margin-top: 48px; }
}
</style>