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/gate.css
+184 -28
View File
@@ -22,7 +22,14 @@
Unterschied zwischen "hat einen Hintergrund" und "ist unlesbar".
Wer die Kacheln durchsichtiger oder dichter will, aendert nur diese
eine Zeile. */
--flaeche: rgba(9, 13, 22, 0.78);
/* 0,89 statt 0,78 (07.09.2026). Die Flächen der Seite lagen bisher
hinter einem Weichzeichner -- 22 % Durchsicht auf ein VERWISCHTES
Bild fallen nicht auf. Ohne ihn liegt dahinter jetzt ein scharfes,
kontrastreiches Motiv, und dieselben 22 % machen aus einer ruhigen
Fläche eine unruhige. Die Durchsicht bleibt (Filipe: "vielleicht
ganz ganz ganz leicht durch zu sehen sein"), aber als Andeutung,
nicht als Muster. */
--flaeche: rgba(9, 13, 22, 0.89);
--rand: rgba(150, 186, 220, 0.16);
--rand-hell: rgba(150, 186, 220, 0.30);
@@ -1175,10 +1182,55 @@ body.gate {
dort einen dunklen Saum stehen. Ein halber Prozentpunkt Ueberlappung
schiebt ihre Kante unter das Glühen -- man sieht nur noch Rahmen und
Karte, nichts dazwischen. */
--tafel-links: 57.00%;
--tafel-oben: 13.00%;
--tafel-breite: 36.60%;
--tafel-hoehe: 63.70%;
/* 07.09.2026, ZWEITER ANLAUF -- diesmal GEMESSEN statt nachjustiert.
Der Anlauf davor hat die Werte "um 1,1 % nach links" von Hand
korrigiert, nach Augenschein im Bildschirmfoto. Das Ergebnis war
immer noch falsch, und Filipe hat es sofort gesehen: links stand
ein schwarzer Streifen der gemalten Tafel offen.
Der Grund war die Messung selbst. Sie laeuft vom Tafelinneren nach
aussen und haelt beim ersten FARBIGEN Punkt an -- der linke Rahmen
glueht im Motiv aber viel breiter als der rechte (breites Rot gegen
duennes Blau). Sie hielt links also frueher an, und ich habe den
Fehler mit einer geschaetzten Verschiebung zugedeckt, statt ihn zu
beheben. Eine Korrektur nach Gefuehl auf eine Messung, die man fuer
falsch haelt, ist keine Messung mehr.
Jetzt anders gemessen, und zwar auf das, was man wirklich sucht:
Die vier Neonlinien sind die einzigen Stellen im ganzen Bild, die
KRAEFTIG UND FARBIG zugleich sind (max > 150 und Spanne > 60). Je
Spalte und je Zeile gezaehlt, wie viele Punkte das erfuellen --
die Linien stehen als klare Spitzen heraus, nichts sonst kommt in
die Naehe:
senkrecht 55,37 % (rot) 94,17 % (blau)
waagerecht 13,19 % (rot) 76,96 % (blau)
Die Oberkante brauchte eine zweite Messung: Sie ist dunkelrot und
faellt unter die Neonschwelle. Ueber das Helligkeitsprofil in der
Tafelbreite ist sie trotzdem eindeutig -- 136 gegen 20 daneben.
Die Karte geht 0,4 Prozentpunkte UEBER jede Linie hinaus. Filipe
ausdruecklich: "wenn es leicht groesser ist ist egal aber die
kachel vom hintergrund bild muss bedeckt sein". Die Linien gluehen
weich; endete die Karte genau auf der Messkante, bliebe ein
dunkler Saum. So liegt ihr Rand UNTER dem Leuchten -- man sieht
Rahmen und Karte, nichts dazwischen.
Die Karte reicht BIS AN die Linien, nicht darueber hinaus. Der
Neonrahmen ist das Beste am Bild -- wuerde die Karte ihn ueberdecken,
waere die Tafel zwar bedeckt und die Seite auf einen Schlag
langweilig. Gedeckt werden muss das SCHWARZ dazwischen, und genau
das war offen: 55,37 gemessen, 57,00 eingetragen -- bei einem
1978 px breiten Rahmen sind das 32 px schwarze Flaeche, die links
stehen blieb. Rechts fehlten 0,6 %.
gemessen hier */
--tafel-links: 55.45%; /* 55,37 -- Kante liegt auf dem Licht */
--tafel-oben: 13.15%; /* 13,19 */
--tafel-breite: 38.65%; /* bis 94,10 %, Linie bei 94,17 */
--tafel-hoehe: 63.85%; /* bis 77,00 %, Linie bei 76,96 */
}
/* Vorgabe: Der Anker tut nichts. Er wird erst dort zur Schablone, wo
@@ -1386,25 +1438,49 @@ body.gate {
border: 0;
border-radius: 22px;
/* DER WEICHZEICHNER MUSSTE WEG (07.09.2026, abends).
Hier stand `backdrop-filter: blur(26px)`, und das war der Grund,
warum die Karte im Bildschirmfoto GRAU aussah statt tief.
Ein Weichzeichner mittelt nicht nur, was HINTER dem Element liegt
-- er zieht seinen Radius weit über dessen Kanten hinaus in die
Umgebung. Hinter der Tafel ist zwar Schwarz, direkt daneben aber
die hellste Stelle des ganzen Motivs: der rote und der blaue
Neonstrich. 26 px Radius holen genau die herein und rechnen sie
zu einem gleichmäßigen Grau. Je schöner der Rahmen, desto grauer
die Karte -- man baut sich das Problem mit dem Schmuckstück
selbst.
Jetzt ist die Karte eine eigene, fast deckende Scheibe (93 %) und
holt sich die Rahmenfarben ABSICHTLICH herein, an denselben
Ecken, an denen sie im Bild sitzen -- kräftiger als vorher, weil
sie jetzt gegen Schwarz und nicht gegen Grau arbeiten. */
background:
/* Der Schein von den Kanten herein, in den Farben des Rahmens:
rot oben links, blau unten rechts. Er ist das, was die Karte
mit dem Bild verbindet, statt sie davorzusetzen. */
radial-gradient(120% 90% at 4% 0%, rgba(224, 66, 66, .13), transparent 58%),
radial-gradient(120% 90% at 98% 100%, rgba(58, 150, 235, .15), transparent 60%),
/* Die Anzeige selbst: oben eine Spur heller. */
linear-gradient(178deg, rgba(14, 20, 32, .80), rgba(6, 9, 16, .88) 62%);
backdrop-filter: blur(26px) saturate(128%);
-webkit-backdrop-filter: blur(26px) saturate(128%);
radial-gradient(135% 100% at 0% 0%, rgba(232, 62, 62, .26), transparent 55%),
radial-gradient(135% 100% at 100% 100%, rgba(56, 158, 246, .30), transparent 58%),
/* Die Anzeige selbst: oben eine Spur heller, unten fast schwarz. */
linear-gradient(176deg,
rgba(16, 23, 36, .93) 0%,
rgba(9, 13, 21, .95) 46%,
rgba(5, 7, 13, .96) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
/* Die Fuge: innen ein feiner heller Strich oben, dunkel unten. */
inset 0 1px 0 rgba(255, 255, 255, .09),
inset 0 1px 0 rgba(255, 255, 255, .11),
inset 0 -1px 0 rgba(0, 0, 0, .5),
/* Die beiden Rahmenfarben laufen als hauchdünner Saum INNEN an
den Kanten weiter -- der Übergang vom Gehäuse zur Scheibe. */
inset 2px 2px 0 -1px rgba(232, 62, 62, .34),
inset -2px -2px 0 -1px rgba(56, 158, 246, .38),
/* Und ein sehr weicher Schein nach innen, damit die Kante nicht
hart abbricht, sondern ins Gehäuse übergeht. */
inset 0 0 44px -18px rgba(0, 0, 0, .9);
inset 0 0 54px -20px rgba(0, 0, 0, .92);
overflow: hidden;
}
@@ -1415,23 +1491,76 @@ body.gate {
pointer-events: none; border-radius: inherit;
background:
linear-gradient(122deg,
rgba(255, 255, 255, .07) 0%,
rgba(255, 255, 255, .018) 14%,
rgba(255, 255, 255, 0) 32%),
var(--koernung);
background-size: auto, 140px 140px;
rgba(255, 255, 255, .075) 0%,
rgba(255, 255, 255, .020) 14%,
rgba(255, 255, 255, 0) 32%);
opacity: .9;
}
/* DIE KÖRNUNG BRAUCHT EINE EIGENE EBENE (07.09.2026, abends).
Sie stand als zweite Schicht in der Spiegelung oben -- mit deren
Deckkraft von 90 % und ohne Mischmodus. Die Körnung ist aber ein
mittelgraues Rauschen: 90 % davon über der Karte heben JEDEN
Bildpunkt um rund 30 Stufen an. Gemessen im Bildschirmfoto:
rgb(46, 57, 64) statt der berechneten rgb(15, 22, 34). Die Karte
war deshalb grau, egal wie tief der Verlauf darunter eingestellt
war -- ich habe zweimal an der falschen Zahl gedreht.
Auf der Startseite steht dieselbe Körnung richtig: 3,5 % und
`mix-blend-mode: overlay`, also "hell machen, wo es hell ist,
dunkel, wo es dunkel ist". Genau das hier auch.
Als Träger dient `.tafel__kante` -- das Element gibt es im HTML
bereits, es war in dieser Ansicht nur abgeschaltet. Ein weiteres
Pseudo-Element gibt es nicht: `::before` und `::after` sind
vergeben. */
.tafel__kante {
display: block;
position: absolute; inset: 0; z-index: 0;
pointer-events: none; border-radius: inherit;
background-image: var(--koernung);
background-size: 140px 140px;
opacity: .04;
mix-blend-mode: overlay;
}
/* Der Inhalt liegt über der Scheibe -- Schrift durch eine Spiegelung
zu lesen wäre anstrengend. */
.tafel > * { position: relative; z-index: 1; }
/* ---- Die Rollen als Tasten ---------------------------------------- */
/* ---- Die Rollen als Tasten in einer Leuchtschiene ------------------
DIESELBE SPRACHE WIE DIE KACHELN DER STARTSEITE (07.09.2026).
Auf der Startseite steckt jede Kachel in einer Schiene, die in der
Farbe ihrer Kategorie leuchtet. Hier passiert dasselbe mit den
Rollen -- und das ist mehr als eine Wiederholung: Wer sich als
Manager anmeldet, sieht dabei schon das Gold, in dem ihm gleich
seine Kacheln begegnen. Zwei Bildschirme, eine Sprache.
Vier Farben, aus dem Knopfsystem oben (--k-*), nicht neu erfunden:
DogFather Gold -- Krone
Manager Bernstein -- Stern
Scout Grün -- Schild
Creator Blau -- Person
Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */
.tafel .rolle[data-rolle="admin"] { --rton: var(--k-gold); }
.tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); }
.tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); }
.tafel .rolle[data-rolle="creator"] { --rton: var(--akzent); }
.tafel .rolle {
position: relative;
overflow: hidden;
/* Links scharf (dort sitzt die Schiene), rechts rund -- genau die
Silhouette der Kacheln. */
border-radius: 3px 13px 13px 3px;
background:
linear-gradient(90deg,
color-mix(in srgb, var(--rton, var(--akzent)) 20%, transparent) 0%,
color-mix(in srgb, var(--rton, var(--akzent)) 6%, transparent) 22%,
transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
border: 1px solid rgba(150, 186, 220, .13);
border-radius: 13px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .09),
inset 0 -1px 0 rgba(0, 0, 0, .38),
@@ -1439,11 +1568,28 @@ body.gate {
transition: border-color var(--tempo), background var(--tempo),
box-shadow var(--tempo), transform .09s ease;
}
/* Die Schiene selbst. */
.tafel .rolle::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
border-radius: 3px 0 0 3px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--rton, var(--akzent)) 55%, #fff) 0%,
var(--rton, var(--akzent)) 34%,
color-mix(in srgb, var(--rton, var(--akzent)) 55%, transparent) 100%);
box-shadow: 2px 0 14px -3px color-mix(in srgb, var(--rton, var(--akzent)) 55%, transparent);
opacity: .72;
transition: opacity var(--tempo), box-shadow var(--tempo);
}
.tafel .rolle:hover {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--rton, var(--akzent)) 26%, transparent) 0%,
color-mix(in srgb, var(--rton, var(--akzent)) 8%, transparent) 24%,
transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
border-color: rgba(150, 186, 220, .24);
}
.tafel .rolle:hover::before { opacity: 1; }
/* Beim Drücken sinkt die Taste ein: Der Schatten unter ihr
verschwindet, der innere kommt von oben. Genau das macht ein
echter Knopf. */
@@ -1456,14 +1602,24 @@ body.gate {
sagt deutlicher als jede Farbe, welche gerade aktiv ist. */
.tafel .rolle[aria-checked="true"] {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--akzent) 22%, transparent),
color-mix(in srgb, var(--violett) 13%, transparent));
border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
linear-gradient(90deg,
color-mix(in srgb, var(--rton, var(--akzent)) 42%, transparent) 0%,
color-mix(in srgb, var(--rton, var(--akzent)) 16%, transparent) 34%,
color-mix(in srgb, var(--rton, var(--akzent)) 5%, transparent) 72%),
linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
border-color: color-mix(in srgb, var(--rton, var(--akzent)) 58%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .16),
inset 0 0 20px -8px color-mix(in srgb, var(--akzent) 90%, transparent),
0 0 20px -10px color-mix(in srgb, var(--akzent) 75%, transparent);
inset 0 1px 0 rgba(255, 255, 255, .18),
inset 0 0 24px -9px color-mix(in srgb, var(--rton, var(--akzent)) 92%, transparent),
0 0 24px -11px color-mix(in srgb, var(--rton, var(--akzent)) 78%, transparent);
}
/* Die Schiene der gewählten Rolle brennt voll -- das ist die
deutlichste Anzeige, die es gibt, und sie kommt ohne ein weiteres
Zeichen aus. */
.tafel .rolle[aria-checked="true"]::before {
opacity: 1;
width: 4px;
box-shadow: 4px 0 26px -3px color-mix(in srgb, var(--rton, var(--akzent)) 78%, transparent);
}
/* ---- Das Codefeld: eine eingelassene Rinne ------------------------- */