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

feat: add stories listing page and all story/shortcode CSS

Browse Source
This commit is contained in:
Mischa
2026-06-19 22:59:17 +02:00
parent 48b877c439
commit dfd1c38396
2 changed files with 543 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/stories.html.twig
+41 -6
View File
@@ -1,10 +1,45 @@
{% extends 'partials/base.html.twig' %}
{% block nav %}
<a class="story-escape" href="{{ page.parent.url }}">← Back</a>
{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<p>Stories coming soon.</p>
{% set stories = page.children.published().order('date', 'asc') %}
<div class="stories-listing">
<h1 class="stories-listing__heading">Stories</h1>
{% if stories|length > 0 %}
<div class="stories-grid">
{% for story in stories %}
{% set hero = null %}
{% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
{% set hero = story.media[story.header.hero_image] %}
{% endif %}
{% set date_str = story.date|date('d M Y') %}
{% if story.header.end_date %}
{% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
{% endif %}
<a class="story-card" href="{{ story.url }}">
{% if hero %}
<div class="story-card__photo">
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
</div>
{% else %}
<div class="story-card__photo story-card__photo--empty"></div>
{% endif %}
<div class="story-card__body">
<time class="story-card__date">{{ date_str }}</time>
{% if story.header.location_name %}
<span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
{% endif %}
<h2 class="story-card__title">{{ story.title }}</h2>
<span class="story-card__cta">Read story →</span>
</div>
</a>
{% endfor %}
</div>
{% else %}
<p class="stories-empty">No stories yet — check back soon.</p>
{% endif %}
</div>
{% endblock %}