Tracker ordering fix + March–April fixture entries #1
@@ -73,78 +73,129 @@ body {
|
|||||||
.site-nav a { padding: var(--space-2); font-size: 0.8rem; }
|
.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 {
|
.entry-card { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-12); }
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-date {
|
.entry-card-inner {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.8rem;
|
text-decoration: none;
|
||||||
color: #666;
|
color: inherit;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
gap: 0.75rem;
|
gap: var(--space-3);
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-card-meta .entry-date { margin-bottom: 0; }
|
.entry-date-overlay {
|
||||||
|
font-size: var(--text-xs);
|
||||||
.entry-card .entry-title { font-size: 1.3rem; margin-bottom: 0.75rem; }
|
font-weight: 700;
|
||||||
.entry-card .entry-title a { color: inherit; text-decoration: none; }
|
letter-spacing: 0.08em;
|
||||||
.entry-card .entry-title a:hover { text-decoration: underline; }
|
color: rgba(255,255,255,0.92);
|
||||||
|
|
||||||
.entry-thumb { margin-bottom: 0.75rem; }
|
|
||||||
.entry-thumb img {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 16 / 9;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-excerpt { color: #444; margin-bottom: 0.75rem; }
|
.entry-location-overlay {
|
||||||
|
font-size: var(--text-xs);
|
||||||
.entry-read-more {
|
color: rgba(255,255,255,0.85);
|
||||||
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 {
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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 {
|
.entry-weather {
|
||||||
font-size: 0.82rem;
|
font-size: var(--text-sm);
|
||||||
color: #555;
|
color: var(--color-ink-2);
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Single entry ───────────────────────────────────────────────────────────── */
|
/* ── Single entry ───────────────────────────────────────────────────────────── */
|
||||||
|
|||||||
@@ -72,36 +72,46 @@ if (latLngs.length === 1) {
|
|||||||
{% set hero = entry.media.images|first %}
|
{% set hero = entry.media.images|first %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if hero %}
|
<a class="entry-card-inner" href="{{ entry.url }}">
|
||||||
<div class="entry-thumb">
|
{% if hero %}
|
||||||
<a href="{{ entry.url }}">
|
<div class="entry-card-photo">
|
||||||
<img src="{{ hero.cropResize(680, 383).url }}" alt="{{ entry.title }}" loading="lazy">
|
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||||
</a>
|
<div class="entry-card-photo-overlay">
|
||||||
</div>
|
<time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
|
||||||
{% endif %}
|
{{ entry.date|date('d M Y')|upper }}
|
||||||
|
</time>
|
||||||
<div class="entry-card-meta">
|
{% if entry.header.location_city or entry.header.location_country %}
|
||||||
<time class="entry-date" datetime="{{ entry.date|date('Y-m-d') }}">
|
<span class="entry-location-overlay">
|
||||||
{{ entry.date|date('d M Y') }}
|
📍
|
||||||
</time>
|
{% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
|
||||||
{% if entry.header.location_city or entry.header.location_country %}
|
{% if entry.header.location_city and entry.header.location_country %}, {% endif %}
|
||||||
<span class="entry-location entry-location--card">
|
{% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
|
||||||
📍
|
</span>
|
||||||
{% if entry.header.location_city %}{{ entry.header.location_city|slice(0,25) }}{% endif %}
|
{% endif %}
|
||||||
{% if entry.header.location_city and entry.header.location_country %}, {% endif %}
|
</div>
|
||||||
{% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
|
</div>
|
||||||
</span>
|
{% 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 %}
|
{% endif %}
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="entry-title">
|
<div class="entry-card-body">
|
||||||
<a href="{{ entry.url }}">{{ entry.title }}</a>
|
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||||
</h2>
|
<p class="entry-excerpt">{{ entry.summary }}</p>
|
||||||
|
<span class="entry-read-more">Read entry →</span>
|
||||||
<div class="entry-excerpt">
|
</div>
|
||||||
{{ entry.summary }}
|
</a>
|
||||||
</div>
|
|
||||||
<a class="entry-read-more" href="{{ entry.url }}">Read more →</a>
|
|
||||||
</article>
|
</article>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
Reference in New Issue
Block a user