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>
69 lines
5.5 KiB
CSS
69 lines
5.5 KiB
CSS
.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:12px}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
|
|
@media(max-width:1024px){.block-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
@media(max-width:650px){.block-gallery{grid-template-columns:minmax(0,1fr);gap:16px}}
|
|
@media(prefers-reduced-motion:no-preference){.fx-hover-lift,.fx-hover-zoom img{transition:transform .25s ease}.fx-hover-lift:hover,.fx-hover-lift:focus-within{transform:translateY(-4px)}.fx-hover-zoom:hover img,.fx-hover-zoom:focus-within img{transform:scale(1.035)}.fx-entrance-fade{animation:kant-fade .55s ease-out backwards}.fx-entrance-rise{animation:kant-rise .55s ease-out backwards}@keyframes kant-fade{from{opacity:.35}to{opacity:1}}@keyframes kant-rise{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}}
|
|
|
|
|
|
/* Entrance animations and hover effects, added 12.09.2026.
|
|
|
|
Every animation stays inside the reduced-motion guard: whoever asked their system for less
|
|
movement gets the finished state, not a softened animation. They play on load, because a public
|
|
page runs no script and there is nothing to observe a scroll position with - that is a
|
|
limitation, not an oversight, and it is written in the editor. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.fx-entrance-sink { animation: kant-sink .55s ease-out backwards }
|
|
.fx-entrance-left { animation: kant-left .55s ease-out backwards }
|
|
.fx-entrance-right { animation: kant-right .55s ease-out backwards }
|
|
.fx-entrance-zoom { animation: kant-zoom .55s ease-out backwards }
|
|
.fx-entrance-flip { animation: kant-flip .7s ease-out backwards }
|
|
.fx-entrance-blur { animation: kant-unblur .6s ease-out backwards }
|
|
.fx-delay-short { animation-delay: .15s }
|
|
.fx-delay-medium { animation-delay: .3s }
|
|
.fx-delay-long { animation-delay: .6s }
|
|
|
|
.fx-hover-sink { transition: transform .2s ease }
|
|
.fx-hover-sink:hover { transform: translateY(3px) }
|
|
.fx-hover-glow { transition: box-shadow .2s ease }
|
|
.fx-hover-glow:hover { box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent), 0 10px 30px color-mix(in srgb,var(--ink) 16%,transparent) }
|
|
.fx-hover-tilt { transition: transform .2s ease }
|
|
.fx-hover-tilt:hover { transform: rotate(-1.2deg) scale(1.01) }
|
|
.fx-hover-grow-border { transition: box-shadow .2s ease }
|
|
.fx-hover-grow-border:hover { box-shadow: inset 0 0 0 3px #2c6b4f }
|
|
}
|
|
@keyframes kant-sink { from { opacity: 0; transform: translateY(-18px) } to { opacity: 1; transform: none } }
|
|
@keyframes kant-left { from { opacity: 0; transform: translateX(-24px) } to { opacity: 1; transform: none } }
|
|
@keyframes kant-right { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
|
|
@keyframes kant-zoom { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
|
|
@keyframes kant-flip { from { opacity: 0; transform: perspective(800px) rotateX(-12deg) } to { opacity: 1; transform: none } }
|
|
@keyframes kant-unblur { from { opacity: 0; filter: blur(8px) } to { opacity: 1; filter: none } }
|
|
|
|
/* Beitragskarten und Knöpfe, ergänzt am 13.09.2026.
|
|
|
|
Umut hat gefragt, wo der Zeigereffekt bleibt: eine Karte, die sich beim Zeigen nicht rührt,
|
|
wirkt tot. Angehoben wird die ganze Karte, das Bild zieht leicht auf, und der Hinweis darüber
|
|
blendet ein. Alles innerhalb der Bewegungsschranke - wer weniger Bewegung eingestellt hat,
|
|
bekommt den Hinweis trotzdem, nur ohne Fahrt. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.post-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
|
|
/* Eine Zeile in der kompakten Liste hebt sich nicht - sie ist keine Karte. */
|
|
.post-list-kompakt .post-card:hover, .post-list-kompakt .post-card:focus-within { transform: none; box-shadow: none; border-color: var(--accent) }
|
|
/* Wechselseitig: die Karte selbst bleibt stehen, nur das Bild zieht auf. */
|
|
.post-list-wechsel .post-card:hover, .post-list-wechsel .post-card:focus-within { transform: none; box-shadow: none }
|
|
.post-list-wechsel .post-card h3 a { transition: color .2s ease }
|
|
.post-list-wechsel .post-card:hover h3 a, .post-list-wechsel .post-card:focus-within h3 a { color: var(--accent) }
|
|
.post-card:hover, .post-card:focus-within {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 18px 50px -16px color-mix(in srgb, var(--ink) 28%, transparent);
|
|
border-color: transparent;
|
|
}
|
|
.post-image img { transition: transform .5s ease }
|
|
.post-card:hover .post-image img, .post-card:focus-within .post-image img { transform: scale(1.06) }
|
|
.post-view { transition: opacity .3s ease }
|
|
.post-nav-link { transition: transform .2s ease, border-color .2s ease }
|
|
.post-nav-link:hover, .post-nav-link:focus-visible { transform: translateY(-3px); border-color: var(--accent) }
|
|
|
|
/* Der Knopf hebt sich beim Zeigen um zwei Pixel - dieselbe Geste wie auf der Karte. */
|
|
.button { transition: transform .2s ease, background-color .2s ease, border-color .2s ease }
|
|
.button:hover { transform: translateY(-2px) }
|
|
}
|