kantarciandClaude Opus 5
1b164f4c86
Umut: "es gibt keinen Mausover-Effekt, das fehlt". Am Original nachgemessen und uebernommen: die Karte hebt sich um 8px mit weichem Schatten, das Bild zieht auf 1,06 auf, darueber blendet ein Hinweis ein. Die Bewegung steht vollstaendig hinter der Bewegungsschranke - wer weniger Bewegung eingestellt hat, bekommt keine, sieht den Hinweis aber trotzdem. Alles haengt zusaetzlich an :focus-within, damit der Effekt nicht nur Mausbenutzern gehoert. Der Hinweis ist fuer Vorlesesoftware ausgeblendet, weil der Titel darunter zum selben Ziel fuehrt. Ausserdem: der Leuchteffekt trug noch das Gruen der Vorlage statt der Akzentfarbe der Website. Geprueft: 391 Tests unter PHP 8.2 und 8.4, Editortest, Browserpruefung, axe ohne Verstoss. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
34 lines
1.9 KiB
Twig
34 lines
1.9 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 %}
|
|
<ul class="post-list">
|
|
{% for post in posts %}
|
|
<li class="post-card">
|
|
{% if post.image %}
|
|
<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 (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 %}
|