Sechs Wuensche: Hintergruende, Knopfverteilung, Universum, Uhrkoepfe, Knallrot
--- screen3 + screen1: die Hintergruende draengeln nicht mehr --- "die hintergrunde sollen ueberall so sein dass die sich nicht in den vordergrund draengeln." / "mach den hintergrund von dieser kachel dunkler, so dass die die kacheln drin viel mehr auffallen." `--raster` stand auf .26 Deckkraft -- auf dunkler Flaeche kein Hauch mehr, sondern ein gezeichnetes Gitter. Im Tagdialog lief es sichtbar durch die Ueberschrift, in den Sammelkacheln stand es VOR den Karten darin. Jetzt .09: Man sieht eine Struktur, man zaehlt keine Linien. Eine Zahl fuer das ganze Haus -- sie steht einmal in module.css und wird an fuenf Stellen benutzt. Die Anlasskachel im Kalender lag mit rgba(19,26,38,.88) auf demselben Helligkeitsniveau wie die Karten darin: keine Vitrine, sondern eine dritte Flaeche gleicher Lautstaerke. Jetzt fast schwarz. An den Karten musste dafuer nichts geaendert werden -- der Abstand entsteht von selbst. --- screen2: ein Knopf wandert nach links --- "eins von diesen buttons soll links bei dem anderen kreis sein." Die GLOCKE geht nach links zum Ring, der WECKER bleibt rechts bei der Uhr. Das ist nicht ausgewuerfelt: Der Wecker ist eine Uhrzeit. Die Glocke entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt -- und der Ring links zeigt genau das. Die Kachel ist damit spiegelsymmetrisch belegt: 48 px Knopf + 14 px Abstand + 248 px Instrument auf beiden Seiten. Genau das rechnet `--spalte`. Die Zentrierung des Rings ist weggefallen -- sie war noetig, solange er allein in einer fuer Instrument PLUS Knopf bemessenen Spalte stand. Der reservierte Platz schrumpft von 104 auf 48 px je Seite; die Begruendung fuer das Reservieren bleibt: Ein Platz, der erst mit der Antwort entsteht, laesst die Zeile springen. --- screen4: zwei Chilis und zwei Huskys dazu --- "setz in den hintergrund noch 1-2 peperonis und dan das logo von dogfather, also nur den husky." DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-weiss und freigestellt (nachgemessen: 49 % durchsichtig). Als Hintergrundbild bei 15 % verschwaenden die schwarzen Flaechen im dunklen Grund und uebrig blieben die hellen -- ein zerrissener Umriss, kein Hund. Als Maske ueber einer Farbflaeche wird daraus eine geschlossene Silhouette in DogFathers Babyblau. Im Universum schweben jetzt beide Marken in ihren beiden Farben: sieben Chilis rot, zwei Huskys blau. --- screen5: die Punkte sind ersetzt, das letzte Glied leuchtet --- "ich will dass du die punkte ersetzt und immer der letzte soll mehr strahlen oder so." / "alles ist mega ausser die stunden muss du noch perfektionnieren." DIE DREI UMLAUFENDEN PERLEN SIND WEG -- samt 60 Zeilen Rechnung. Sie waren ein zweites Ding an einer zweiten Stelle: eigene Uhr ab dem ersten Takt (weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab), eigener Startwinkel je Bahn, drei Winkel, die die kleineren Einheiten anteilig mittragen mussten. All das war noetig, WEIL der Kopf neben der Reihe herlief statt Teil von ihr zu sein. Genau deshalb trugen sie am 08.09. noch die alten Farben, als die Bahnen getauscht wurden. Jetzt zeichnet eine zweite SVG-Lage genau EIN Glied heller -- dasselbe, das die Reihe darunter zuletzt gesetzt hat, aus denselben Zahlen. Sie kann gar nicht danebenstehen. Heller statt groesser: Waere der Kopf groesser, waere er ein Fremdkoerper in der Reihe. DIE STUNDEN WAREN BREITER ALS LANG -- 5,5 lang bei 7 breit, also 0,79:1. Ein Segment, das breiter ist als lang, liest sich als Klotz quer auf der Bahn statt als Balken entlang. Und weil die Kantenlage nur 0,4 versetzt ist, lief der 0,9 breite Lichtstrich MITTEN DURCH jeden Balken statt an seiner Kante. Jetzt 10 lang bei 5,8 breit (1,7:1), und der Kantenversatz ist nach Bandbreite gestaffelt: (Breite - 0,9) / 2, also 0,75 / 1,65 / 2,05 zusaetzlich zur Gruppe. --- screen6: die Scout-Pipeline wird knallrot --- "die farbe von dieser kategorie soll knall rot sein." Die anderen zwanzig Kachelfarben sind gerechnet (OKLab, groesstmoeglicher Abstand). Diese eine ist gewuenscht -- und wurde deshalb GEGEN den Satz geprueft statt eingetragen: Der engste vorhandene Abstand liegt bei 0,0973. #ff1f2e kommt seinem naechsten Nachbarn auf 0,1228 nahe, ist also weiter entfernt als das engste vorhandene Paar. Kontrast 5,01:1 (noetig 4,5). Von sechs geprueften Rottoenen der mit dem groessten Abstand UND genug Kontrast. tools/kachel-farben.mjs weiss jetzt davon: Ein kuenftiger Lauf wuerde wieder Rosa vorschlagen, und das waere eine stille Ruecknahme einer ausdruecklichen Entscheidung. --- Ein Messfehler, der festgehalten gehoert --- Beim Pruefen von screen4 meldete meine Foto-Methode vier Beschriftungen unter 4,5:1 -- bei einem Verlust von 0,00 bis 0,15 durch das Universum. Dass die Ursache nicht das Universum sein konnte, stand damit schon in den Zahlen. Exakt gerechnet (Vordergrundfarbe gegen die tatsaechliche Flaeche darunter) liegen dieselben Texte bei 9,13:1 bis 10,76:1. Die Foto-Methode mittelt ueber alle helleren Bildpunkte, und bei duenner Grossbuchstabenschrift ist die Haelfte davon halb ausgeleuchtete Kantenpunkte. Fuer grosse Schrift taugt sie, fuer kleine Versalien meldet sie systematisch zu wenig. Haette ich ihr geglaubt, haette ich vier Farben "repariert", die in Ordnung sind. Geprueft: pruef-start-ansicht, pruef-css-klassen, pruef-kalender, pruef-buehne, pruef-handy, pruef-workspace-seiten, pruef-tagesruf -- alle in Ordnung. Dazu Ring und Uhr auf 248/248 nachgemessen, die Kopf-Muster gegen die Uhrzeit nachgerechnet (01:24:59 -> Sekunde bei 281,115, Minute bei 96,76, Stunde bei 16,493) und die Kachelfarbe gegen alle zwanzig anderen in OKLab geprueft. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+150
-59
@@ -860,7 +860,24 @@ body.start > main { position: relative; z-index: 1; }
|
||||
[data-ton="18"] { --ton: #9299fd; } /* Automationen */
|
||||
[data-ton="19"] { --ton: #796ce0; } /* Dateien */
|
||||
[data-ton="20"] { --ton: #fc88db; } /* Creator-Profile */
|
||||
[data-ton="21"] { --ton: #fdb0d2; } /* Scout */
|
||||
/* TON 21 IST VON HAND GESETZT (09.09.2026, screen6).
|
||||
|
||||
Filipe: "die farbe von dieser kategorie soll knall rot sein."
|
||||
Gemeint ist die Scout-Pipeline.
|
||||
|
||||
Die anderen zwanzig sind gerechnet (tools/kachel-farben.mjs, auf
|
||||
groesstmoeglichen Abstand in OKLab). Diese eine ist gewuenscht --
|
||||
und deshalb wurde sie GEGEN den Satz geprueft statt einfach
|
||||
eingetragen: Der kleinste Abstand zwischen zwei der 21 Farben liegt
|
||||
bei 0,0973. #ff1f2e kommt seinem naechsten Nachbarn (Ton 2,
|
||||
#e15e8e) auf 0,1228 nahe -- also weiter entfernt als das engste
|
||||
vorhandene Paar. Der Satz wird durch diese Farbe nicht schlechter,
|
||||
er wird an dieser Stelle sogar eindeutiger.
|
||||
|
||||
Kontrast auf dem dunklen Grund: 5,01:1 (noetig 4,5). Von sechs
|
||||
geprueften Rottoenen hat dieser den groessten Abstand UND genug
|
||||
Kontrast -- deshalb dieser und nicht der erstbeste. */
|
||||
[data-ton="21"] { --ton: #ff1f2e; } /* Scout-Pipeline -- Wunsch: knallrot */
|
||||
|
||||
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
|
||||
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
|
||||
@@ -5263,12 +5280,6 @@ body[data-fremde-sicht="ja"]::after {
|
||||
selbst sitzt oben auf dem Radius des Sekundenbogens. So braucht die
|
||||
Drehung keine Rechnung mit Winkelfunktionen: Der Kasten dreht sich,
|
||||
die Perle wird mitgenommen. */
|
||||
.uhr__perle {
|
||||
position: absolute; inset: 10px;
|
||||
z-index: 5; pointer-events: none;
|
||||
transform: rotate(0deg);
|
||||
transition: transform .12s cubic-bezier(.34, 1.56, .64, 1);
|
||||
}
|
||||
/* DER ABSTAND FOLGT DER BAHN, DIE FARBE FOLGT DER BAHN -- und beides
|
||||
muss beim Farbtausch mitgehen. Am 08.09.2026 habe ich genau das
|
||||
vergessen: Die drei BOEGEN waren getauscht (Stunde rot, Minute
|
||||
@@ -5282,46 +5293,15 @@ body[data-fremde-sicht="ja"]::after {
|
||||
|
||||
/* AUSSEN, BABYBLAU: der Kopf der Sekundenpunkte. Am groessten, weil er
|
||||
der einzige ist, der sich sichtbar bewegt. */
|
||||
.uhr__perle::before {
|
||||
content: "";
|
||||
position: absolute; top: 4.2%; left: 50%;
|
||||
width: 7px; height: 7px; margin-left: -3.5px;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 36% 32%, #fff 0%, #d8efff 34%, #7ec8f2 70%, #1d5a80 100%);
|
||||
box-shadow:
|
||||
0 0 6px 1px rgba(126, 200, 242, .75),
|
||||
0 0 13px 3px rgba(110, 180, 235, .3),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .55);
|
||||
}
|
||||
/* MITTE, SILBER: der Kopf der Minutenbalken. Poliertes Metall, kein
|
||||
Licht -- er ist der Bezug, an dem man die anderen beiden misst. */
|
||||
.uhr__perle--minute::before {
|
||||
top: 12.6%;
|
||||
width: 6px; height: 6px; margin-left: -3px;
|
||||
background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6edf6 34%, #97a4b4 70%, #414b58 100%);
|
||||
box-shadow:
|
||||
0 0 4px 1px rgba(220, 235, 255, .45),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .6);
|
||||
}
|
||||
/* INNEN, ROT: der Kopf der Stundenbalken. Der kleinste Punkt in der
|
||||
kraeftigsten Farbe -- er bewegt sich am wenigsten und darf deshalb
|
||||
auffallen, ohne zu stoeren. */
|
||||
.uhr__perle--stunde::before {
|
||||
top: 21.4%;
|
||||
width: 5.4px; height: 5.4px; margin-left: -2.7px;
|
||||
background: radial-gradient(circle at 36% 32%, #fff 0%, #ffb0b6 38%, #ff4257 72%, #7e1a24 100%);
|
||||
box-shadow:
|
||||
0 0 5px 1px rgba(255, 80, 95, .6),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */
|
||||
.uhr__perle { transition: none; }
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.uhr__zwoelf, .uhr__perle { display: none; }
|
||||
.uhr__schatten, .uhr__kante { display: none; }
|
||||
}
|
||||
|
||||
@@ -5474,6 +5454,37 @@ body[data-fremde-sicht="ja"]::after {
|
||||
}
|
||||
.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; }
|
||||
|
||||
/* DER VERSATZ MUSS DER BREITE FOLGEN (09.09.2026, screen5).
|
||||
|
||||
Die Kantenlage liegt als Gruppe 0,4 Einheiten hoeher als die Bahn
|
||||
darunter. Das war richtig, solange alle drei Baender aehnlich schmal
|
||||
waren. Inzwischen sind sie 3,2 / 5 / 5,8 breit -- und ein 0,9
|
||||
breiter Lichtstrich, der nur 0,4 versetzt ist, liegt auf einem
|
||||
5,8er Balken nicht auf der KANTE, sondern MITTEN DRIN. Im
|
||||
Bildschirmfoto lief ein heller Streifen quer durch jeden roten
|
||||
Stundenbalken; das war der Rest, den Filipe an den Stunden gestoert
|
||||
hat.
|
||||
|
||||
Damit der Strich die Kante gerade noch streift, muss er um
|
||||
(Bandbreite - Strichbreite) / 2 versetzt sein. Die Gruppe bringt
|
||||
davon schon 0,4 mit, der Rest kommt hier:
|
||||
|
||||
Sekunde (3,2 - 0,9) / 2 = 1,15 -> noch 0,75
|
||||
Minute (5,0 - 0,9) / 2 = 2,05 -> noch 1,65
|
||||
Stunde (5,8 - 0,9) / 2 = 2,45 -> noch 2,05
|
||||
|
||||
`px` in einem SVG-Transform sind Einheiten des viewBox, keine
|
||||
Bildpunkte -- die Uhr skaliert damit mit, ohne dass sich das
|
||||
Verhaeltnis verschiebt.
|
||||
|
||||
Dass die Kante immer NACH OBEN versetzt ist und nicht senkrecht zum
|
||||
jeweiligen Balken, ist Absicht: Es ist ein Licht von oben, kein
|
||||
aufgemalter Rand. Oben streift es die Oberkante, unten die
|
||||
Unterkante -- genau das tut Licht. */
|
||||
.uhr__kante .uhr__sekunde { transform: translateY(-0.75px); }
|
||||
.uhr__kante .uhr__minute { transform: translateY(-1.65px); }
|
||||
.uhr__kante .uhr__stunde { transform: translateY(-2.05px); }
|
||||
|
||||
/* DIE ZIFFERNINSEL (07.09.2026).
|
||||
|
||||
Seit der Stundenring eine beleuchtete Oberkante hat, laeuft ein
|
||||
@@ -5878,11 +5889,7 @@ body[data-fremde-sicht="ja"]::after {
|
||||
statt bei 360 Grad zurueckzuspringen -- sonst liefe die Ueberblendung
|
||||
einmal je Minute rueckwaerts durch das ganze Zifferblatt. Genau das
|
||||
macht start.js jetzt (fortlaufende Sekunden statt sk % 60). */
|
||||
.uhr__perle {
|
||||
transition: transform .92s cubic-bezier(.33, 0, .2, 1);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uhr__perle { transition: none; }
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
@@ -6015,9 +6022,16 @@ body[data-fremde-sicht="ja"]::after {
|
||||
|
||||
/* ---- 3. Die Breiten, klar gestaffelt ----------------------------- */
|
||||
.uhr__minute { stroke-width: 5; }
|
||||
.uhr__stunde { stroke-width: 7; }
|
||||
/* 5,8 STATT 7 (09.09.2026, screen5). Zusammen mit der laengeren
|
||||
Gliedlaenge in start.js (5,5 -> 10) ergibt das ein Verhaeltnis von
|
||||
1,7:1 statt 0,79:1. Vorher war ein Stundenglied BREITER ALS LANG und
|
||||
las sich deshalb als Klotz quer auf der Bahn statt als Balken
|
||||
entlang. Zusaetzlich lief der helle Strich der Kantenlage (0,4 nach
|
||||
oben versetzt) mitten hindurch statt an der Oberkante -- bei einem
|
||||
laengeren Glied sitzt er wieder da, wo er hingehoert. */
|
||||
.uhr__stunde { stroke-width: 5.8; }
|
||||
.uhr__schatten .uhr__minute { stroke-width: 6; }
|
||||
.uhr__schatten .uhr__stunde { stroke-width: 8; }
|
||||
.uhr__schatten .uhr__stunde { stroke-width: 6.8; }
|
||||
|
||||
/* ---- 2. Die Sekunde als Punktreihe -------------------------------
|
||||
`stroke-linecap: round` plus eine Strichlaenge nahe null ergibt
|
||||
@@ -6036,12 +6050,6 @@ body[data-fremde-sicht="ja"]::after {
|
||||
/* (Die Scheine selbst: siehe Dateiende, ein Satz fuer alle drei.) */
|
||||
/* Auch die Perlen: harte Kante, enger Schein. Ein Lichtpunkt ist
|
||||
scharf -- was leuchtet, hat einen Rand. */
|
||||
.uhr__perle::before {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, .75),
|
||||
0 0 4px 0 currentColor;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
DIE DREI FARBEN, NEU VERTEILT (08.09.2026)
|
||||
|
||||
@@ -6083,10 +6091,6 @@ body[data-fremde-sicht="ja"]::after {
|
||||
|
||||
/* Die Koepfe tragen die Farbe ihrer Bahn -- sonst zeigte ein blauer
|
||||
Punkt auf eine rote Reihe. */
|
||||
.uhr__perle::before { color: rgba(126, 200, 242, .9); }
|
||||
.uhr__perle--minute::before { color: rgba(226, 236, 248, .85); }
|
||||
.uhr__perle--stunde::before { color: rgba(255, 92, 104, .9); }
|
||||
|
||||
/* ---- Der Punktkranz: rot, schwarz, babyblau im Wechsel -----------
|
||||
|
||||
Drei Farben in einem `repeating-conic-gradient`: je 6 Grad ein
|
||||
@@ -6196,17 +6200,41 @@ body[data-fremde-sicht="ja"]::after {
|
||||
fuenf Aufklebern und einem Raum mit Tiefe. Die Unschaerfe ist hier
|
||||
ausdruecklich richtig (Entfernung), waehrend sie an der Uhr
|
||||
ausdruecklich falsch war (dort ist alles gleich nah). */
|
||||
.willkommen > .zuniversum .zuniversum__chili {
|
||||
.willkommen > .zuniversum .zuniversum__chili,
|
||||
.willkommen > .zuniversum .zuniversum__husky {
|
||||
position: absolute;
|
||||
left: var(--x); top: var(--y);
|
||||
width: var(--gr); height: var(--gr);
|
||||
margin: calc(var(--gr) / -2);
|
||||
background: url("../img/marke-spicy.webp") center / contain no-repeat;
|
||||
opacity: var(--tief);
|
||||
filter: blur(calc((.11 - var(--tief)) * 22px));
|
||||
animation: zuni-schweben var(--dauer) ease-in-out var(--ver) infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
.willkommen > .zuniversum .zuniversum__chili {
|
||||
background: url("../img/marke-spicy.webp") center / contain no-repeat;
|
||||
}
|
||||
/* DER HUSKY ALS MASKE (09.09.2026, screen4).
|
||||
|
||||
Filipe: "setz in den hintergrund noch 1-2 peperonis und dan das logo
|
||||
von dogfather, also nur den husky."
|
||||
|
||||
Die Datei ist schwarz-weiss und freigestellt (nachgemessen: 49 %
|
||||
durchsichtig). Als Hintergrundbild bei 15 % Deckkraft verschwaenden
|
||||
die schwarzen Flaechen im dunklen Grund, uebrig blieben die hellen
|
||||
Stellen -- ein zerrissener Umriss, kein Hund. Als MASKE ueber einer
|
||||
Farbflaeche wird daraus eine geschlossene Silhouette, und die traegt
|
||||
DogFathers Babyblau. Im Universum schweben damit die beiden Marken
|
||||
des Hauses in ihren beiden Farben.
|
||||
|
||||
Er ist eine Spur staerker eingestellt als die Chilis: Eine
|
||||
geschlossene Silhouette wirkt bei gleicher Deckkraft leiser als eine
|
||||
mit Aussparungen -- beim Chili fuehrt die Flamme innen den Blick. */
|
||||
.willkommen > .zuniversum .zuniversum__husky {
|
||||
background: #7ec8f2;
|
||||
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
||||
mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
||||
}
|
||||
|
||||
/* Die Bahn: eine langgezogene Acht statt eines Kreises. Ein Kreis
|
||||
sieht nach Karussell aus, sobald man ihn zweimal gesehen hat; eine
|
||||
@@ -6232,7 +6260,8 @@ body[data-fremde-sicht="ja"]::after {
|
||||
nicht "weniger Gestaltung". */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.willkommen > .zuniversum::before,
|
||||
.willkommen > .zuniversum .zuniversum__chili { animation: none; }
|
||||
.willkommen > .zuniversum .zuniversum__chili,
|
||||
.willkommen > .zuniversum .zuniversum__husky { animation: none; }
|
||||
}
|
||||
|
||||
/* Auf schmalen Bildschirmen wird die Kachel hoch und schmal. Fuenf
|
||||
@@ -6241,8 +6270,15 @@ body[data-fremde-sicht="ja"]::after {
|
||||
aussieht", sondern weil bei 380 px Breite der 122-px-Chili ein
|
||||
Drittel der Kachel einnimmt und hinter dem Titel steht. */
|
||||
@media (max-width: 700px) {
|
||||
.willkommen > .zuniversum .zuniversum__chili:nth-child(1),
|
||||
.willkommen > .zuniversum .zuniversum__chili:nth-child(3) { display: none; }
|
||||
/* Auf schmalen Schirmen bleiben vier von acht Motiven. `> :nth-child`
|
||||
statt `.zuniversum__chili:nth-child` -- die Kinder sind jetzt
|
||||
zweierlei, und ein Klassenname im Selektor haette beim Zaehlen
|
||||
trotzdem ALLE Geschwister mitgezaehlt. Das sieht richtig aus und
|
||||
trifft die falschen. */
|
||||
.willkommen > .zuniversum > :nth-child(1),
|
||||
.willkommen > .zuniversum > :nth-child(3),
|
||||
.willkommen > .zuniversum > :nth-child(7),
|
||||
.willkommen > .zuniversum > :nth-child(8) { display: none; }
|
||||
}
|
||||
|
||||
/* Wo Benachrichtigungen gar nicht gehen, sieht man das dem Knopf an --
|
||||
@@ -6604,3 +6640,58 @@ body[data-fremde-sicht="ja"]::after {
|
||||
/* Der Haken gehoert ueber die Raendelung -- sonst liegt der Ring auf
|
||||
ihm. */
|
||||
.zahlen-leer__haken svg { position: relative; z-index: 1; }
|
||||
|
||||
/* =====================================================================
|
||||
DAS LETZTE GLIED LEUCHTET (screen5, 09.09.2026)
|
||||
|
||||
Filipe: "ich will dass du die punkte ersetzt und immer der letzte
|
||||
soll mehr strahlen oder so, mach das richtig geil."
|
||||
|
||||
An dieser Stelle liefen bis heute drei HTML-Perlen auf eigenen
|
||||
Bahnen. Sie waren ein zweites Ding an einer zweiten Stelle -- mit
|
||||
eigener Winkelrechnung, eigener Farbe und eigener Groesse. Genau
|
||||
deshalb standen sie am 08.09. in den falschen Farben, als die Bahnen
|
||||
getauscht wurden: Wer eine Sache an zwei Orten fuehrt, aendert
|
||||
irgendwann nur einen.
|
||||
|
||||
Jetzt zeichnet eine zweite SVG-Lage dasselbe letzte Glied noch
|
||||
einmal -- heller, mit engem Schein. Sie kann gar nicht danebenstehen:
|
||||
Ort und Laenge kommen aus derselben Funktion wie die Reihe darunter.
|
||||
|
||||
HELLER STATT GROESSER. Der Kopf hat dieselbe Breite und dieselbe
|
||||
Laenge wie jedes andere Glied. Waere er groesser, waere er ein
|
||||
Fremdkoerper in der Reihe; heller ist er dasselbe Glied, nur eben das
|
||||
aktuelle. Das ist der Unterschied zwischen einem Zeiger, der auf die
|
||||
Reihe zeigt, und einer Reihe, die selbst sagt, wo sie steht.
|
||||
|
||||
AUGENSCHONEND: Der Schein ist ENG (2 bis 3 px) und pulsiert nicht.
|
||||
Er soll die Stelle markieren, nicht die Aufmerksamkeit fesseln -- die
|
||||
Uhr steht dauerhaft im Bild. Eine Ueberblendung von .25 s macht den
|
||||
Sprung von Glied zu Glied weich, ohne dass etwas wandert.
|
||||
===================================================================== */
|
||||
.uhr__kopf {
|
||||
fill: none;
|
||||
stroke-linecap: inherit;
|
||||
transition: stroke-dashoffset .25s cubic-bezier(.34, 1.2, .64, 1);
|
||||
}
|
||||
.uhr__kopf--sekunde {
|
||||
stroke: #dff2ff;
|
||||
stroke-width: 3.6;
|
||||
stroke-linecap: round;
|
||||
filter: drop-shadow(0 0 2.4px rgba(150, 215, 250, .95));
|
||||
}
|
||||
.uhr__kopf--minute {
|
||||
stroke: #ffffff;
|
||||
stroke-width: 5.2;
|
||||
filter: drop-shadow(0 0 2.2px rgba(226, 238, 250, .9));
|
||||
}
|
||||
.uhr__kopf--stunde {
|
||||
stroke: #ffd9dd;
|
||||
stroke-width: 6;
|
||||
filter: drop-shadow(0 0 3px rgba(255, 110, 122, .95));
|
||||
}
|
||||
/* Wer weniger Bewegung will, bekommt den Sprung ohne Ueberblendung --
|
||||
der Kopf steht dann einfach am richtigen Glied. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uhr__kopf { transition: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user