feat(design): Huegel im Theme Aura schaukeln leicht
Die Seitenleiste im hellen Aura sah aus wie ein Standbild. Jetzt bewegt @keyframes aura-hills die Grafik-Ebene in 26 s um +-9 px waagerecht und 4 px senkrecht - langsam genug, dass es beim Arbeiten nicht auffaellt. Bewegt wird nur die zweite Hintergrundebene. Der Schleier davor bleibt stehen, sonst wandert die Helligkeit unter den Menuepunkten. Die Grafik ist unten verankert und beschnitten, deshalb reisst am Rand keine Luecke auf. Bei "Bewegung reduzieren" bleibt sie stehen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
3c56cf8361
commit
ad7f806258
@@ -271,6 +271,7 @@ ist `theme-aura`, der Unterschied kommt wie immer aus `.dark`.
|
||||
| --- | --- |
|
||||
| **Leiste** | Vier Hintergrundebenen statt zwei: Sonne bzw. Mond (`aura-sun.svg`, `aura-moon.svg`, 130 px in der Ecke oben rechts, halb angeschnitten), Schleier, Sterne (`aura-stars.svg`, nur nachts) und ein Himmelsverlauf. Weil jede Ebene eigene Lage und Größe braucht, stehen die in `--aura-header-position` und `--aura-header-size` |
|
||||
| **Ziehende Wolken** | Reines CSS: `.app-header::before` mit zwei nahtlosen 800-px-Kacheln (`aura-clouds-near.svg`, `aura-clouds-far.svg`). `@keyframes aura-clouds` schiebt sie in 150 s um genau 1600 bzw. 800 px - Neustart ohne Ruck, vordere Lage doppelt so schnell. Nachts auf `--aura-cloud-opacity` 0,28 abgedunkelt |
|
||||
| **Schaukelnde Hügel** | Reines CSS, nur hell: `@keyframes aura-hills` schiebt in der Seitenleiste allein die Grafik-Ebene (`aura-sidebar.svg`) 26 s lang um ±9 px waagerecht und 4 px senkrecht. Der Schleier davor bleibt stehen, sonst würde die Schrift wandern. Die Grafik ist unten verankert und wird beschnitten (`preserveAspectRatio="xMidYMax slice"`), deshalb reißt am Rand keine Lücke auf |
|
||||
| **Sonnenstrahlen** | `src/components/AuraWeather.tsx`, nur hell. Alle 16–24 s zwei oder drei `.aura-ray`-Elemente: vom Sonnenmittelpunkt in Richtung Ecke unten links, leicht aufgefächert, per `clip-path` zur Sonne hin verjüngt und weichgezeichnet. Web Animations API: 4 s anschwellen, leicht schwenken, verblassen, danach entfernt |
|
||||
|
||||
Zwei Stolperstellen:
|
||||
@@ -284,6 +285,10 @@ Zwei Stolperstellen:
|
||||
`AuraWeather.tsx` sind aus Position und Größe der Sonne in `index.css`
|
||||
gerechnet. Wer die Sonne verschiebt, muss beide mitziehen, sonst kommen die
|
||||
Strahlen aus dem Nichts.
|
||||
3. **Hügel bewegen, Schleier nicht.** `background-position` gilt je Ebene.
|
||||
Wer im Keyframe nur einen Wert schreibt, verschiebt auch den Schleier - die
|
||||
Menüpunkte bekommen dann wandernde Helligkeit. Deshalb stehen dort immer
|
||||
zwei Werte: `center top` für den Schleier, die Bewegung für die Grafik.
|
||||
|
||||
### Was ein neues Theme können muss
|
||||
|
||||
|
||||
Reference in New Issue
Block a user