Vertraulicher Meldeweg, klappbare Abschnitte, lila Stunden, Logos
Eine Nacht voller Auftraege von Filipe. Der Reihe nach: 1. VERTRAULICH MELDEN -- der groesste neue Teil. "es soll auch eine kategorie also eine hauptkachel geben wo die community leute sich anonym melden koennen wenn sie probleme haben ... rechte hand und dogfather sollen zugriff auf diese anonyme nachrichten haben. also anonym fuer die anderen." WICHTIG, UND ES STEHT SO AUF DER SEITE: "anonym" heisst hier VERTRAULICH. DogFather und die rechte Hand sehen den Namen -- so bestellt und auch richtig, ohne Namen kann man niemandem helfen. Anonym ist es gegenueber allen anderen: kein Modi, kein anderes Mitglied. Wer glaubt, er schreibe unerkannt, schreibt anders und fuehlt sich hinterher getaeuscht -- deshalb steht der Satz im Formular, bevor jemand tippt. Der strikte Wechsel (melden -> warten -> antworten -> warten) ist im SERVER erzwungen, nicht nur im Knopf. Ein ausgegrauter Knopf ist keine Regel. Geschlossen wird nur von der Leitung; abgeschlossene Faelle werden nach 90 Tagen samt Nachrichten geloescht -- hier stehen die empfindlichsten Texte des Hauses. Modis sind ausdruecklich AUSSEN VOR: Sehr oft geht es in diesen Meldungen um eine Moderationsentscheidung. 2. JEDE KATEGORIE LAESST SICH ZUKLAPPEN. "man soll auf dieser seite jede kategorie auf und zu klappen koennen mit einem button ... ueberall wo so eine liste entstehen kann." Das Muster gab es auf der Startseite schon; es steht jetzt als `abschnittKlappbar` in kopf.js und wird von den Brettern und dem Zeitstrahl benutzt. Die Koepfe sind echte <button> (fuer die Tastatur), der Zustand haelt in localStorage, und er haengt je Brett UND Art -- sonst waere "Regel zugeklappt" ueberall gleichzeitig zu. 3. DIE SPRUNGLEISTE SIEHT AUS WIE ETWAS ZUM ANFASSEN. Vorher unterstrichene Woerter, die aussahen wie eine Fusszeile. Jetzt Marken mit Rahmen in einem eigenen Block. 4. DIE STUNDEN SIND LILA. UMGERECHNET, NICHT NEU GEWAEHLT: Jeder der fuenf Verlaufsstopps wurde nach OKLCH zerlegt, der Farbton auf 303 Grad gedreht, zurueckgerechnet. Helligkeit und Buntheit blieben gleich -- eine frei gegriffene Palette waere heller oder bunter geworden, und die Uhr damit unruhiger. 5. DIE KARTEN "UNSERE SEITEN": babyblau und lila, mit schwebenden Logos. Beide Logos wurden zu MASKEN gerechnet (tools/logo-maske.mjs): Die PNG tragen nur Alpha, die Farbe kommt aus dem CSS. Dadurch passt dasselbe Logo in jede Kachel, egal welchen Ton sie hat -- und VanVans 378-KB- Logo wurde dabei zu 109 KB. Vier Stueck je Karte, verschieden gross, zwei Bahnen, 26 bis 41 Sekunden Umlauf. Der erste Versuch war mit 5-9 % Deckkraft praktisch unsichtbar; jetzt 10-16 %. 6. "ENTWICKLUNG" HEISST JETZT "EURE AUFGABEN". Filipe hat recht: Die Kachel fuehrt seit dem 11.09. auf den Katalog -- eine Aufgabenliste. Der Name blieb stehen, weil beim Umhaengen des Ziels niemand ihn angefasst hat. Der Name "Entwicklung" ist damit frei fuer das, was er darunter versteht (Auswertung je Person mit Verlauf und Text) -- das ist noch NICHT gebaut. DREI PRUEFUNGEN, DIE ZUFAELLIG GRUEN WAREN, sind nebenbei aufgefallen: - pruef-kachelraster wartete feste 500 ms auf eine gestaffelte Einblendung und mass vier Reihen, wo drei sind. Jetzt reducedMotion. - pruef-start-ansicht scrollte 600 px und nahm an, danach liege keine Kachel mehr unter dem Zeiger. - pruef-wege-nach-draussen zaehlte das Kachelraster ueber ALLE Gruppen statt je Gruppe. GEMESSEN: pruef-hilfe (neu) 55/0, pruef-wege-nach-draussen 64/0, pruef-jeder-hat-eine-seite 65/0, pruef-community-sicht 10/0, pruef-bereiche-lesend, pruef-steckbrief, pruef-start-ansicht, pruef-kachelraster alle gruen. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1612,3 +1612,128 @@
|
||||
.marke-art[data-art="folge"] { --art-ton: #e8a5b4; }
|
||||
.marke-art[data-art="gesucht"] { --art-ton: #ceb480; }
|
||||
.marke-art[data-art="lust"] { --art-ton: #bfdbb1; }
|
||||
|
||||
/* =====================================================================
|
||||
AUF- UND ZUKLAPPEN, UND DIE SPRUNGLEISTE (19.09.2026)
|
||||
|
||||
Filipe, zwei Sätze an einem Abend:
|
||||
„man soll auf dieser seite jede kategorie auf und zu klappen können
|
||||
mit einem button ... überall wo so eine liste entstehen kann"
|
||||
„das soll viel geiler aussehen bitte" (zur Sprungleiste)
|
||||
===================================================================== */
|
||||
|
||||
/* ---- Die Abschnittsköpfe sind jetzt Knöpfe --------------------------
|
||||
|
||||
Sie sahen als Überschrift gut aus und sollen genauso aussehen — ein
|
||||
Knopf, der wie ein Knopf aussieht, wäre hier ein Rückschritt: Die
|
||||
Gliederung ist das Wichtige, das Zuklappen die Zugabe. Deshalb erbt
|
||||
der Knopf das komplette Aussehen der alten Überschrift und bekommt
|
||||
nur zwei Dinge dazu: einen Zeiger und einen Pfeil. */
|
||||
.brettabschnitt,
|
||||
.zeitstrahl__schild {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
/* 44 px hoch, damit ein Daumen ihn trifft — als Überschrift waren es
|
||||
je nach Schriftgröße auch mal 18. */
|
||||
min-height: 44px;
|
||||
}
|
||||
.brettabschnitt:focus-visible,
|
||||
.zeitstrahl__schild:focus-visible {
|
||||
outline: 2px solid var(--akzent, #5aa0e0);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.brettabschnitt:hover .brettabschnitt__wort,
|
||||
.zeitstrahl__schild:hover .zeitstrahl__wort { color: var(--text); }
|
||||
|
||||
.brettabschnitt__wort,
|
||||
.zeitstrahl__wort { flex: 0 0 auto; }
|
||||
|
||||
/* Der Pfeil steht GANZ RECHTS, hinter der auslaufenden Linie — dort
|
||||
sucht man ihn, und dort steht er auch auf der Startseite. */
|
||||
.klapp-pfeil {
|
||||
order: 9;
|
||||
flex: none;
|
||||
width: 18px; height: 18px;
|
||||
color: var(--text-still);
|
||||
transition: transform .2s ease, color .2s ease;
|
||||
}
|
||||
[data-zu="ja"] .klapp-pfeil { transform: rotate(-90deg); }
|
||||
.brettabschnitt:hover .klapp-pfeil,
|
||||
.zeitstrahl__schild:hover .klapp-pfeil { color: var(--text-leise); }
|
||||
|
||||
/* Ein zugeklappter Abschnitt soll SICHTBAR zu sein, nicht nur leer.
|
||||
Ohne diesen Hinweis sieht es aus, als fehle der Inhalt. */
|
||||
.brettabschnitt[data-zu="ja"] .brettabschnitt__zahl,
|
||||
.zeitstrahl__schild[data-zu="ja"] .zeitstrahl__zahl {
|
||||
background: color-mix(in srgb, var(--akzent, #5aa0e0) 22%, transparent);
|
||||
color: var(--text-leise);
|
||||
}
|
||||
|
||||
.brettabschnitt__inhalt[hidden],
|
||||
.zeitstrahl__inhalt[hidden] { display: none; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.klapp-pfeil { transition: none; }
|
||||
}
|
||||
|
||||
/* ---- Die Sprungleiste ------------------------------------------------
|
||||
|
||||
Vorher: eine Reihe unterstrichener Wörter mit kleinen Zahlen. Auf
|
||||
dem Bildschirmfoto sah das aus wie eine Fußzeile — man übersieht
|
||||
sie, und wer sie sieht, hält sie für Filter (genau die Verwechslung,
|
||||
gegen die schon die Wörter „Springe zu" gebaut wurden).
|
||||
|
||||
Jetzt: echte Marken mit Rahmen und eigenem Grund. Sie sehen nach
|
||||
etwas aus, das man anfassen kann — und die Zahl sitzt darin statt
|
||||
daneben. Die Unterstreichung entfällt: Ein Rahmen sagt dasselbe,
|
||||
ohne die Zeile unruhig zu machen. */
|
||||
.brettmarken {
|
||||
gap: 8px 10px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 12px;
|
||||
/* Ein sehr flacher Verlauf statt einer Trennlinie: Die Leiste hebt
|
||||
sich als BLOCK ab, statt nur einen Strich zu ziehen. */
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
|
||||
}
|
||||
.brettmarken__wort {
|
||||
font-size: .74rem;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
.brettmarken__weg {
|
||||
gap: 7px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--rand);
|
||||
background: rgba(255, 255, 255, .03);
|
||||
text-decoration: none;
|
||||
transition: border-color var(--tempo), background-color var(--tempo),
|
||||
color var(--tempo), transform var(--tempo);
|
||||
}
|
||||
.brettmarken__weg:hover,
|
||||
.brettmarken__weg:focus-visible {
|
||||
color: var(--text);
|
||||
border-color: color-mix(in srgb, var(--akzent, #5aa0e0) 45%, var(--rand));
|
||||
background: color-mix(in srgb, var(--akzent, #5aa0e0) 12%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.brettmarken__zahl {
|
||||
background: rgba(255, 255, 255, .09);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.brettmarken__weg { transition: none; }
|
||||
.brettmarken__weg:hover { transform: none; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
/* =====================================================================
|
||||
VERTRAULICH MELDEN (19.09.2026)
|
||||
|
||||
Der Ton dieser Seite ist bewusst RUHIGER als der Rest des Hauses.
|
||||
Wer hier schreibt, hat meist Ärger — eine Seite, die dabei glitzert,
|
||||
wirkt unernst. Keine Verläufe über die ganze Fläche, keine Bewegung,
|
||||
keine leuchtenden Kacheln. Die Farbe (Ton 39, #1acae2) kommt nur an
|
||||
den Rändern vor.
|
||||
===================================================================== */
|
||||
|
||||
:root { --hilfe-ton: #1acae2; }
|
||||
|
||||
/* ---- Der Hinweis, wer mitliest -------------------------------------- */
|
||||
.vertrauen {
|
||||
display: flex;
|
||||
gap: .9rem;
|
||||
align-items: flex-start;
|
||||
margin: 1.2rem 0 0;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: .8rem;
|
||||
border: 1px solid color-mix(in srgb, var(--hilfe-ton) 32%, transparent);
|
||||
background: color-mix(in srgb, var(--hilfe-ton) 7%, transparent);
|
||||
}
|
||||
.vertrauen__zeichen {
|
||||
flex: 0 0 auto;
|
||||
display: grid; place-items: center;
|
||||
width: 2.2rem; height: 2.2rem;
|
||||
}
|
||||
.vertrauen__zeichen svg {
|
||||
width: 100%; height: 100%;
|
||||
fill: none;
|
||||
stroke: color-mix(in srgb, var(--hilfe-ton) 75%, #dceaf8);
|
||||
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.vertrauen__text {
|
||||
margin: 0;
|
||||
font-size: .92rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.vertrauen__text strong { color: #e9f2fb; }
|
||||
|
||||
/* ---- Blöcke ---------------------------------------------------------- */
|
||||
.hilfe-block { margin: 1.6rem 0 0; }
|
||||
.hilfe-block__kopf {
|
||||
display: flex; align-items: center; gap: .8rem;
|
||||
margin: 0 0 .8rem;
|
||||
}
|
||||
.hilfe-block__titel { margin: 0; font-size: 1.1rem; }
|
||||
.hilfe-block__zahl {
|
||||
font-size: .8rem;
|
||||
padding: .1rem .5rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--rand, #26374b);
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.hilfe-block__kopf .knopf { margin-left: auto; }
|
||||
|
||||
.hilfe-leer {
|
||||
margin: 0;
|
||||
padding: 1.1rem;
|
||||
border: 1px dashed var(--rand, #26374b);
|
||||
border-radius: .7rem;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
|
||||
/* ---- Eine Zeile in der Liste ---------------------------------------- */
|
||||
.fall-zeile {
|
||||
padding: .9rem 1rem;
|
||||
margin-bottom: .55rem;
|
||||
border: 1px solid var(--rand, #26374b);
|
||||
border-left: 3px solid var(--rand, #26374b);
|
||||
border-radius: .6rem;
|
||||
background: var(--flaeche, rgba(255,255,255,.02));
|
||||
cursor: pointer;
|
||||
transition: border-color .18s ease, transform .18s ease;
|
||||
}
|
||||
.fall-zeile:hover,
|
||||
.fall-zeile:focus-visible {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--hilfe-ton) 35%, var(--rand, #26374b));
|
||||
}
|
||||
/* DIE FARBE SAGT, WER DRAN IST — nicht, wie schlimm es ist.
|
||||
Ein rotes "dringend" wäre hier falsch: Jede Meldung ist für den,
|
||||
der sie schreibt, dringend. */
|
||||
.fall-zeile[data-stand="wartet_auf_antwort"] { border-left-color: #d9a441; }
|
||||
.fall-zeile[data-stand="antwort_da"] { border-left-color: var(--hilfe-ton); }
|
||||
.fall-zeile[data-stand="geschlossen"] { border-left-color: #4a5b70; opacity: .72; }
|
||||
|
||||
.fall-zeile__oben {
|
||||
display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
|
||||
}
|
||||
.fall-zeile__titel { margin: 0; font-size: 1rem; line-height: 1.35; }
|
||||
.fall-zeile__unten {
|
||||
display: flex; gap: .75rem; flex-wrap: wrap;
|
||||
margin: .45rem 0 0;
|
||||
font-size: .8rem;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.fall-zeile__wer { color: #cfe0f0; }
|
||||
|
||||
.fall-marke {
|
||||
flex: 0 0 auto;
|
||||
font-size: .72rem;
|
||||
letter-spacing: .04em;
|
||||
padding: .12rem .5rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.fall-marke[data-stand="wartet_auf_antwort"] { color: #d9a441; }
|
||||
.fall-marke[data-stand="antwort_da"] { color: var(--hilfe-ton); }
|
||||
.fall-marke[data-stand="geschlossen"] { color: #7d90a6; }
|
||||
|
||||
/* ---- Der Verlauf ----------------------------------------------------- */
|
||||
.fall-kopf {
|
||||
display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
|
||||
margin: 0 0 1rem;
|
||||
font-size: .82rem;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.fall-kopf__wer { color: #cfe0f0; }
|
||||
|
||||
.blase {
|
||||
max-width: 44rem;
|
||||
padding: .8rem 1rem;
|
||||
margin-bottom: .7rem;
|
||||
border-radius: .7rem;
|
||||
border: 1px solid var(--rand, #26374b);
|
||||
}
|
||||
/* Zwei Seiten, zwei Ausrichtungen. Auf dem Handy genügt der Versatz —
|
||||
zwei Spalten wären dort zu eng. */
|
||||
.blase[data-seite="melder"] {
|
||||
background: rgba(255,255,255,.025);
|
||||
}
|
||||
.blase[data-seite="leitung"] {
|
||||
margin-left: auto;
|
||||
border-color: color-mix(in srgb, var(--hilfe-ton) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--hilfe-ton) 6%, transparent);
|
||||
}
|
||||
.blase__wer {
|
||||
margin: 0 0 .3rem;
|
||||
font-size: .76rem;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.blase__text {
|
||||
margin: 0;
|
||||
/* Zeilenumbrüche aus dem Text erhalten, ohne HTML zuzulassen. */
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.blase__fuss {
|
||||
margin: .45rem 0 0;
|
||||
font-size: .74rem;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
|
||||
/* ---- Formulare ------------------------------------------------------- */
|
||||
.hilfe-form { margin: .4rem 0 0; }
|
||||
.hilfe-form--antwort { margin-top: 1.1rem; }
|
||||
.hilfe-form .feld { display: block; margin-bottom: .9rem; }
|
||||
.hilfe-form .feld__schild {
|
||||
display: block;
|
||||
margin-bottom: .35rem;
|
||||
font-size: .86rem;
|
||||
color: #cfe0f0;
|
||||
}
|
||||
.hilfe-form .feld__pflicht {
|
||||
font-size: .76rem;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.hilfe-form input[type="text"],
|
||||
.hilfe-form textarea {
|
||||
width: 100%;
|
||||
padding: .7rem .85rem;
|
||||
border-radius: .55rem;
|
||||
border: 1px solid var(--rand, #26374b);
|
||||
background: rgba(0,0,0,.25);
|
||||
color: #e9f2fb;
|
||||
font: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hilfe-form textarea { resize: vertical; min-height: 6rem; }
|
||||
.hilfe-form input:focus-visible,
|
||||
.hilfe-form textarea:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--hilfe-ton) 60%, transparent);
|
||||
outline-offset: 1px;
|
||||
border-color: color-mix(in srgb, var(--hilfe-ton) 45%, transparent);
|
||||
}
|
||||
.hilfe-form__hinweis {
|
||||
margin: 0 0 .9rem;
|
||||
font-size: .82rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
.hilfe-form__fuss {
|
||||
display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
|
||||
}
|
||||
.hilfe-form__stand {
|
||||
font-size: .82rem;
|
||||
color: var(--text-leise, #93a7bd);
|
||||
}
|
||||
|
||||
.fall-warten {
|
||||
margin: 1.1rem 0 0;
|
||||
padding: .9rem 1rem;
|
||||
border-radius: .6rem;
|
||||
border: 1px dashed var(--rand-hell, #33465e);
|
||||
color: var(--text-leise, #93a7bd);
|
||||
font-size: .9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fall-zeile { transition: none; }
|
||||
.fall-zeile:hover { transform: none; }
|
||||
}
|
||||
@@ -1116,6 +1116,17 @@ body.start > main { position: relative; z-index: 1; }
|
||||
(Ton 33), Kontrast 4.51:1. Blau ist die einzige Ecke, die im Treff
|
||||
noch frei war — das ist kein Zufall, sondern das Ergebnis. */
|
||||
[data-ton="38"] { --ton: #087ce7; } /* Unsere Seiten */
|
||||
/* VERTRAULICH MELDEN (19.09.2026) -- ebenfalls abgesucht, nicht gewaehlt.
|
||||
140 973 lesbare Kandidaten, gewonnen hat der mit dem groessten
|
||||
Mindestabstand zu allen neun belegten Toenen: OKLCH L=0.77 C=0.130
|
||||
H=210, Abstand 0.221, Kontrast 9.47:1.
|
||||
|
||||
Der Abstand ist kleiner als bei Ton 38 (0.310) -- das ist keine
|
||||
Nachlaessigkeit, sondern die Folge davon, dass neun Toene belegt
|
||||
sind. Mehr ist im lesbaren Bereich nicht zu holen; wer den naechsten
|
||||
hinzufuegt, sollte das wissen und notfalls einen alten verschieben,
|
||||
statt die Schwelle stillschweigend zu senken. */
|
||||
[data-ton="39"] { --ton: #1acae2; } /* Vertraulich melden */
|
||||
|
||||
/* 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
|
||||
@@ -6869,6 +6880,21 @@ body[data-fremde-sicht="ja"]::after {
|
||||
sekunden babyblau. die punkte herum sollen eine mischung von rot
|
||||
schwarz und babyblau sein."
|
||||
|
||||
SEIT DEM 19.09.2026 IST DIE STUNDE LILA. Filipe: "die stunden sollen
|
||||
nicht rot sondern lila sein."
|
||||
|
||||
UMGERECHNET, NICHT NEU GEWAEHLT: Jeder der fuenf Verlaufsstopps
|
||||
wurde nach OKLCH zerlegt, sein Farbton auf 303 Grad gedreht und
|
||||
zurueckgerechnet -- Helligkeit und Buntheit blieben auf den
|
||||
Tausendstel gleich. Eine frei gegriffene Lila-Palette waere mit
|
||||
hoher Wahrscheinlichkeit heller oder bunter geworden, und damit
|
||||
waere die Uhr unruhiger, obwohl sich "nur die Farbe" geaendert hat.
|
||||
303 Grad ist der erste Ton im Lila-Bereich, bei dem alle acht Werte
|
||||
(fuenf Stopps, Kopf, zwei Scheine) noch darstellbar sind.
|
||||
|
||||
Die Begruendung darunter gilt unveraendert: Die Stunde bewegt sich
|
||||
kaum und darf deshalb die kraeftigste Farbe tragen.
|
||||
|
||||
Die Zuordnung ist nicht beliebig, sie folgt der Geschwindigkeit:
|
||||
Die SEKUNDE laeuft dauernd und bekommt das ruhigste Babyblau --
|
||||
staendige Bewegung in Signalrot ermuedet. Die STUNDE bewegt sich
|
||||
@@ -6897,7 +6923,7 @@ body[data-fremde-sicht="ja"]::after {
|
||||
durchgehalten. */
|
||||
.uhr__ring > .uhr__sekunde { filter: drop-shadow(0 0 1.4px rgba(126, 200, 242, .85)); }
|
||||
.uhr__ring > .uhr__minute { filter: drop-shadow(0 0 1.2px rgba(220, 232, 246, .6)); }
|
||||
.uhr__ring > .uhr__stunde { filter: drop-shadow(0 0 1.4px rgba(255, 92, 104, .8)); }
|
||||
.uhr__ring > .uhr__stunde { filter: drop-shadow(0 0 1.4px rgba(182, 119, 255, .8)); }
|
||||
.uhr__schatten .uhr__sekunde, .uhr__schatten .uhr__minute, .uhr__schatten .uhr__stunde,
|
||||
.uhr__kante .uhr__sekunde, .uhr__kante .uhr__minute, .uhr__kante .uhr__stunde { filter: none; }
|
||||
|
||||
@@ -7576,9 +7602,9 @@ body[data-fremde-sicht="ja"]::after {
|
||||
das ist der Unterschied zwischen "das ist die aktuelle Stunde" und
|
||||
"da stimmt etwas nicht". */
|
||||
.uhr__kopf--stunde {
|
||||
stroke: #ff8c96;
|
||||
stroke: #c59cfc;
|
||||
stroke-width: 6;
|
||||
filter: drop-shadow(0 0 3px rgba(255, 110, 122, .95));
|
||||
filter: drop-shadow(0 0 3px rgba(187, 132, 254, .95));
|
||||
}
|
||||
/* Wer weniger Bewegung will, bekommt den Sprung ohne Ueberblendung --
|
||||
der Kopf steht dann einfach am richtigen Glied. */
|
||||
|
||||
@@ -36,22 +36,153 @@
|
||||
gap: .75rem;
|
||||
padding: 1.35rem 1.35rem 1.2rem;
|
||||
border-radius: 1.1rem;
|
||||
border: 1px solid color-mix(in srgb, var(--aussen-ton) 30%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--aussen-ton) 42%, transparent);
|
||||
/* DREI LAGEN STATT ZWEI (19.09.2026). Filipe: "auch der hintegrrund
|
||||
der kacheln, ich will es viel spezieller".
|
||||
|
||||
Vorher lag der Ton mit 7 % auf der Flaeche -- auf einem dunklen
|
||||
Bildschirm sieht man davon fast nichts, die Kachel wirkte grau.
|
||||
Jetzt: ein heller Bogen oben links (woher das Licht kommt), ein
|
||||
zweiter, schwacher unten rechts (damit die Flaeche nicht flach
|
||||
kippt) und ein Grundverlauf, der den Ton wirklich traegt.
|
||||
|
||||
Nach oben begrenzt bleibt es trotzdem: Der hellste Punkt liegt bei
|
||||
28 %, und Text steht nie darauf -- er hat seine eigene Lage. */
|
||||
background:
|
||||
radial-gradient(120% 100% at 8% 0%,
|
||||
color-mix(in srgb, var(--aussen-ton) 15%, transparent), transparent 62%),
|
||||
linear-gradient(160deg,
|
||||
color-mix(in srgb, var(--aussen-ton) 7%, #0d1523),
|
||||
#0a111d 68%);
|
||||
box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--aussen-ton) 75%, transparent);
|
||||
radial-gradient(120% 95% at 6% -5%,
|
||||
color-mix(in srgb, var(--aussen-ton) 28%, transparent), transparent 58%),
|
||||
radial-gradient(90% 80% at 105% 110%,
|
||||
color-mix(in srgb, var(--aussen-ton) 16%, transparent), transparent 62%),
|
||||
linear-gradient(158deg,
|
||||
color-mix(in srgb, var(--aussen-ton) 14%, #0c1420),
|
||||
#090f1a 72%);
|
||||
box-shadow:
|
||||
0 18px 38px -20px color-mix(in srgb, var(--aussen-ton) 85%, transparent),
|
||||
inset 0 1px 0 color-mix(in srgb, var(--aussen-ton) 22%, transparent);
|
||||
cursor: pointer;
|
||||
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
|
||||
}
|
||||
|
||||
/* Die Töne der beiden Karten. Sie stehen hier und nicht im HTML,
|
||||
damit eine dritte Karte eine Zeile braucht und nicht zehn. */
|
||||
.aussen--dogi { --aussen-ton: #087ce7; }
|
||||
.aussen--shop { --aussen-ton: #e0559b; }
|
||||
damit eine dritte Karte eine Zeile braucht und nicht zehn.
|
||||
|
||||
BABYBLAU UND LILA seit dem 19.09.2026 (Filipe: „die linke kachel soll
|
||||
babyblau sein und rechte lila").
|
||||
|
||||
Babyblau ist im Haus schon vergeben — es ist der Ton der Sekunde auf
|
||||
der Uhr (#7ec8f2), und dieselbe Farbe zweimal anders zu treffen wäre
|
||||
schlampig. Also derselbe Wert.
|
||||
|
||||
Das Lila ist dasselbe, in das an diesem Tag die Stunden der Uhr
|
||||
umgerechnet wurden (OKLCH-Farbton 303°). Beide Kacheln sprechen
|
||||
damit die Sprache, die die Startseite ohnehin spricht.
|
||||
|
||||
`--logo` nennt die Maske. Sie steht an der Karte und nicht am
|
||||
Logofeld, damit eine dritte Karte nur diese zwei Zeilen braucht. */
|
||||
.aussen--dogi {
|
||||
--aussen-ton: #7ec8f2;
|
||||
--logo: url("/assets/img/marke/maske-dogi.png");
|
||||
}
|
||||
.aussen--shop {
|
||||
--aussen-ton: #b284ec;
|
||||
--logo: url("/assets/img/marke/maske-vanvan.png");
|
||||
}
|
||||
|
||||
/* ---- DIE SCHWEBENDEN LOGOS ------------------------------------------
|
||||
|
||||
Vier Stück je Karte, verschieden groß, verschieden schnell, mit
|
||||
verschiedener Verzögerung. Gleich wäre Tapete.
|
||||
|
||||
SIE LIEGEN UNTER ALLEM (`z-index: 0` im eigenen Kontext, Text
|
||||
darüber). Die Deckkraft liegt zwischen 10 und 16 Prozent — der erste
|
||||
Versuch mit 5 bis 9 war auf dem Bildschirmfoto praktisch unsichtbar,
|
||||
und „soll mega aussehen" heißt nicht „soll man erahnen können".
|
||||
|
||||
Nach oben ist trotzdem eine Grenze: Ab etwa 25 Prozent fängt das
|
||||
Logo an, mit der Überschrift zu konkurrieren, und der Text wird
|
||||
mühsam. Was hier entstehen soll, ist Tiefe, kein zweiter Titel.
|
||||
|
||||
`mask-image` statt `background-image`: Die PNG-Dateien tragen nur
|
||||
Alpha. Die Farbe ist `currentColor` der Karte — dadurch ist das
|
||||
Logo automatisch babyblau bzw. lila, ohne zweite Datei. */
|
||||
.logo-feld {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.logo-feld__stueck {
|
||||
position: absolute;
|
||||
background-color: var(--aussen-ton);
|
||||
-webkit-mask-image: var(--logo);
|
||||
mask-image: var(--logo);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Die vier Lagen. Die Zahlen sind gesetzt, nicht gerechnet — ein
|
||||
Zufallsgenerator würde bei jedem Laden anders aussehen, und dann
|
||||
fällt niemandem mehr auf, wenn eines daneben liegt. */
|
||||
.logo-feld__stueck[data-n="1"] {
|
||||
width: 15rem; height: 15rem; right: -4.5rem; top: -3.5rem;
|
||||
opacity: .16;
|
||||
animation: logo-schweben-a 26s ease-in-out infinite;
|
||||
}
|
||||
.logo-feld__stueck[data-n="2"] {
|
||||
width: 8rem; height: 8rem; right: 4.5rem; bottom: -1.5rem;
|
||||
opacity: .13;
|
||||
animation: logo-schweben-b 34s ease-in-out infinite;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
.logo-feld__stueck[data-n="3"] {
|
||||
width: 5rem; height: 5rem; right: 12rem; top: 35%;
|
||||
opacity: .105;
|
||||
animation: logo-schweben-a 41s ease-in-out infinite;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
.logo-feld__stueck[data-n="4"] {
|
||||
width: 3.4rem; height: 3.4rem; right: 2rem; top: 18%;
|
||||
opacity: .14;
|
||||
animation: logo-schweben-b 29s ease-in-out infinite;
|
||||
animation-delay: -21s;
|
||||
}
|
||||
|
||||
/* ZWEI BAHNEN, NICHT EINE. Mit nur einer bewegten sich alle vier
|
||||
gleich — das sieht aus, als wackle die ganze Kachel. Die zweite
|
||||
läuft andersherum, dadurch entsteht der Eindruck, dass sie
|
||||
unabhängig voneinander treiben.
|
||||
|
||||
SEHR KLEINE WEGE (unter 14 px) und sehr lange Dauern (26–41 s). Was
|
||||
man beim Hinsehen als Bewegung erkennt, lenkt beim Lesen ab. Das hier
|
||||
merkt man erst, wenn man zweimal hinschaut — und genau das ist
|
||||
gemeint mit „ganz leicht bewegen". */
|
||||
@keyframes logo-schweben-a {
|
||||
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
||||
33% { transform: translate3d(-9px, -11px, 0) rotate(2.5deg); }
|
||||
66% { transform: translate3d(7px, -5px, 0) rotate(-1.8deg); }
|
||||
100% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
||||
}
|
||||
@keyframes logo-schweben-b {
|
||||
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
||||
40% { transform: translate3d(8px, 9px, 0) rotate(-3deg); }
|
||||
75% { transform: translate3d(-6px, 4px, 0) rotate(1.5deg); }
|
||||
100% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
||||
}
|
||||
|
||||
/* Wer weniger Bewegung will, bekommt die Logos trotzdem — nur still.
|
||||
Sie ganz zu entfernen wäre falsch: Sie sind Gestaltung, nicht
|
||||
Animation. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-feld__stueck { animation: none; }
|
||||
}
|
||||
|
||||
/* Der stille Schein im Hintergrund. Liegt UNTER allem (`z-index: -1`)
|
||||
und ist so schwach, dass er bei Tageslicht kaum auffällt — er soll
|
||||
@@ -62,9 +193,9 @@
|
||||
height: 78%;
|
||||
z-index: -1;
|
||||
background: radial-gradient(60% 60% at 50% 50%,
|
||||
color-mix(in srgb, var(--aussen-ton) 22%, transparent), transparent 70%);
|
||||
filter: blur(26px);
|
||||
opacity: .55;
|
||||
color-mix(in srgb, var(--aussen-ton) 34%, transparent), transparent 70%);
|
||||
filter: blur(30px);
|
||||
opacity: .7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -75,6 +206,14 @@
|
||||
box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--aussen-ton) 85%, transparent);
|
||||
}
|
||||
|
||||
/* ALLES, WAS MAN LIEST, LIEGT ÜBER DEN LOGOS. Ohne diese Zeile wandert
|
||||
der Text unter das Logofeld, sobald es eine eigene Ebene bekommt —
|
||||
die Karte sähe dann leer aus, und man sucht den Fehler beim Text. */
|
||||
.aussen > *:not(.logo-feld):not(.aussen__schein) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aussen__kopf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user