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

refactor(roadmap): move legend above the route + breathe room before banner

Browse source 
Legend swaps position with the route. Old order: header → route →
legend → banner. New order: header → legend → route → banner.

The legend now reads as a key the eye picks up before walking the
path, instead of an after-the-fact reveal of what the colours meant.

Spacing tuned to match the new rhythm:
  header → legend: 28px (header.margin-bottom)
  legend → route:  32px (legend.margin-bottom; was 28px top margin)
  route → banner:  112px (banner.margin-top; was 64px)

The 112px before the dispatch banner gives the route room to land
visually before the editorial block at the foot starts. Mobile gets
72px instead of 112px since the page is more compressed there.

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

28
src/pages/roadmap.astro
View file

@ -23,9 +23,8 @@ const items = getAllRoadmapItems()
</p> </p>
</header> </header>
<RoadmapRoute items={items} /> <!-- Legend lives above the route now — reads as a key the eye picks
up just before walking the path. -->
<!-- Legend — final row inside content column. -->
<div class="roadmap-legend" aria-label="Status legend"> <div class="roadmap-legend" aria-label="Status legend">
<span><i style="background:#6d8c7c"></i>Shipping</span> <span><i style="background:#6d8c7c"></i>Shipping</span>
<span><i style="background:#b96b58"></i>In beta</span> <span><i style="background:#b96b58"></i>In beta</span>
@ -33,9 +32,11 @@ const items = getAllRoadmapItems()
<span><i style="background:#d4d2c8"></i>Considering</span> <span><i style="background:#d4d2c8"></i>Considering</span>
</div> </div>
<!-- Latest dispatch — moved below the route. The route is the page's <RoadmapRoute items={items} />
primary surface; the dispatch is supplementary editorial that
sits at the foot. --> <!-- Latest dispatch sits at the foot of the page with generous
space above so it reads as a separate beat, not a continuation
of the route. -->
<LatestDispatchBanner /> <LatestDispatchBanner />
</article> </article>
@ -52,7 +53,7 @@ const items = getAllRoadmapItems()
.roadmap-header { .roadmap-header {
text-align: center; text-align: center;
max-width: 640px; max-width: 640px;
margin: 0 auto 48px; margin: 0 auto 28px; /* tightened — legend sits right under */
padding-top: 32px; padding-top: 32px;
} }
.roadmap-title { .roadmap-title {
@ -72,12 +73,12 @@ const items = getAllRoadmapItems()
max-width: 520px; max-width: 520px;
} }
/* ── Legend ───────────────────────────────────────────────────── */ /* ── Legend (above the route, key-style) ─────────────────────── */
.roadmap-legend { .roadmap-legend {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
margin-top: 28px; margin: 0 auto 32px; /* legend → route */
flex-wrap: wrap; flex-wrap: wrap;
} }
.roadmap-legend span { .roadmap-legend span {
@ -97,13 +98,14 @@ const items = getAllRoadmapItems()
flex-shrink: 0; flex-shrink: 0;
} }
/* ── Dispatch banner (now below the route) ───────────────────── */ /* ── Dispatch banner (foot of page, generous breathing room) ── */
.roadmap-page :global(.rr-dispatch) { margin-top: 64px; } .roadmap-page :global(.rr-dispatch) { margin-top: 112px; }
@media (max-width: 767px) { @media (max-width: 767px) {
.roadmap-page { padding: 0 24px 64px; } .roadmap-page { padding: 0 24px 64px; }
.roadmap-header { padding-top: 24px; margin-bottom: 32px; } .roadmap-header { padding-top: 24px; margin-bottom: 20px; }
.roadmap-title { font-size: 36px; } .roadmap-title { font-size: 36px; }
.roadmap-page :global(.rr-dispatch) { margin-top: 48px; } .roadmap-legend { margin-bottom: 24px; }
.roadmap-page :global(.rr-dispatch) { margin-top: 72px; }
} }
</style> </style>