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-hero {
-.entry-header .entry-date { margin-bottom: 0.3rem; }
+    width: 100%;
-.entry-header .entry-location { margin-bottom: 0.2rem; display: block; }
+    max-height: 480px;
-.entry-header .entry-weather { margin-bottom: 0.75rem; }
+    overflow: hidden;
-.entry .entry-title { font-size: 1.8rem; margin-top: 0.5rem; }
+    margin-bottom: var(--space-8);
-.entry-body { margin-bottom: 2rem; }
+    border-radius: var(--radius-md);
-.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; }
 
-/* ── 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;
+    gap: 3px;
-    margin-bottom: 2rem;
+    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-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 ───────────────────────────────────────────────────────────────── */
 

themes/intotheeast/templates/entry.html.twig

@@ -7,12 +7,25 @@
     '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 %}
+
 <article class="entry">
+    {% if hero %}
+    <div class="entry-hero">
+        <img src="{{ hero.cropResize(1440, 720).url }}" alt="{{ page.title }}" loading="eager">
+    </div>
+    {% endif %}
+
     <header class="entry-header">
+        <div class="entry-header-meta">
             <time class="entry-date" datetime="{{ page.date|date('Y-m-d') }}">
                 {{ page.date|date('l, d F Y') }}
             </time>
-
             {% if page.header.location_city or page.header.location_country %}
             <p class="entry-location">
                 📍
@@ -21,7 +34,6 @@
                 {% if page.header.location_country %}{{ page.header.location_country }}{% endif %}
             </p>
             {% endif %}
-
             {% if page.header.weather_desc or page.header.weather_temp_c %}
             <p class="entry-weather">
                 {% if page.header.weather_desc %}
@@ -32,8 +44,10 @@
                 {% endif %}
             </p>
             {% endif %}
+        </div>
 
         <h1 class="entry-title">{{ page.title }}</h1>
+        <div class="entry-title-rule"></div>
     </header>
 
     <div class="entry-body">