kantarciandClaude Opus 5
c8a8fa7460
Forms gained steps, conditions, image choices, number fields with units and a summary step; the DEEG price finder uses all of it. Plugins are manifest plus Twig: blocks, settings, containers, routes, presets and theme packs, switched per installation. The review backlog is done: archive pages render through the normal page pipeline, forms and post lists work inside areas and sections, repeated sections get their own ids, breakpoints and colours come from the palette, backup and update work on MySQL and lock each other out. The task worker no longer shortens a process that has no time limit: set_time_limit() sets the limit instead of extending it, which turned an unlimited CLI run into eighty seconds and killed the full test suite far away from the scheduler. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
57 lines
4.7 KiB
CSS
57 lines
4.7 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:767px){.block-gallery{grid-template-columns:minmax(0,1fr);gap:16px}}
|
|
.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)}
|
|
|
|
|
|
/* Hover effects remain CSS; entrance effects are observed by motion.js. They play for everyone
|
|
unless the website chooses to respect the browser preference - see the override at the end. */
|
|
.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 }
|
|
|
|
/* 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. */
|
|
.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) }
|
|
|
|
/* Die Website kann die Browservorgabe „Bewegung reduzieren" beachten (Einstellungen → Bewegung).
|
|
Dann trägt <html> die Klasse motion-respect, und die Hover-Fahrten fallen weg - Farben und
|
|
Schatten bleiben, nur nichts bewegt sich mehr. Ohne die Klasse spielt alles, wie bei Flatsome. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html.motion-respect :is(.fx-hover-lift, .fx-hover-zoom img, .fx-hover-sink, .fx-hover-tilt, .post-card, .post-image img, .post-nav-link, .button) { transition: none }
|
|
html.motion-respect :is(.fx-hover-lift, .fx-hover-sink, .fx-hover-tilt, .post-card, .post-nav-link, .button):hover,
|
|
html.motion-respect :is(.fx-hover-lift, .post-card):focus-within,
|
|
html.motion-respect .post-nav-link:focus-visible,
|
|
html.motion-respect .fx-hover-zoom:hover img, html.motion-respect .fx-hover-zoom:focus-within img,
|
|
html.motion-respect .post-card:hover .post-image img, html.motion-respect .post-card:focus-within .post-image img { transform: none }
|
|
}
|