Decor-Muster: Spielzeug-Silhouetten auf den farbigen Flächen
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
1 parent
7f1525b381
commit
9d100734a9
8 files changed
+156
-5
No files matched your search
@@ -232,6 +232,25 @@ im rechten Drittel liegen. Alle 2000×1100, progressives JPEG, Qualität 76.
|
||||
Das Vereinslogo im Hero liegt auf einer weißen Karte — auf dem gemusterten Stoff war die
|
||||
feine Schrift darin sonst nicht lesbar.
|
||||
|
||||
## Decor-Muster
|
||||
|
||||
Kundenwunsch 2026-09-24: die farbigen Flächen wirkten leer. Referenz ist die
|
||||
Handoff-Komponente **`Decor` — „flat decorative layer" (`variant`, `opacity`)**; sie steht
|
||||
in der Komponentenliste des Handoffs, wurde dort aber nie ausgeführt.
|
||||
|
||||
`assets/decor-toys.svg` ist eine nahtlose 420px-Kachel mit elf flachen
|
||||
Spielzeug-Silhouetten (Teddy, Ente, Auto, Ball, Bauklotz, Rassel, Stern, Ballon,
|
||||
Stapelturm, Herz, Segelboot), selbst gezeichnet, 4 KB. Sie wird als CSS-Maske benutzt, die
|
||||
Farbe kommt pro Fläche aus `--decor`: immer der Ton der Fläche, eine Stufe dunkler — ein
|
||||
Schatten, kein zweites Motiv. Auf dem Handy 320px-Kachel.
|
||||
|
||||
Liegt auf: Heros (Desktop nur über der Farbfläche, zur Fotokante ausgeblendet), allen
|
||||
getönten und gesättigten Feldern, den Bändern und dem Footer. Weiße Sektionen bleiben leer,
|
||||
damit der Rhythmus Weiß ↔ Farbe erhalten bleibt.
|
||||
|
||||
Kontrast gegen die **dunklere** Musterfarbe gemessen, nicht gegen den Grund: `--ink-700`
|
||||
7.41–9.71, Weiß auf dem Blau-Band 4.65.
|
||||
|
||||
## Motion
|
||||
|
||||
Nur Zustandsfeedback, wie im Handoff: 120ms Farbe, 200ms Lift, 340ms alles Größere,
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
|
||||
<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
|
||||
Einfarbige Spielzeug-Silhouetten, wird als CSS-Maske benutzt: die Farbe kommt
|
||||
aus dem CSS (Variable decor), diese Datei liefert nur die Form. Kachel 420x420, nahtlos. -->
|
||||
<defs>
|
||||
<!-- Teddy -->
|
||||
<g id="teddy">
|
||||
<circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
|
||||
<circle cx="0" cy="-14" r="17"/>
|
||||
<ellipse cx="0" cy="16" rx="18" ry="19"/>
|
||||
<circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
|
||||
<circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
|
||||
</g>
|
||||
<!-- Quietscheente -->
|
||||
<g id="duck">
|
||||
<path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
|
||||
<circle cx="10" cy="-18" r="13"/>
|
||||
<path d="M21 -20 L34 -15 L21 -11 Z"/>
|
||||
<path d="M-30 -4 L-20 -2 L-24 8 Z"/>
|
||||
</g>
|
||||
<!-- Spielzeugauto -->
|
||||
<g id="car">
|
||||
<path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
|
||||
<circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
|
||||
</g>
|
||||
<!-- Ball -->
|
||||
<g id="ball">
|
||||
<path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
|
||||
</g>
|
||||
<!-- Bauklotz -->
|
||||
<g id="block">
|
||||
<path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
|
||||
</g>
|
||||
<!-- Rassel -->
|
||||
<g id="rattle">
|
||||
<circle cx="0" cy="-16" r="15"/>
|
||||
<rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
|
||||
<circle cx="0" cy="28" r="6"/>
|
||||
</g>
|
||||
<!-- Stern -->
|
||||
<g id="star">
|
||||
<path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<!-- Luftballon -->
|
||||
<g id="balloon">
|
||||
<ellipse cx="0" cy="-10" rx="15" ry="19"/>
|
||||
<path d="M-4 8 L4 8 L0 13 Z"/>
|
||||
<path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Stapelturm -->
|
||||
<g id="rings">
|
||||
<rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
|
||||
<circle cx="0" cy="-30" r="4.5"/>
|
||||
<ellipse cx="0" cy="-14" rx="10" ry="6"/>
|
||||
<ellipse cx="0" cy="-2" rx="15" ry="7"/>
|
||||
<ellipse cx="0" cy="12" rx="20" ry="8"/>
|
||||
<rect x="-24" y="19" width="48" height="6" rx="3"/>
|
||||
</g>
|
||||
<!-- Herz -->
|
||||
<g id="heart">
|
||||
<path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
|
||||
</g>
|
||||
<!-- Segelboot -->
|
||||
<g id="boat">
|
||||
<path d="M2 -28 L2 6 L24 6 Z"/>
|
||||
<path d="M-2 -20 L-2 6 L-16 6 Z"/>
|
||||
<path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
|
||||
</g>
|
||||
</defs>
|
||||
<g fill="#000">
|
||||
<use href="#teddy" transform="translate(58 62) rotate(-12)"/>
|
||||
<use href="#star" transform="translate(170 36) rotate(14) scale(.8)"/>
|
||||
<use href="#car" transform="translate(282 70) rotate(8)"/>
|
||||
<use href="#ball" transform="translate(384 30) rotate(-20) scale(.85)"/>
|
||||
<use href="#balloon" transform="translate(150 150) rotate(10)"/>
|
||||
<use href="#duck" transform="translate(40 190) rotate(6)"/>
|
||||
<use href="#block" transform="translate(262 170) rotate(-10)"/>
|
||||
<use href="#heart" transform="translate(370 150) rotate(12) scale(.8)"/>
|
||||
<use href="#rings" transform="translate(80 312) rotate(-6)"/>
|
||||
<use href="#rattle" transform="translate(200 270) rotate(-35)"/>
|
||||
<use href="#boat" transform="translate(330 270) rotate(6)"/>
|
||||
<use href="#star" transform="translate(20 400) rotate(-8) scale(.6)"/>
|
||||
<use href="#star" transform="translate(440 400) rotate(-8) scale(.6)"/>
|
||||
<use href="#ball" transform="translate(250 380) rotate(30) scale(.7)"/>
|
||||
<use href="#heart" transform="translate(160 390) rotate(-14) scale(.6)"/>
|
||||
<use href="#teddy" transform="translate(390 368) rotate(10) scale(.75)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -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
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
|
||||
</head>
|
||||
<body class="page-verein">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=a6279bca" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
|
||||
</head>
|
||||
<body class="page-shop parked">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
Reference in new issue
Block a user