WEBklar/emmas-schatzkiste
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Decor-Muster Safari-fest und größer

Browse Source 
Die CSS-Masken-Fassung war in Safari unsichtbar. Jetzt vorgefärbte SVG-Kacheln
(assets/decor/*.svg) als normales Hintergrundbild. Kachel 420 -> 600px, Handy 440px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5.5 committed 2026-09-24 22:26:48 +02:00
1 parent ab41686689
commit 4b3c90cb8e
15 files changed
+658 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+24 -25
View File
@@ -577,46 +577,45 @@ a:hover{color:var(--sky-600)}
/* ============================================================ DECOR
Referenz: Handoff-DS-Komponente "Decor — flat decorative layer" (variant, opacity).
Im Handoff gelistet, aber nie gebaut. Kundenwunsch 2026-09-24: die Flächen wirkten leer.
Flache Spielzeug-Silhouetten (assets/decor-toys.svg) als CSS-Maske, damit die Farbe pro
Fläche aus dem CSS kommt: immer derselbe Farbton, eine Stufe dunkler — Schatten, kein
zweites Motiv. Text darüber bleibt lesbar, gemessen gegen die DUNKLERE Musterfarbe:
ink-700 ≥ 8.4 auf allen hellen Tönen, weiß auf #2878BD = 4.62. */
Flache Spielzeug-Silhouetten, je Fläche derselbe Farbton eine Stufe dunkler — Schatten,
kein zweites Motiv. Text darüber gemessen gegen die DUNKLERE Musterfarbe:
ink-700 ≥ 7.41 auf allen hellen Tönen, weiß auf #2878BD = 4.65.
Technik: vorgefärbte SVG-Kacheln (assets/decor/*.svg, erzeugt aus source.svg) als
normales Hintergrundbild. Die erste Fassung lief über eine CSS-Maske und war in
Safari (Mac) unsichtbar — Hintergrundbilder laufen überall.
Kachelgröße 600px (vorher 420): auf Kundenwunsch größere Spielzeuge, gleich kräftig. */
.field--warm, .field--cool, .field--rose, .field--solid-sky, .field--solid-sun,
.band, .ftr{position:relative; isolation:isolate}
.field--warm::before, .field--cool::before, .field--rose::before,
.field--solid-sky::before, .field--solid-sun::before, .band::before, .ftr::before,
.hero::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
border-radius:inherit; background:var(--decor);
-webkit-mask:url(decor-toys.svg) 0 0/var(--decor-size,420px) repeat;
mask:url(decor-toys.svg) 0 0/var(--decor-size,420px) repeat;
border-radius:inherit; background-repeat:repeat;
background-size:var(--decor-size,600px) auto; background-position:0 0;
}
.field--warm, .band, .ftr{--decor:#EDC356}
.field--cool, .band--cool{--decor:#A9CFEE}
.field--rose{--decor:#F9BFB0}
.field--solid-sky{--decor:#2878BD}
.field--solid-sun{--decor:#E8B124}
/* Kachelmuster versetzt, damit nicht jede Fläche mit demselben Teddy oben links beginnt. */
.field--solid-sky::before, .field--solid-sun::before{-webkit-mask-position:140px 90px; mask-position:140px 90px}
.field--warm::before, .band::before, .ftr::before{background-image:url(decor/warm.svg)}
.field--cool::before, .band--cool::before{background-image:url(decor/cool.svg)}
.field--rose::before{background-image:url(decor/rose.svg)}
.field--solid-sky::before{background-image:url(decor/sky.svg); background-position:180px 120px}
.field--solid-sun::before{background-image:url(decor/sun.svg); background-position:180px 120px}
/* Hero: über Foto und Verlauf, unter dem Text. Auf dem Desktop nur über der Farbfläche —
eine zweite Maske blendet das Muster zur Fotokante hin aus. */
.hero--shop{--decor:#B5D8F3}
.hero--verein{--decor:#F1CC66}
/* Hero: über Foto und Verlauf, unter dem Text. */
.hero--shop::after{background-image:url(decor/hero-shop.svg)}
.hero--verein::after{background-image:url(decor/hero-verein.svg)}
.hero::after{z-index:0}
.hero__in, .hero__mark{z-index:1}
/* Desktop: nur über der Farbfläche, zur Fotokante hin ausgeblendet. Breite statt
SVG-Maske; der Verlauf ist eine reine Gradient-Maske, die Safari seit Jahren kann. */
@media (min-width:820px){
.hero::after{
-webkit-mask:url(decor-toys.svg) 0 0/420px repeat,
linear-gradient(98deg,#000 calc(var(--scrim-edge) - 60px),transparent var(--scrim-edge));
-webkit-mask-composite:source-in;
mask:url(decor-toys.svg) 0 0/420px repeat,
linear-gradient(98deg,#000 calc(var(--scrim-edge) - 60px),transparent var(--scrim-edge));
mask-composite:intersect;
right:auto; width:var(--scrim-edge);
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
}
}
@media (max-width:819.98px){ .hero__media{z-index:1} }
@media (max-width:639.98px){ :root{--decor-size:320px} }
@media (max-width:639.98px){ :root{--decor-size:440px} }
/* ============================================================ HANDY-RHYTHMUS
Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.