From 5a3f2bc0c5ff85eccf6f99c4fc88938bdeb631d7 Mon Sep 17 00:00:00 2001 From: Mischa Date: Thu, 18 Jun 2026 14:24:16 +0200 Subject: [PATCH] feat: apply design tokens to stats, map, mini-map; teal markers --- themes/intotheeast/css/style.css | 88 +++++++++++-------- themes/intotheeast/templates/map.html.twig | 8 +- themes/intotheeast/templates/stats.html.twig | 2 +- .../intotheeast/templates/tracker.html.twig | 4 +- 4 files changed, 60 insertions(+), 42 deletions(-) diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 501d79c..f11b9d9 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -347,12 +347,12 @@ body { .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.26); } -/* ── Map page ───────────────────────────────────────────────────────────────── */ +/* ── Map page ────────────────────────────────────────────────────────────────── */ .map-page .site-main { max-width: none; padding: 0; } .map-container { - height: calc(100vh - 61px); + height: calc(100vh - var(--site-header-height)); width: 100%; } @@ -361,72 +361,87 @@ body { align-items: center; justify-content: center; height: 100%; - color: #666; + color: var(--color-ink-muted); font-style: italic; } -/* ── Stats page ─────────────────────────────────────────────────────────────── */ +/* ── Stats page ──────────────────────────────────────────────────────────────── */ + +.stats-heading { + font-family: var(--font-display); + font-size: var(--text-2xl); + font-weight: 400; + margin-bottom: var(--space-8); + color: var(--color-ink); +} .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 1rem; - margin-bottom: 2rem; + gap: var(--space-4); + margin-bottom: var(--space-8); } .stat-block { - border: 1px solid #e5e5e5; - border-radius: 8px; - padding: 1.25rem 1rem; + background: var(--color-canvas); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-6) var(--space-5); text-align: center; - box-shadow: 0 1px 3px rgba(0,0,0,0.06); + box-shadow: var(--shadow-sm); } .stat-value { display: block; - font-size: 2.5rem; - font-weight: 700; - color: #0066cc; + font-family: var(--font-display); + font-size: var(--text-3xl); + font-weight: 400; + color: var(--color-accent); line-height: 1.1; - margin-bottom: 0.3rem; + margin-bottom: var(--space-2); } .stat-label { display: block; - font-size: 0.8rem; - color: #666; + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-ink-muted); text-transform: uppercase; - letter-spacing: 0.04em; + letter-spacing: 0.07em; } .stats-countries { - font-size: 0.9rem; - color: #444; + font-size: var(--text-sm); + color: var(--color-ink-2); text-align: center; - line-height: 1.8; + line-height: 1.9; } .stats-countries-label { font-weight: 600; display: block; - margin-bottom: 0.4rem; - color: #1a1a1a; + margin-bottom: var(--space-2); + color: var(--color-ink); + text-transform: uppercase; + font-size: var(--text-xs); + letter-spacing: 0.07em; } .stats-note { - font-size: 0.78rem; - color: #999; + font-size: var(--text-xs); + color: var(--color-ink-muted); text-align: center; - margin-top: 1.5rem; + margin-top: var(--space-6); } -/* ── Mini-map on tracker feed ───────────────────────────────────────────────── */ +/* ── Mini-map on tracker feed ────────────────────────────────────────────────── */ .feed-map-wrap { - margin-bottom: 2rem; - border-radius: 8px; + margin-bottom: var(--space-10); + border-radius: var(--radius-md); overflow: hidden; - border: 1px solid #e5e5e5; + border: 1px solid var(--color-border); + box-shadow: var(--shadow-sm); } .feed-map { @@ -435,20 +450,23 @@ body { } @media (min-width: 520px) { - .feed-map { height: 320px; } + .feed-map { height: 300px; } } .feed-map-link { display: block; text-align: right; - font-size: 0.8rem; - color: #0066cc; + font-size: var(--text-xs); + font-weight: 500; + color: var(--color-accent); text-decoration: none; - padding: 0.4rem 0.6rem; - background: #fafafa; - border-top: 1px solid #e5e5e5; + padding: var(--space-2) var(--space-4); + background: var(--color-paper); + border-top: 1px solid var(--color-border); } +.feed-map-link:hover { color: var(--color-accent-hover); } + /* ── Login form ─────────────────────────────────────────────────────────────── */ .login-form { max-width: 400px; margin: var(--space-8) auto; padding: 0 var(--space-4); } diff --git a/themes/intotheeast/templates/map.html.twig b/themes/intotheeast/templates/map.html.twig index 0eaa901..3342bf8 100644 --- a/themes/intotheeast/templates/map.html.twig +++ b/themes/intotheeast/templates/map.html.twig @@ -48,17 +48,17 @@ if (ENTRIES.length === 0) { var latLngs = ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; }); // Route polyline - L.polyline(latLngs, { color: '#0066cc', weight: 3, opacity: 0.7 }).addTo(map); + L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map); // Markers ENTRIES.forEach(function(entry, i) { var isLatest = (i === ENTRIES.length - 1); var size = isLatest ? 18 : 12; - var color = isLatest ? '#0044aa' : '#0066cc'; + var color = isLatest ? '#155244' : '#1F6B5A'; var icon = L.divIcon({ className: '', - html: '
', + html: '
', iconSize: [size, size], iconAnchor: [size/2, size/2], popupAnchor: [0, -(size/2 + 4)] @@ -70,7 +70,7 @@ if (ENTRIES.length === 0) { } popupContent += '
📅 ' + entry.date + '
'; popupContent += '
' + entry.title + '
'; - popupContent += 'Read entry →'; + popupContent += 'Read entry →'; popupContent += ''; L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon }) diff --git a/themes/intotheeast/templates/stats.html.twig b/themes/intotheeast/templates/stats.html.twig index ee0bf6f..5a4eb34 100644 --- a/themes/intotheeast/templates/stats.html.twig +++ b/themes/intotheeast/templates/stats.html.twig @@ -45,7 +45,7 @@ {% endfor %}
-

Trip Statistics

+

Trip Statistics

diff --git a/themes/intotheeast/templates/tracker.html.twig b/themes/intotheeast/templates/tracker.html.twig index 4f02bc2..7c61e17 100644 --- a/themes/intotheeast/templates/tracker.html.twig +++ b/themes/intotheeast/templates/tracker.html.twig @@ -35,13 +35,13 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { var latLngs = FEED_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; }); if (latLngs.length > 1) { - L.polyline(latLngs, { color: '#0066cc', weight: 3, opacity: 0.7 }).addTo(map); + L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map); } FEED_ENTRIES.forEach(function(entry, i) { var isLatest = (i === FEED_ENTRIES.length - 1); var size = isLatest ? 16 : 10; - var color = isLatest ? '#0044aa' : '#0066cc'; + var color = isLatest ? '#155244' : '#1F6B5A'; var icon = L.divIcon({ className: '', html: '
',