From c5d9c9296824b325466f983cbea39a9dce2b8a59 Mon Sep 17 00:00:00 2001 From: Mischa Date: Thu, 18 Jun 2026 14:22:05 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20single=20entry=20page=20?= =?UTF-8?q?=E2=80=94=20hero=20image,=20display=20typography,=20rule=20sepa?= =?UTF-8?q?rator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/intotheeast/css/style.css | 103 ++++++++++++++----- themes/intotheeast/templates/entry.html.twig | 56 ++++++---- 2 files changed, 112 insertions(+), 47 deletions(-) diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 3b323ac..04a57f7 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -198,26 +198,79 @@ body { color: var(--color-ink-2); } -/* ── Single entry ───────────────────────────────────────────────────────────── */ +/* ── Single entry ────────────────────────────────────────────────────────────── */ -.entry-header { margin-bottom: 1.5rem; } -.entry-header .entry-date { margin-bottom: 0.3rem; } -.entry-header .entry-location { margin-bottom: 0.2rem; display: block; } -.entry-header .entry-weather { margin-bottom: 0.75rem; } -.entry .entry-title { font-size: 1.8rem; margin-top: 0.5rem; } -.entry-body { margin-bottom: 2rem; } -.entry-body p { margin-bottom: 1em; } -.entry-body img { max-width: 100%; height: auto; border-radius: 4px; } -.entry-footer { border-top: 1px solid #e5e5e5; padding-top: 1rem; } -.entry-footer a { color: #0066cc; text-decoration: none; font-size: 0.9rem; } +.entry-hero { + width: 100%; + max-height: 480px; + overflow: hidden; + margin-bottom: var(--space-8); + border-radius: var(--radius-md); +} -/* ── Photo gallery ──────────────────────────────────────────────────────────── */ +.entry-hero img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.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.1em; 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: 4px; - margin-bottom: 2rem; + gap: 3px; + margin-bottom: var(--space-10); + border-radius: var(--radius-md); + overflow: hidden; } @media (min-width: 520px) { @@ -232,7 +285,6 @@ body { display: block; aspect-ratio: 1; overflow: hidden; - border-radius: 4px; } .gallery-thumb img { @@ -244,16 +296,16 @@ body { } .gallery-thumb:hover img, -.gallery-thumb:focus img { opacity: 0.85; } +.gallery-thumb:focus img { opacity: 0.82; } -.gallery-thumb:focus { outline: 2px solid #0066cc; outline-offset: 2px; } +.gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } -/* ── Lightbox ───────────────────────────────────────────────────────────────── */ +/* ── Lightbox ────────────────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; - background: rgba(0,0,0,0.92); + background: rgba(0,0,0,0.94); z-index: 1000; display: flex; align-items: center; @@ -266,7 +318,7 @@ body { max-width: 92vw; max-height: 90vh; object-fit: contain; - border-radius: 4px; + border-radius: var(--radius-sm); display: block; } @@ -274,7 +326,7 @@ body { .lightbox-prev, .lightbox-next { position: absolute; - background: rgba(255,255,255,0.15); + background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer; @@ -285,16 +337,15 @@ body { display: flex; align-items: center; justify-content: center; - line-height: 1; + transition: background 0.15s; } .lightbox-close { top: 1rem; right: 1rem; } -.lightbox-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); } -.lightbox-next { right: 0.75rem; top: 50%; transform: translateY(-50%); } - +.lightbox-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); } +.lightbox-next { right: 0.75rem; top: 50%; transform: translateY(-50%); } .lightbox-close:hover, .lightbox-prev:hover, -.lightbox-next:hover { background: rgba(255,255,255,0.28); } +.lightbox-next:hover { background: rgba(255,255,255,0.26); } /* ── Map page ───────────────────────────────────────────────────────────────── */ diff --git a/themes/intotheeast/templates/entry.html.twig b/themes/intotheeast/templates/entry.html.twig index 605419d..7529b8c 100644 --- a/themes/intotheeast/templates/entry.html.twig +++ b/themes/intotheeast/templates/entry.html.twig @@ -7,33 +7,47 @@ 'Snow': '❄️', 'Thunderstorm': '⛈️' } %} +{% set hero = null %} +{% if page.header.hero_image and page.media[page.header.hero_image] is defined %} + {% set hero = page.media[page.header.hero_image] %} +{% elseif page.media.images|length > 0 %} + {% set hero = page.media.images|first %} +{% endif %} +
+ {% if hero %} +
+ {{ page.title }} +
+ {% endif %} +
- - - {% if page.header.location_city or page.header.location_country %} -

- 📍 - {% if page.header.location_city %}{{ page.header.location_city }}{% endif %} - {% if page.header.location_city and page.header.location_country %}, {% endif %} - {% if page.header.location_country %}{{ page.header.location_country }}{% endif %} -

- {% endif %} - - {% if page.header.weather_desc or page.header.weather_temp_c %} -

- {% if page.header.weather_desc %} - {{ weather_icons[page.header.weather_desc] ?? '🌡️' }} {{ page.header.weather_desc }} +

+ + {% if page.header.location_city or page.header.location_country %} +

+ 📍 + {% if page.header.location_city %}{{ page.header.location_city }}{% endif %} + {% if page.header.location_city and page.header.location_country %}, {% endif %} + {% if page.header.location_country %}{{ page.header.location_country }}{% endif %} +

{% endif %} - {% if page.header.weather_temp_c %} - · {{ page.header.weather_temp_c|round }}°C + {% if page.header.weather_desc or page.header.weather_temp_c %} +

+ {% if page.header.weather_desc %} + {{ weather_icons[page.header.weather_desc] ?? '🌡️' }} {{ page.header.weather_desc }} + {% endif %} + {% if page.header.weather_temp_c %} + · {{ page.header.weather_temp_c|round }}°C + {% endif %} +

{% endif %} -

- {% endif %} +

{{ page.title }}

+