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

Decor-Muster: Spielzeug-Silhouetten auf den farbigen Flächen

Browse Source 
Umsetzung der Handoff-Komponente Decor (flat decorative layer). Selbst gezeichnete
SVG-Kachel als CSS-Maske, Farbe pro Fläche eine Stufe dunkler als der Grund.

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:14:52 +02:00
1 parent 7f1525b381
commit 9d100734a9
8 files changed
+156 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+44
View File
@@ -560,6 +560,50 @@ a:hover{color:var(--sky-600)}
.label, .ftr__col h3, .badge{font-size:12px}
}
/* ============================================================ 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. */
.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;
}
.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}
/* 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::after{z-index:0}
.hero__in, .hero__mark{z-index:1}
@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;
}
}
@media (max-width:819.98px){ .hero__media{z-index:1} }
@media (max-width:639.98px){ :root{--decor-size:320px} }
/* ============================================================ HANDY-RHYTHMUS
Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.
Gemessen vorher: Startseite 4936px hoch, auf dem ersten Bildschirm nur Foto und