kantarciandClaude Opus 5
23fdca4edb
Umut on the DEEG hero image: "It should be rounded, but it was done from somewhere, and the corners look odd. And the editor has no image corner rounding at all, does it?" It did have one - per block, under Design > Bild > Bildecken. What it did not have was the 12px that enhancements.css set on .block-image for every installation: rounded on screen, present in no field, and only removable by overriding it on each block. On a template that is square throughout it shows, because the elements above the image - the gradient, the sign, the blue call to action - are square and stick out of the rounded corner. The radius is now theme.base.imageRadius, validated like the container width, emitted as --k-image-radius and used by the stylesheet. The default stays 12px so existing sites look the same; 0px makes every image square. The per-block setting still wins. DEEG is set to 0px, in the seed script and in the installation. 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:var(--k-image-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 }
|
|
}
|