when-am-i / files / src / index.css
index.css
30b4cdad 2026-03-20 Pavel Safronov | 1 | @import 'leaflet/dist/leaflet.css'; |
| 2 | ||
edbab6ce 2026-03-20 Pavel Safronov | 3 | /* Add global styles here */ |
| 4 | body { | |
| 5 | margin: 0; | |
| 6 | font-family: system-ui, sans-serif; | |
| 7 | background: #f8f9fa; | |
4014e5e0 2026-06-18 Pavel Safronov | 8 | } |
| 9 | ||
f9fc6714 2026-06-21 Pavel Safronov | 10 | /* App shell + responsive two-column layout. On wide screens the map/controls and |
| 11 | the answers sit side by side so you don't have to scroll past the map to read | |
| 12 | the answers; on narrow screens they stack. */ | |
| 13 | .app { | |
| 14 | max-width: 1180px; | |
| 15 | margin: 0 auto; | |
| 16 | padding: 24px 20px 48px; | |
| 17 | } | |
| 18 | .app-cols { | |
| 19 | display: grid; | |
| 20 | grid-template-columns: 1fr; | |
| 21 | gap: 24px; | |
| 22 | align-items: start; | |
| 23 | } | |
| 24 | @media (min-width: 900px) { | |
| 25 | .app-cols { | |
| 26 | grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | |
| 27 | } | |
| 28 | /* Keep the answers visible while the (taller) answer list scrolls. */ | |
| 29 | .app-answers { | |
| 30 | position: sticky; | |
| 31 | top: 16px; | |
| 32 | max-height: calc(100vh - 32px); | |
| 33 | overflow-y: auto; | |
| 34 | } | |
| 35 | } | |
| 36 | .app-map { | |
| 37 | height: 380px; | |
| 38 | border-radius: 8px; | |
| 39 | overflow: hidden; | |
| 40 | border: 1px solid #e3e5e8; | |
| 41 | } | |
| 42 | ||
d1eb8ad5 2026-06-19 Pavel Safronov | 43 | /* Timeline sliders (day-of-year and year): a transparent-track range input with |
| 44 | a thin "playhead" thumb, laid over a track drawn behind it. Shared so both | |
| 45 | bars look identical and the thin thumb lines up with the ticks/bands. */ | |
| 46 | .timeline-slider { | |
4014e5e0 2026-06-18 Pavel Safronov | 47 | -webkit-appearance: none; |
| 48 | appearance: none; | |
d1eb8ad5 2026-06-19 Pavel Safronov | 49 | position: relative; |
| 50 | z-index: 1; | |
4014e5e0 2026-06-18 Pavel Safronov | 51 | width: 100%; |
| 52 | height: 28px; | |
| 53 | margin: 0; | |
| 54 | background: transparent; | |
| 55 | cursor: pointer; | |
| 56 | } | |
bedc0609 2026-06-23 Pavel Safronov | 57 | |
| 58 | /* Clickable year-axis labels: jump the date to that key year. Reset button | |
| 59 | chrome so they read as plain ticks, with a hover/focus cue that they're | |
| 60 | interactive. */ | |
| 61 | .year-tick { | |
| 62 | padding: 2px 1px; | |
| 63 | border: 0; | |
| 64 | background: none; | |
| 65 | font: inherit; | |
| 66 | color: inherit; | |
| 67 | line-height: 1; | |
| 68 | cursor: pointer; | |
| 69 | } | |
| 70 | .year-tick:hover, | |
| 71 | .year-tick:focus-visible { | |
| 72 | color: #1a1a1a; | |
| 73 | text-decoration: underline; | |
| 74 | } | |
d1eb8ad5 2026-06-19 Pavel Safronov | 75 | .timeline-slider::-webkit-slider-runnable-track { |
4014e5e0 2026-06-18 Pavel Safronov | 76 | height: 28px; |
| 77 | background: transparent; | |
| 78 | } | |
d1eb8ad5 2026-06-19 Pavel Safronov | 79 | .timeline-slider::-moz-range-track { |
4014e5e0 2026-06-18 Pavel Safronov | 80 | height: 28px; |
| 81 | background: transparent; | |
| 82 | } | |
d1eb8ad5 2026-06-19 Pavel Safronov | 83 | .timeline-slider::-webkit-slider-thumb { |
4014e5e0 2026-06-18 Pavel Safronov | 84 | -webkit-appearance: none; |
| 85 | appearance: none; | |
d1eb8ad5 2026-06-19 Pavel Safronov | 86 | width: 3px; |
4014e5e0 2026-06-18 Pavel Safronov | 87 | height: 36px; |
| 88 | margin-top: -4px; | |
| 89 | background: #1a1a1a; | |
| 90 | border: 1px solid #fff; | |
| 91 | border-radius: 2px; | |
| 92 | } | |
d1eb8ad5 2026-06-19 Pavel Safronov | 93 | .timeline-slider::-moz-range-thumb { |
| 94 | width: 3px; | |
4014e5e0 2026-06-18 Pavel Safronov | 95 | height: 36px; |
| 96 | background: #1a1a1a; | |
| 97 | border: 1px solid #fff; | |
| 98 | border-radius: 2px; | |
edbab6ce 2026-03-20 Pavel Safronov | 99 | } |