From b017d2ff6429c2bbca3276345450f95a50b36f86 Mon Sep 17 00:00:00 2001 From: Mischa Date: Wed, 24 Jun 2026 23:59:11 +0200 Subject: [PATCH] fix: weather icon case mismatch + pin/weather icon alignment - Lowercase all weather_icons map keys to match stored entry values ('sunny', 'partly cloudy', etc.); add |lower filter as safety net - Remove vertical-align hack from location pin SVG - Add display:inline-flex + align-items:center to .journal-post-location and .journal-post-weather so icons and text share a true center axis --- themes/intotheeast/css/style.css | 196 +++++++----------- .../partials/entry-journal.html.twig | 20 +- 2 files changed, 84 insertions(+), 132 deletions(-) diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index b1a8395..500164c 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -42,18 +42,28 @@ body::after { padding: 0 var(--space-5); height: var(--site-header-height); background: var(--color-canvas); - border-top: 3px solid var(--color-accent); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } +.site-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)); + pointer-events: none; +} + .site-title { font-family: var(--font-display); - font-size: var(--text-lg); + font-size: var(--text-xl); font-weight: 400; - letter-spacing: -0.01em; + letter-spacing: 0.06em; text-decoration: none; color: var(--color-ink); line-height: 1; @@ -140,21 +150,6 @@ body::after { .entry-card:hover .entry-title { color: var(--color-accent); } -/* Location & weather badges (single entry page) */ - -.entry-location { - font-size: var(--text-sm); - color: var(--color-ink-2); - display: inline-flex; - align-items: center; - gap: var(--space-1); -} - -.entry-weather { - font-size: var(--text-sm); - color: var(--color-ink-2); -} - @keyframes card-highlight { 0% { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); } 100% { background-color: transparent; } @@ -203,6 +198,9 @@ body::after { .journal-post-location, .journal-post-weather { color: var(--color-ink-muted); + display: inline-flex; + align-items: center; + gap: var(--space-1); } .journal-photo-wrap { @@ -346,21 +344,6 @@ body::after { /* ── Single entry ────────────────────────────────────────────────────────────── */ -.entry-hero { - width: 100%; - max-height: 480px; - overflow: hidden; - margin-bottom: var(--space-8); - border-radius: var(--radius-md); -} - -.entry-hero img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} - .entry-back-fixed { position: fixed; top: calc(var(--site-header-height) + var(--space-3)); @@ -368,91 +351,10 @@ body::after { z-index: 100; } -.entry-header { margin-bottom: var(--space-8); } - -.entry-header-meta { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-3); - margin-bottom: var(--space-4); -} - -.entry-header .entry-date { - font-size: var(--text-sm); - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--color-ink-muted); - display: inline; - margin-bottom: 0; -} - -.entry .entry-title { - font-family: var(--font-display); - font-size: var(--text-2xl); - font-weight: 400; - line-height: var(--leading-snug); - color: var(--color-ink); - margin-bottom: var(--space-4); -} - -@media (min-width: 520px) { - .entry .entry-title { font-size: var(--text-3xl); } -} - -.entry-title-rule { - height: 1px; - background: var(--color-border); - margin-bottom: var(--space-8); -} - -.entry-body { margin-bottom: var(--space-10); } -.entry-body p { margin-bottom: 1.4em; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-2); } -.entry-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } - .entry-footer { border-top: 1px solid var(--color-border); padding-top: var(--space-5); } .entry-footer a { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); font-weight: 500; } .entry-footer a:hover { color: var(--color-accent-hover); } -/* ── Photo gallery ───────────────────────────────────────────────────────────── */ - -.entry-gallery { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 3px; - margin-bottom: var(--space-10); - border-radius: var(--radius-md); - overflow: hidden; -} - -@media (min-width: 520px) { - .entry-gallery { grid-template-columns: repeat(3, 1fr); } -} - -.gallery-thumb { - background: none; - border: none; - padding: 0; - cursor: pointer; - display: block; - aspect-ratio: 1; - overflow: hidden; -} - -.gallery-thumb img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: opacity 0.15s; -} - -.gallery-thumb:hover img, -.gallery-thumb:focus img { opacity: 0.82; } - -.gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } - /* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */ .pswp__bg { background: #000; } @@ -593,12 +495,9 @@ body::after { } .stat-block { - 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: var(--shadow-sm); + border-left: 2px solid var(--color-accent); + padding: var(--space-2) 0 var(--space-2) var(--space-4); + text-align: left; } .stat-value { @@ -606,7 +505,7 @@ body::after { font-family: var(--font-display); font-size: clamp(2rem, 6vw, var(--text-3xl)); font-weight: 400; - color: var(--color-accent); + color: var(--color-ink); line-height: 1.1; margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; @@ -1004,7 +903,7 @@ body::after { color: var(--color-ink-muted); background: transparent; border: 1px solid var(--color-border); - border-radius: var(--radius-full); + border-radius: var(--radius-sm); padding: var(--space-1) var(--space-4); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; @@ -1107,6 +1006,24 @@ body::after { background: var(--color-surface-raised); } +.trip-card-cover { + aspect-ratio: 3 / 1; + overflow: hidden; + border-radius: var(--radius-md) var(--radius-md) 0 0; + background: var(--color-border); + margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5); +} + +.trip-card-cover img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.45s ease; +} + +.trip-card:hover .trip-card-cover img { transform: scale(1.04); } + .trip-card-title { font-family: var(--font-display); font-size: var(--text-xl); @@ -1460,6 +1377,41 @@ body::after { text-decoration: none; } +/* ── Story progress bar ──────────────────────────────────── */ +.story-progress { + position: fixed; + top: var(--site-header-height); + left: 0; + height: 2px; + width: 0%; + background: var(--color-accent); + z-index: 200; + pointer-events: none; + will-change: width; +} + +/* ── Story opener (location + date eyebrow) ──────────────── */ +.story-opener { + text-align: center; + padding-bottom: var(--space-12); + margin-bottom: var(--space-12); + border-bottom: 1px solid var(--color-border); + opacity: 0; + animation: storyReveal 0.9s cubic-bezier(.16,1,.3,1) 0.8s both; +} + +.story-opener__text { + font-family: var(--font-ui); + font-size: var(--text-sm); + color: var(--color-ink-muted); + letter-spacing: 0.06em; + text-transform: uppercase; +} + +@media (prefers-reduced-motion: reduce) { + .story-opener { opacity: 1; animation: none; } +} + /* ── Story nav title (desktop: fades into header center) ─────── */ .story-nav-title { position: absolute; diff --git a/themes/intotheeast/templates/partials/entry-journal.html.twig b/themes/intotheeast/templates/partials/entry-journal.html.twig index 17de19e..c5826ef 100644 --- a/themes/intotheeast/templates/partials/entry-journal.html.twig +++ b/themes/intotheeast/templates/partials/entry-journal.html.twig @@ -1,12 +1,12 @@ {% set weather_icons = { - 'Sunny': '', - 'Partly cloudy': '', - 'Cloudy': '', - 'Foggy': '', - 'Drizzle': '', - 'Rain': '', - 'Snow': '', - 'Thunderstorm': '' + 'sunny': '', + 'partly cloudy': '', + 'cloudy': '', + 'foggy': '', + 'drizzle': '', + 'rain': '', + 'snow': '', + 'thunderstorm': '' } %}
@@ -17,7 +17,7 @@ {% if entry.header.location_city or entry.header.location_country %} - · + · {%- set _loc = [] -%} {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%} {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%} @@ -25,7 +25,7 @@ {% endif %} {% if entry.header.weather_desc %} - · {{ weather_icons[entry.header.weather_desc]|default('')|raw }} {{ entry.header.weather_desc }} + · {{ weather_icons[entry.header.weather_desc|lower]|default('')|raw }} {{ entry.header.weather_desc }} {% endif %}