fix: use 2-column grid for normal mode on large screens
Change from 4-column to 2-column grid in the @media (min-width: 1200px) block for body.normal, giving each departure card ~580px width on 1080p monitors. Also add font-size increases for destination text (1.1em), countdown numbers (1.4em), and next departures (0.9em) to improve readability at the wider card size. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -101,7 +101,7 @@ body {
|
||||
|
||||
body.normal .departure-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
@@ -127,6 +127,18 @@ body {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.normal .direction-destination {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
body.normal .countdown-large {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
body.normal .next-departures {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
|
||||
Reference in New Issue
Block a user