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:
parent
407e7bc378
commit
0ea7e3fd96
1 changed files with 4 additions and 4 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue