diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index b35cdf9..16376cc 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -693,6 +693,50 @@ body::after { color: var(--color-ink-muted); } +/* ── Trip page filter bar ────────────────────────────────────────────────────── */ + +.trip-filter-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-3); + margin-top: var(--space-4); + flex-wrap: wrap; +} + +.trip-filter-group { + display: flex; + gap: var(--space-2); + flex-wrap: wrap; +} + +.trip-filter-btn, +.trip-stats-btn { + font-family: var(--font-ui); + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-ink-muted); + background: transparent; + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: var(--space-1) var(--space-4); + cursor: pointer; + transition: color 0.15s, border-color 0.15s, background 0.15s; +} + +.trip-filter-btn:hover, +.trip-stats-btn:hover { + color: var(--color-ink); + border-color: var(--color-ink-muted); +} + +.trip-filter-btn.is-active, +.trip-stats-btn.is-active { + color: var(--color-accent); + border-color: var(--color-accent); + background: var(--color-accent-light); +} + @media (max-width: 768px) { .home-layout { display: flex; flex-direction: column; } .home-map-col { position: static; height: 40vh; align-self: stretch; } diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index 6fa1b59..b10f1a3 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/themes/intotheeast/templates/trip.html.twig @@ -55,11 +55,14 @@ {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }} {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %} - +
+
+ + + +
+ +