kantarciandClaude Opus 5
0d6c1a17af
Karten (Raster mit Bild oben), Liste (Bild links, Text rechts), Kompakt (nur Titel und Datum) und Wechselseitig (Bild mal links, mal rechts). Dieselben Daten, dasselbe Markup - nur eine Klasse wechselt. Die erste Fassung von "Wechselseitig" war ein umgedrehter Flexkasten und sah auch so aus. Jetzt sitzt das Bild in einer Karte mit Ecken, Schatten und festem Verhaeltnis, der Text hat eine Nummer aus einem CSS-Zaehler, eine begrenzte Zeilenlaenge und einen sichtbaren Verweis, und zwischen den Reihen liegt eine feine Linie. Zwei Details: die Karte ist das Listenelement, also zaehlt :nth-child auf ihr - die erste Fassung wechselte deshalb gar nicht. Und die Umkehrung laeuft ueber order statt row-reverse, damit auf dem Telefon sauber wieder Bild ueber Text steht. Geprueft: 399 Tests unter PHP 8.2 und 8.4, 18 JS-Tests, Editortest, Browserpruefung, axe ohne Verstoss auf allen vier Darstellungen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
2.6 KiB
Twig
44 lines
2.6 KiB
Twig
{# Posts are supplied by the controller, never read from stored content. #}
|
|
{% if posts is empty %}
|
|
<p class="post-empty">Hier erscheinen die Beiträge, sobald welche veröffentlicht sind.</p>
|
|
{% else %}
|
|
{% set art = layout|default('karten') %}
|
|
<ul class="post-list post-list-{{ art }}">
|
|
{% for post in posts %}
|
|
<li class="post-card">
|
|
{% if post.image and art != 'kompakt' %}
|
|
<a class="post-image" href="{{ post.href }}" tabindex="-1" aria-hidden="true">
|
|
<img src="{{ post.image.variants|last.src }}" alt="" width="{{ post.image.variants|last.width }}" height="{{ post.image.variants|last.height }}" loading="lazy" decoding="async"
|
|
srcset="{% for source in post.image.variants %}{{ source.src }} {{ source.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="(max-width: 650px) 100vw, 380px">
|
|
{# Der Hinweis liegt über dem Bild und erscheint beim Zeigen. Für Vorlesesoftware ist
|
|
er nichts Neues - der Titel darunter ist derselbe Verweis -, deshalb ausgeblendet. #}
|
|
<span class="post-view" aria-hidden="true">Ansehen</span>
|
|
</a>
|
|
{% endif %}
|
|
<div class="post-body">
|
|
<h3><a href="{{ post.href }}">{{ post.title }}</a></h3>
|
|
{% if (showMeta ?? true) and (post.publishedAt or post.author) %}
|
|
<p class="post-meta">
|
|
{% if post.publishedAt %}<time datetime="{{ post.publishedAt|date('Y-m-d') }}">{{ post.publishedAt|date('d.m.Y') }}</time>{% endif %}
|
|
{% if post.author %}<span>von {{ post.author }}</span>{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
{% if (showExcerpt ?? true) and post.excerpt %}<p class="post-excerpt">{{ post.excerpt }}</p>{% endif %}
|
|
{% if art == 'wechsel' %}<span class="post-more" aria-hidden="true">Weiterlesen</span>{% endif %}
|
|
{% if (showTerms ?? true) and post.terms.category is not empty %}
|
|
<p class="post-terms">{% for term in post.terms.category %}<a href="{{ term.href }}">{{ term.name }}</a>{% endfor %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% if pages|default(1) > 1 %}
|
|
{# Dieselbe Blätterleiste wie im Archiv: eine Liste, die mehr hat als sie zeigt, sagt es. #}
|
|
<nav class="post-pager" aria-label="Weitere Beiträge">
|
|
{% if page > 1 %}<a rel="prev" href="?seite={{ page - 1 }}">← Neuere</a>{% endif %}
|
|
<span>Seite {{ page }} von {{ pages }}{% if total %} · {{ total }} Beiträge{% endif %}</span>
|
|
{% if page < pages %}<a rel="next" href="?seite={{ page + 1 }}">Ältere →</a>{% endif %}
|
|
</nav>
|
|
{% endif %}
|