style(roadmap): more air title→legend, tighter legend→route

Pair the legend visually with the route by widening the gap above it
and narrowing the gap below.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 15:31:41 +02:00
parent 407e7bc378
commit 0ea7e3fd96

View file

@ -53,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 28px; /* tightened — legend sits right under */ margin: 0 auto 56px; /* generous gap to the legend */
padding-top: 32px; padding-top: 32px;
} }
.roadmap-title { .roadmap-title {
@ -78,7 +78,7 @@ const items = getAllRoadmapItems()
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
margin: 0 auto 32px; /* legend → route */ margin: 0 auto 14px; /* tight to the route — they're paired */
flex-wrap: wrap; flex-wrap: wrap;
} }
.roadmap-legend span { .roadmap-legend span {
@ -103,9 +103,9 @@ const items = getAllRoadmapItems()
@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: 20px; } .roadmap-header { padding-top: 24px; margin-bottom: 40px; }
.roadmap-title { font-size: 36px; } .roadmap-title { font-size: 36px; }
.roadmap-legend { margin-bottom: 24px; } .roadmap-legend { margin-bottom: 12px; }
.roadmap-page :global(.rr-dispatch) { margin-top: 72px; } .roadmap-page :global(.rr-dispatch) { margin-top: 72px; }
} }
</style> </style>