m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign entry feed cards with full-bleed photo + gradient overlay

Browse Source
This commit is contained in:
Mischa
2026-06-18 14:21:00 +02:00
parent c33dc2ca56
commit 521c678f1c
2 changed files with 143 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+105 -54
View File
@@ -73,78 +73,129 @@ body {
.site-nav a { padding: var(--space-2); font-size: 0.8rem; }
}
/* ── Feed ──────────────────────────────────────────────────────────────────── */
/* ── Feed ────────────────────────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 2rem; }
.feed { display: flex; flex-direction: column; gap: var(--space-12); }
.feed-empty { color: var(--color-ink-muted); font-style: italic; }
.entry-card {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 2rem;
}
.entry-card { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-12); }
.entry-date {
.entry-card-inner {
display: block;
font-size: 0.8rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
text-decoration: none;
color: inherit;
}
.entry-card-meta {
/* Card: photo variant */
.entry-card-photo {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-border);
margin-bottom: var(--space-5);
}
.entry-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.entry-card-inner:hover .entry-card-photo img { transform: scale(1.04); }
.entry-card-photo-overlay {
position: absolute;
inset: auto 0 0 0;
padding: var(--space-5) var(--space-4) var(--space-3);
background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, transparent 100%);
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
align-items: flex-end;
gap: var(--space-3);
flex-wrap: wrap;
}
.entry-card-meta .entry-date { margin-bottom: 0; }
.entry-card .entry-title { font-size: 1.3rem; margin-bottom: 0.75rem; }
.entry-card .entry-title a { color: inherit; text-decoration: none; }
.entry-card .entry-title a:hover { text-decoration: underline; }
.entry-thumb { margin-bottom: 0.75rem; }
.entry-thumb img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px;
display: block;
.entry-date-overlay {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.92);
}
.entry-excerpt { color: #444; margin-bottom: 0.75rem; }
.entry-read-more {
font-size: 0.9rem;
color: #0066cc;
text-decoration: none;
}
.feed-empty { color: #666; font-style: italic; }
/* ── Location & Weather badges ─────────────────────────────────────────────── */
.entry-location {
font-size: 0.82rem;
color: #555;
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
.entry-location--card {
.entry-location-overlay {
font-size: var(--text-xs);
color: rgba(255,255,255,0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
max-width: 180px;
}
/* Card: text-only variant */
.entry-card-textmeta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.entry-date-plain {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.07em;
color: var(--color-ink-muted);
}
.entry-location-plain {
font-size: var(--text-xs);
color: var(--color-ink-muted);
}
/* Card body */
.entry-card .entry-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
line-height: var(--leading-snug);
color: var(--color-ink);
margin-bottom: var(--space-3);
transition: color 0.15s;
}
.entry-card-inner:hover .entry-title { color: var(--color-accent); }
.entry-excerpt {
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-ink-2);
margin-bottom: var(--space-3);
}
.entry-read-more {
font-size: var(--text-sm);
font-weight: 500;
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: 0.82rem;
color: #555;
margin-bottom: 0.25rem;
font-size: var(--text-sm);
color: var(--color-ink-2);
}
/* ── Single entry ───────────────────────────────────────────────────────────── */
themes/intotheeast/templates/tracker.html.twig
+30 -20
View File
@@ -72,36 +72,46 @@ if (latLngs.length === 1) {
{% set hero = entry.media.images|first %}
{% endif %}
<a class="entry-card-inner" href="{{ entry.url }}">
{% if hero %}
<div class="entry-thumb">
<a href="{{ entry.url }}">
<img src="{{ hero.cropResize(680, 383).url }}" alt="{{ entry.title }}" loading="lazy">
</a>
</div>
{% endif %}
<div class="entry-card-meta">
<time class="entry-date" datetime="{{ entry.date|date('Y-m-d') }}">
{{ entry.date|date('d M Y') }}
<div class="entry-card-photo">
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
<div class="entry-card-photo-overlay">
<time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
{{ entry.date|date('d M Y')|upper }}
</time>
{% if entry.header.location_city or entry.header.location_country %}
<span class="entry-location entry-location--card">
<span class="entry-location-overlay">
📍
{% if entry.header.location_city %}{{ entry.header.location_city|slice(0,25) }}{% endif %}
{% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
{% if entry.header.location_city and entry.header.location_country %}, {% endif %}
{% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
</span>
{% endif %}
</div>
<h2 class="entry-title">
<a href="{{ entry.url }}">{{ entry.title }}</a>
</h2>
<div class="entry-excerpt">
{{ entry.summary }}
</div>
<a class="entry-read-more" href="{{ entry.url }}">Read more →</a>
{% else %}
<div class="entry-card-textmeta">
<time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
{{ entry.date|date('d M Y')|upper }}
</time>
{% if entry.header.location_city or entry.header.location_country %}
<span class="entry-location-plain">
📍
{% if entry.header.location_city %}{{ entry.header.location_city }}{% endif %}
{% if entry.header.location_city and entry.header.location_country %}, {% endif %}
{% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
</span>
{% endif %}
</div>
{% endif %}
<div class="entry-card-body">
<h2 class="entry-title">{{ entry.title }}</h2>
<p class="entry-excerpt">{{ entry.summary }}</p>
<span class="entry-read-more">Read entry →</span>
</div>
</a>
</article>
{% endfor %}
{% else %}