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

fix(roadmap): restore original top header + add centred route-intro below banner

Browse source 
The previous pass replaced the top page header with a single centred
'Roadmap' block — that was wrong. The intent was: keep the original
left-aligned editorial lead at the very top of the page, and insert a
new smaller centred section between the dispatch banner and the route
that carries the interaction hints.

Top of page (restored):
  Roadmap            ← 11px tracked eyebrow
  What we are building.   ← 48px serif h1, left-aligned, max-width 540
  A live picture of the work…   ← 14px subtitle, no hover-hint copy

Between LatestDispatchBanner and RoadmapRoute (new):
  Roadmap            ← 22px serif title, centred
  Tap or hover any milestone for the full story. Drag or scroll to move.
                     ← 12px tracked muted hint, centred

The hover/tap hint moves out of the top subtitle and into the route-
intro block, where the drag/scroll hint joins it. Both interaction
modalities sit together right above the surface they describe — closer
to where the reader needs them.

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

71
src/pages/roadmap.astro
View file

@ -12,22 +12,31 @@ const items = getAllRoadmapItems()
<AppLayout title="Roadmap" user={user}>
<article class="roadmap-page">
<header class="roadmap-header">
<p class="roadmap-eyebrow">Roadmap</p>
<h1 class="roadmap-title">Roadmap</h1>
<p class="roadmap-subtitle">
<!-- 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">
A live picture of the work. What's in motion, what's queued,
what we're still thinking about. Tap or hover any milestone
for the full story.
what we're still thinking about.
</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 lives outside the route component so it can return to
centred content-column width while the route goes full-bleed. -->
<!-- Legend — final row, centred in 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>
@ -45,14 +54,13 @@ const items = getAllRoadmapItems()
margin: 0 auto;
}
/* ── Centred page header ──────────────────────────────────────── */
.roadmap-header {
text-align: center;
max-width: 640px;
margin: 0 auto 48px;
/* ── Page header (left-aligned editorial lead) ────────────────── */
.page-header {
max-width: 540px;
margin-bottom: 36px;
padding-top: 32px;
}
.roadmap-eyebrow {
.page-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.4px;
@ -60,7 +68,7 @@ const items = getAllRoadmapItems()
color: var(--on-surface-variant);
margin: 0 0 12px;
}
.roadmap-title {
.page-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 48px;
@ -69,17 +77,40 @@ const items = getAllRoadmapItems()
color: var(--on-surface);
margin: 0 0 14px;
}
.roadmap-subtitle {
.page-sub {
font-size: 14px;
line-height: 1.65;
color: var(--on-surface-variant);
margin: 0 auto;
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;
}
/* ── Legend ───────────────────────────────────────────────────── */
.roadmap-legend {
display: flex;
@ -107,9 +138,11 @@ const items = getAllRoadmapItems()
@media (max-width: 767px) {
.roadmap-page { padding: 0 24px 64px; }
.roadmap-header { padding-top: 24px; margin-bottom: 32px; }
.roadmap-title { font-size: 36px; }
.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; }
}
</style>