DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kein Weichzeichner mehr -- die Bilder werden scharf, die Kacheln Lampen

Browse Source 
Filipe: "gerade sehen die sogar leicht verschwommen aus ... die sollen
nicht durch die kacheln gehen ... ich wollte eine krasse aenderung."

Drei Ursachen, alle drei von mir eingebaut, alle drei gemessen:

1. ICH HABE 1647-PIXEL-BILDER ALS "uhd" MIT 2400 PIXELN AUSGELIEFERT.
   Am Morgen stand in derselben Datei, sein Schirm sei 2550 px breit und
   das groesste Bild 1600 -- meine "Loesung" war, die Ausgabe
   hochzurechnen. Es gab nie mehr Bildpunkte. Dazu fehlte der Schritt,
   den der Kommentar daneben selbst verlangt ("Verkleinern MITTELT
   Bildpunkte ... deshalb schaerft man danach nach"): Es wurde nie
   nachgeschaerft. Jetzt Unscharfmaske auf der ENDgroesse
   (Ausgabeschaerfung) und ein Glanz-Durchgang: die hellsten Stellen
   weich gezeichnet und additiv dazu -- Licht, das ueber seine Kante
   strahlt. Guete 0,80 -> 0,88, am Gate 0,93.

2. backdrop-filter: blur() UNTER JEDER FLAECHE. 16 px unter siebzehn
   Kacheln, 13 px unter sieben weiteren Flaechen, 26 px unter der
   Anmeldekarte. Ein Weichzeichner mittelt nicht nur, was hinter dem
   Element liegt -- er zieht seinen Radius weit darueber hinaus. Hinter
   der Anmeldetafel ist Schwarz, direkt daneben aber die hellste Stelle
   des Motivs: Die Karte wurde deshalb GRAU, gemessen rgb(46,57,64)
   statt rgb(15,22,34). Je schoener der Rahmen, desto grauer die Karte.
   Alle Weichzeichner raus, --flaeche 0,78 -> 0,89: Durchsicht bleibt,
   aber scharf.

3. DIE TAFELMESSUNG WAR FALSCH, UND ICH HABE SIE VON HAND "KORRIGIERT".
   Sie lief vom Inneren nach aussen und hielt beim ersten farbigen Punkt
   an -- links glueht der Rahmen breiter als rechts, also hielt sie dort
   frueher an (58,59 statt 55,37). Statt den Messfehler zu beheben, habe
   ich in der CSS "um 1,1 % nach links" geschaetzt. Ergebnis: 32 px
   schwarze Tafel blieben links offen. Jetzt wird die einzige
   Eigenschaft gesucht, die nur der Rahmen hat -- kraeftig UND farbig --,
   mit Gegenprobe auf der linken Bildhaelfte (dort muessen es 0 sein).

KACHELN: keine Politur mehr, ein anderes Ding. Jede steckt in einer
LEUCHTSCHIENE ihrer Kategoriefarbe, die Licht in die Platte wirft --
links scharfe Kante, rechts rund. Steiler Abfall (52 % statt 68 %):
beleuchtet, nicht eingefaerbt. Der Glanz wandert beim Ueberfahren
einmal durch. Dieselbe Sprache auf der Anmeldeseite: die vier Rollen
sind Tasten in Schienen (Gold/Bernstein/Gruen/Blau).

Zwei eigene Fehler nebenbei, beide durch das Unveraenderlichkeits-
Zeichen gefunden -- eine Zahl, die sich nach einer Aenderung KEIN Stueck
bewegt, sagt "falsche Stelle", nicht "zu wenig":
  - Dreimal exakt 4,16:1 an "Ueberfaellig". Der Pruefpunkt lag nicht auf
    dem Knopf, sondern in der Luecke daneben auf dem Bild. Ursache war
    das hellere Hochkant-Bild, nicht das Bedienelement -> mehr Schleier
    und weniger Glanz NUR fuer die Handy-Fassung. 4,16 -> 5,10.
  - Die Koernung der Anmeldekarte lag mit 90 % Deckkraft ohne Mischmodus
    ueber allem und hob jeden Bildpunkt um 30 Stufen. Jetzt 4 % mit
    overlay, auf eigener Ebene.
  - --flaeche anzuheben machte die WICHTIGE Anleitung duenner als eine
    gewoehnliche (88 gegen 89) -- feste Zahl neben beweglicher Groesse.
    Gefunden von pruef-lesbarkeit, jetzt an --flaeche gebunden.

Gruen: buehne (38), start-ansicht (136), handy (59), breiten (23),
lesbarkeit (14), css-klassen (15), barrierefrei (18), tempo (8).

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-07 03:10:13 +02:00
co-authored by Claude Opus 5
parent 947c9d8a26
commit 8efdb39ce9
59 changed files with 848 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+156 -42
View File
@@ -3980,30 +3980,96 @@ body[data-fremde-sicht="ja"]::after {
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
}
/* =====================================================================
LEUCHTKASTEN — der zweite Anlauf, und diesmal ein anderes Ding
(07.09.2026, abends)
Filipe zum ersten Anlauf: "das ist genau das gleiche ... ich wollte
eine krasse aenderung ... es muss einzigartig sein und der seite
angepasst." Und zum Hintergrund: "die sollen nicht durch die kacheln
gehen ... vielleicht ganz ganz ganz leicht durch zu sehen sein."
Er hat in beidem recht, und der zweite Satz erklaert den ersten.
DAS MATTGLAS WAR DER FEHLER. 16 px Weichzeichner hinter jeder Kachel
heisst: Unter jeder Kachel liegt eine verschwommene Fläche. Auf einer
Seite mit siebzehn Kacheln ist damit der grösste Teil des Bildes
verwaschen -- man sieht ein unscharfes Bild und hält das Bild für
unscharf. Genau das hat er gemeldet ("sehen die sogar leicht
verschwommen aus"), und ich hatte es selbst eingebaut, mit der
Begründung, Kachel und Bild sollten "zusammengehören". Sie gehören
auch zusammen, wenn die Kachel ein eigener Gegenstand ist -- Mattglas
war die falsche Antwort auf die richtige Frage.
WAS JETZT DA STEHT, IST EIN ANDERES DING, KEIN AUFGEHÜBSCHTES:
Die Kachel ist eine dunkle Platte, die in einer LEUCHTSCHIENE
steckt. Die Schiene ist die Farbe der Kategorie. Sie leuchtet nicht
nur am Rand -- sie WIRFT LICHT in die Platte hinein, das nach
rechts ausläuft. Deshalb ist die linke Kante scharf (dort sitzt sie
in der Schiene) und die rechte rund (dort ist sie frei).
Das ist der Unterschied zu vorher: Die Farbe war ein Strich AN der
Kachel; jetzt ist sie die Lichtquelle DER Kachel. Jede Kategorie
leuchtet in ihrem eigenen Licht, und man erkennt sie aus drei Metern
Entfernung, ohne ein Wort zu lesen.
Dazu drei Dinge, die eine Fläche zu einem Gegenstand machen und die
bleiben, weil sie richtig waren: Gewicht (zwei Schatten), Material-
stärke (Licht oben, Schatten unten) und Körnung. Neu dazu kommt der
GLANZ, der beim Überfahren über die Platte WANDERT -- so verhält sich
eine lackierte Oberfläche, wenn man den Kopf bewegt.
DURCHSICHT: 6 Prozent, und SCHARF. Genau das, worum er gebeten hat --
das Bild schimmert durch, ohne dass irgendwo etwas verwischt wird.
===================================================================== */
.kachel {
/* MATTGLAS. Der Anteil des Untergrunds ist mit Absicht hoch: Das Bild
dahinter ist der Grund, warum die Seite gut aussieht. 16 px
Weichzeichner sind gemessen -- darunter sieht man die Struktur des
Bildes durch und der Text flimmert, darüber wird es Milchglas und
das Motiv ist wieder weg. */
/* Links scharf, rechts rund. Das ist die Silhouette, an der man diese
Oberfläche wiedererkennt -- und der einzige Teil des Entwurfs, der
schon aus zehn Metern wirkt. */
border-radius: 4px 20px 20px 4px;
/* DREI SCHICHTEN, von oben nach unten:
1. das Licht der Schiene, das nach rechts ausläuft
2. die Platte selbst, leicht von oben links beleuchtet
3. 6 % Durchsicht (die Farbe ist nicht ganz deckend)
Kein backdrop-filter mehr -- nichts wird verwischt. */
background:
linear-gradient(158deg,
color-mix(in srgb, var(--ton) 24%, rgba(9, 13, 22, .70)),
rgba(8, 11, 19, .80) 64%);
backdrop-filter: blur(16px) saturate(135%);
-webkit-backdrop-filter: blur(16px) saturate(135%);
/* STEILER ABFALL, nicht flächig. Beim ersten Anlauf reichte das
Licht bis 68 % -- damit war die Kachel eingefärbt statt
beleuchtet, und eingefärbt sieht billig aus. Licht nimmt mit dem
Quadrat der Entfernung ab; die Stufen bilden das nach: satt an
der Schiene, nach einem Fünftel schon deutlich weniger, nach
einem Drittel nur noch ein Hauch. Das ist der Unterschied
zwischen "farbige Kachel" und "Kachel, auf die Licht fällt". */
linear-gradient(90deg,
color-mix(in srgb, var(--ton) 40%, transparent) 0%,
color-mix(in srgb, var(--ton) 15%, transparent) 9%,
color-mix(in srgb, var(--ton) 5%, transparent) 22%,
color-mix(in srgb, var(--ton) 1.5%, transparent) 38%,
transparent 52%),
linear-gradient(163deg,
rgba(23, 31, 45, .95) 0%,
rgba(11, 15, 24, .95) 58%,
rgba(8, 11, 18, .95) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* MATERIALSTÄRKE: Licht oben, Schatten unten -- beide innen.
GEWICHT: zwei Schatten, ein enger dunkler direkt darunter und ein
weiter weicher. Ein einzelner Schatten sieht immer nach Aufkleber
aus; erst die Kombination liest sich als "liegt auf etwas". */
aus; erst die Kombination liest sich als "liegt auf etwas".
Dazu innen links ein farbiger Saum: das Licht der Schiene, das auf
die Schnittkante der Platte fällt. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .45),
inset 0 -1px 0 rgba(0, 0, 0, .50),
inset 2px 0 0 -1px color-mix(in srgb, var(--ton) 30%, transparent),
0 2px 5px -2px rgba(0, 0, 0, .55),
0 14px 30px -18px rgba(0, 0, 0, .85);
0 16px 34px -20px rgba(0, 0, 0, .88);
border-color: color-mix(in srgb, var(--ton) 16%, rgba(150, 186, 220, .14));
border-color: color-mix(in srgb, var(--ton) 18%, rgba(150, 186, 220, .13));
transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
/* Die Körnung. Sie liegt über der Fläche, aber UNTER dem Inhalt --
@@ -4018,33 +4084,57 @@ body[data-fremde-sicht="ja"]::after {
border-radius: inherit;
}
/* DER GLANZ. Ein schmaler, sehr weicher Streifen quer über die obere
linke Ecke -- die Spiegelung einer Lichtquelle, die außerhalb des
Bildes liegt. Das ist der Unterschied zwischen einer matten und einer
lackierten Oberfläche, und er ist bewusst so schwach, dass man ihn
nicht als Streifen sieht, sondern nur als "die glänzt". */
/* DER GLANZ, UND ER WANDERT.
Ein breiter, sehr weicher Lichtstreifen schräg über die Platte -- die
Spiegelung einer Lampe, die ausserhalb des Bildschirms steht. Beim
Überfahren zieht er einmal von links nach rechts durch. Das ist der
Unterschied zwischen einer matten und einer lackierten Oberfläche:
Bei Lack wandert die Spiegelung, wenn man den Kopf bewegt.
Gemacht über `background-position`, nicht über eine zweite Ebene mit
`transform`. Grund: Die Kachel hat `overflow: hidden`; eine
verschobene Ebene müsste breiter sein als die Kachel und würde bei
`border-radius` an den Ecken abgeschnitten aussehen. Die Position
eines Verlaufs lässt sich dagegen sauber weich überblenden.
Die zweite Schicht ist das Licht, das dem Zeiger folgt -- sie bleibt
stehen (`background-size` 100 %), nur der Glanz bewegt sich. */
.kachel::after {
background:
linear-gradient(128deg,
rgba(255, 255, 255, .085) 0%,
rgba(255, 255, 255, .022) 16%,
rgba(255, 255, 255, 0) 34%),
radial-gradient(130% 150% at var(--mx) var(--my),
color-mix(in srgb, var(--ton) 22%, transparent), transparent 60%);
opacity: .46;
linear-gradient(100deg,
transparent 30%,
rgba(255, 255, 255, .045) 42%,
rgba(255, 255, 255, .11) 49%,
rgba(255, 255, 255, .035) 56%,
transparent 68%),
radial-gradient(120% 150% at var(--mx) var(--my),
color-mix(in srgb, var(--ton) 24%, transparent), transparent 62%);
background-size: 260% 100%, 100% 100%;
background-position: -30% 0, 0 0;
background-repeat: no-repeat;
opacity: .58;
transition: opacity var(--tempo), background-position .55s cubic-bezier(.35, 0, .2, 1);
}
/* Die farbige Kante bekommt Tiefe: oben satt, unten auslaufend, und
ein Hauch Leuchten nach innen. */
/* DIE LEUCHTSCHIENE. Kein Strich am Rand mehr, sondern eine Lichtquelle:
ein heller Kern, darüber ein Schein, der nach beiden Seiten austritt.
Oben am hellsten -- Leuchtstoff altert nach unten, und genau diese
Ungleichmäßigkeit macht den Unterschied zu einem gemalten Balken. */
.kachel::before {
width: 3px;
width: 4px;
border-radius: 4px 0 0 4px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--ton) 100%, transparent) 0%,
color-mix(in srgb, var(--ton) 72%, transparent) 42%,
transparent 94%);
box-shadow: 1px 0 8px -2px color-mix(in srgb, var(--ton) 55%, transparent);
opacity: .62;
color-mix(in srgb, var(--ton) 55%, #fff) 0%,
var(--ton) 26%,
color-mix(in srgb, var(--ton) 82%, transparent) 72%,
color-mix(in srgb, var(--ton) 46%, transparent) 100%);
box-shadow:
0 0 9px 0 color-mix(in srgb, var(--ton) 55%, transparent),
3px 0 20px -3px color-mix(in srgb, var(--ton) 42%, transparent);
opacity: .92;
transition: opacity var(--tempo), width var(--tempo), box-shadow var(--tempo);
}
/* ANHEBEN STATT AUFLEUCHTEN. Beim Überfahren wird die Kachel nicht
@@ -4058,11 +4148,22 @@ body[data-fremde-sicht="ja"]::after {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 -1px 0 rgba(0, 0, 0, .45),
inset 3px 0 0 -1px color-mix(in srgb, var(--ton) 52%, transparent),
0 4px 10px -4px rgba(0, 0, 0, .6),
0 22px 44px -22px rgba(0, 0, 0, .9),
0 0 26px -12px color-mix(in srgb, var(--ton) 60%, transparent);
0 24px 48px -24px rgba(0, 0, 0, .9),
0 0 30px -14px color-mix(in srgb, var(--ton) 65%, transparent);
}
.kachel:hover::before { opacity: 1; width: 3px; }
/* Die Schiene wird heller und strahlt weiter in die Platte -- nicht
breiter. Ein Balken, der beim Zeigen wächst, sieht nach Menü aus;
eine Lampe, die heller wird, nach Gerät. */
.kachel:hover::before {
opacity: 1;
box-shadow:
0 0 14px 0 color-mix(in srgb, var(--ton) 75%, transparent),
5px 0 34px -3px color-mix(in srgb, var(--ton) 58%, transparent);
}
/* Und der Glanz zieht einmal durch. */
.kachel:hover::after { background-position: 130% 0, 0 0; }
/* Beim Drücken sinkt sie zurück -- ohne diesen Gegenweg fühlt sich ein
Knopf an wie ein Bild von einem Knopf. */
@@ -4090,10 +4191,16 @@ body[data-fremde-sicht="ja"]::after {
0 0 0 1px color-mix(in srgb, var(--ton) 16%, transparent);
}
/* Auch die übrigen Flächen der Seite bekommen Mattglas und Körnung --
/* Auch die übrigen Flächen der Seite bekommen dasselbe Material --
sonst sähen die Kacheln aus wie aus einer anderen Anwendung als der
Kasten daneben. Eine Oberfläche, in der zwei Materialien nebeneinander
liegen, wirkt zusammengesucht. */
liegen, wirkt zusammengesucht.
HIER STAND EBENFALLS MATTGLAS, und es war derselbe Fehler wie bei den
Kacheln: Sieben weitere Flächen, unter denen das Bild verwischt wird.
Zählt man sie zusammen, war auf der Startseite kaum noch eine Stelle
übrig, an der man das Motiv scharf sah -- und ein Bild, das man nur
noch durch Milchglas kennt, hält man für ein schlechtes Bild. */
.tagesblick,
.zahlkarte,
.zielbalken__zeile,
@@ -4101,11 +4208,11 @@ body[data-fremde-sicht="ja"]::after {
.creator,
.warnkarte,
.summe {
backdrop-filter: blur(13px) saturate(125%);
-webkit-backdrop-filter: blur(13px) saturate(125%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .07),
inset 0 -1px 0 rgba(0, 0, 0, .35),
inset 0 -1px 0 rgba(0, 0, 0, .38),
0 2px 4px -2px rgba(0, 0, 0, .45),
0 12px 26px -18px rgba(0, 0, 0, .8);
}
@@ -4116,6 +4223,13 @@ body[data-fremde-sicht="ja"]::after {
@media (prefers-reduced-motion: reduce) {
.kachel, .kachel:hover, .kachel:active { transform: none; }
.kachel:hover .kachel__zeichen { transform: none; }
/* Der wandernde Glanz ist Bewegung und faellt damit weg. Der Glanz
selbst BLEIBT -- er steht dann fest auf der Platte, wie eine
Spiegelung bei ruhigem Kopf. Ihn ganz abzuschalten waere die
bequeme Auslegung: Wer Bewegung meidet, will kein schlechteres
Aussehen, sondern nur keine Bewegung. */
.kachel::after { transition: opacity var(--tempo); background-position: 42% 0, 0 0; }
.kachel:hover::after { background-position: 42% 0, 0 0; }
}
/* Bei erzwungenen Farben (Windows-Kontrastmodus) sind Mattglas und