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

Die Buehnen richtig: nicht mehr beschnitten, hell, mit Lesespur

Browse Source 
Drei handfeste Fehler, alle im Screenshot zu sehen gewesen.

1. ABGESCHNITTEN. background-size stand auf "138% auto". Auf einem
   2540 px breiten Schirm wurde das Bild damit 3500 px breit und knapp
   2000 px hoch -- in einem 1300 px hohen Fenster fehlten 700 px, und
   zwar oben. Genau deshalb waren die Figuren riesig und ihre Koepfe
   weg. Jetzt cover mit Verankerung auf 50% 42%: Die Flaeche wird immer
   gefuellt, so wenig wie noetig skaliert, und wenn etwas beschnitten
   werden muss, dann Fussboden und Decke -- nicht die Gesichter.

2. DIE VIGNETTE LAG FALSCH HERUM. Abgedunkelt wurde die MITTE, also
   genau der Teil, in dem die Szene steht. Man sah die Raender des
   Bildes und in der Mitte einen grauen Fleck. Jetzt laufen die RAENDER
   ins Dunkle und die Mitte bleibt klar -- so wie in der Fotografie.

3. ZWEI SCHICHTEN DUNKELHEIT. Zusaetzlich zur Vignette legte der
   Schleier .86/.58/.44 Schwarz ueber dasselbe Bild. Jetzt nur noch
   oben (Kopfleiste) und unten (Seitenende) ein Streifen.

Dazu die Bilder selbst: Helligkeit 0.66 -> 0.88, mehr Kontrast und
Farbe. Sie sind ein BILD, kein Nebel.

DIE LESESPUR ist der eigentliche Kniff. In allen neun Szenen stehen
HasiDog und DogFather AUSSEN, die Mitte ist frei -- danach wurden sie
ausgesucht. Diese Aufteilung wird jetzt benutzt statt bekaempft: aussen
bleibt das Bild hell und scharf, in der Mitte (wo der Text steht) wird
gedaempft. Der klare Rand ist in jedem Fenster mindestens 400 px breit.
Auf dem Handy gibt es daneben keinen Platz, dort deckt die Spur alles.

Was frei stand und keine Karte hatte, bekommt eine Lesezone mit
backdrop-filter: Der Hintergrund bleibt in Farbe und Form sichtbar,
wird an dieser Stelle aber weichgezeichnet. Die billige Loesung waere
gewesen, das Bild wieder abzudunkeln -- damit waere man dort, wo man
angefangen hat.

ZWEITER FUND AN DER EIGENEN KONTRASTMESSUNG. Sie tastete
ausschliesslich NEBEN dem Element ab. Traegt ein Text seine Flaeche
aber selbst (eine Beschriftung mit Hintergrund und Polsterung), liegt
jeder Punkt daneben schon auf dem Bild -- gemeldet wurden 1,89:1,
obwohl der Text auf deckender Flaeche steht und tadellos lesbar ist.
Jetzt wird zuerst in der eigenen Polsterung gemessen, also auf dem,
worauf der Text WIRKLICH liegt. (Der erste Fund an derselben Stelle war
gestern: Sie mass Text gegen Nachbartext.)

Nach dem Aufhellen einmal komplett durchgemessen: von sieben roten
Stellen auf null. Schlechtester Wert jetzt 4,70:1 bei 4,5:1 Norm.

Die Bilder sind groesser geworden (580 KB -> 1,8 MB fuer alle achtzehn),
weil weniger Dunkelheit weniger komprimierbar ist. Geladen wird pro
Seite genau eine: 42 bis 132 KB.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-01 11:43:08 +02:00
co-authored by Claude Opus 5
parent 299ef0d506
commit 766c75b51d
44 changed files with 373 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+191 -11
View File
@@ -50,8 +50,18 @@ body.start::before {
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center bottom;
background-size: 138% auto;
/* cover statt "138% auto". Der alte Wert war der eigentliche Fehler:
Bei 138 % Fensterbreite wurde das Bild auf einem 2540 px breiten
Schirm 3500 px breit und knapp 2000 px hoch -- in einem 1300 px
hohen Fenster fehlten damit 700 px, und zwar oben. Genau deshalb
waren die Figuren riesig und ihre Koepfe abgeschnitten.
cover fuellt die Flaeche IMMER vollstaendig und skaliert dabei so
wenig wie noetig. Die Verankerung liegt auf 50 % 42 %: etwas ueber
der Mitte, weil dort in allen neun Szenen die Gesichter sitzen --
wenn etwas beschnitten werden muss, dann Fussboden und Decke. */
background-position: 50% 42%;
background-size: cover;
/* Rueckfall, falls eine Seite keine eigene Szene hat. */
background-image: url("../img/buehne-studio-breit.webp");
}
@@ -99,11 +109,47 @@ body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-
body.start > .schleier {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .58) 13%,
rgba(5, 7, 13, .44) 48%, rgba(5, 7, 13, .66) 100%),
radial-gradient(70% 55% at 18% 8%, rgba(63, 189, 245, .06), transparent 70%),
radial-gradient(70% 60% at 88% 96%, rgba(138, 118, 255, .07), transparent 72%),
radial-gradient(56% 68% at 50% 46%, rgba(5, 7, 13, .66), transparent 84%);
/* NUR NOCH DIE RAENDER. Der Schleier legte vorher .86/.58/.44
Schwarz ueber das ganze Bild -- also auch ueber die Mitte, in der
die Szene steht, und das ZUSAETZLICH zur Vignette, die dort
ebenfalls dunkel war. Zwei Schichten Dunkelheit uebereinander,
genau an der Stelle, die man sehen will.
Jetzt: oben ein Streifen (dort sitzt die Kopfleiste), unten ein
Streifen (dort laeuft die Seite aus), die Mitte fast frei. Der
Text braucht das nicht mehr -- er steht auf eigenen Flaechen. */
linear-gradient(180deg,
rgba(5, 7, 13, .82) 0%,
rgba(5, 7, 13, .34) 12%,
rgba(5, 7, 13, .12) 40%,
rgba(5, 7, 13, .12) 62%,
rgba(5, 7, 13, .52) 100%),
/* Zwei sehr weiche Farbschimmer in den gegenueberliegenden Ecken.
Sie nehmen dem Bild das reine Schwarz und geben ihm Tiefe, ohne
eine einzige Farbe zu verfaelschen -- 5 bis 7 Prozent. */
radial-gradient(75% 60% at 12% 4%, rgba(63, 189, 245, .07), transparent 70%),
radial-gradient(75% 65% at 90% 98%, rgba(138, 118, 255, .08), transparent 72%),
/* DIE LESESPUR — und der eigentliche Kniff.
In allen neun Szenen stehen HasiDog und DogFather AUSSEN, die
Mitte ist frei. Genau danach wurden die Bilder ausgesucht. Diese
Aufteilung wird jetzt benutzt, statt gegen sie zu arbeiten:
aussen das Bild bleibt hell und scharf -- dort stehen die
Figuren, und die sollen zu sehen sein
mitte gedaempft -- dort steht der Text
Vorher wurde entweder alles abgedunkelt (dann war das Bild
Nebel) oder gar nichts (dann war Schrift auf einer hellen Stelle
unlesbar, gemessene 1,08:1). Beides falsch. Der Rand bleibt in
jedem Fenster mindestens 380 px breit klar -- genug fuer die
Figuren, egal wie breit der Schirm ist. */
linear-gradient(90deg,
rgba(5, 7, 13, 0) 0,
rgba(5, 7, 13, .8) min(22%, 400px),
rgba(5, 7, 13, .86) 50%,
rgba(5, 7, 13, .8) max(78%, calc(100% - 400px)),
rgba(5, 7, 13, 0) 100%);
}
/* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
@@ -118,6 +164,7 @@ body.start > main { position: relative; z-index: 1; }
body.start::before {
background-image: url("../img/buehne-studio-schmal.webp");
background-size: cover;
background-position: 50% 38%;
}
body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-schmal.webp"); }
body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-schmal.webp"); }
@@ -130,10 +177,10 @@ body.start > main { position: relative; z-index: 1; }
body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-schmal.webp"); }
body.start > .schleier {
background:
linear-gradient(180deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .74) 15%,
rgba(5, 7, 13, .7) 60%, rgba(5, 7, 13, .84) 100%),
radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .05), transparent 70%),
radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .06), transparent 72%);
linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .48) 14%,
rgba(5, 7, 13, .3) 55%, rgba(5, 7, 13, .66) 100%),
radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .06), transparent 70%),
radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .07), transparent 72%);
}
}
@@ -1283,3 +1330,136 @@ body.start > main { position: relative; z-index: 1; }
background: linear-gradient(90deg, var(--akzent), transparent);
opacity: .8;
}
/* =====================================================================
LESEZONEN — Text auf einem hellen Bild
Seit die Buehnen wirklich hell sind, reicht "dunkler Text auf dunklem
Grund" nicht mehr: Wo kein Kasten liegt, steht Schrift direkt auf dem
Bild. Die Kontrastmessung an echten Bildpunkten hat das sofort
gemeldet -- 1,08:1 an einer hellen Stelle. Unlesbar.
Die billige Loesung waere, das Bild wieder abzudunkeln. Damit waere
man aber wieder da, wo man angefangen hat.
Die richtige: Der Untergrund wird NUR DORT abgedunkelt, wo Text
steht -- und zwar mit backdrop-filter. Der Hintergrund bleibt in
Farbe und Form sichtbar, wird an dieser Stelle aber weichgezeichnet
und gedimmt. Das ist dieselbe Technik, die hochwertige Oberflaechen
fuer ihre Leisten benutzen: Man sieht, dass da etwas ist, aber es
stoert nicht mehr.
Faellt backdrop-filter aus (aeltere Browser), traegt der Verlauf
darunter die Lesbarkeit allein -- deshalb steht er da und ist nicht
nur Beiwerk.
===================================================================== */
body.start .willkommen,
body.start .kopf-zeile,
body.start .k-kopf {
padding: 20px 24px;
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(6, 9, 16, .74), rgba(6, 9, 16, .58));
backdrop-filter: blur(14px) saturate(.9);
-webkit-backdrop-filter: blur(14px) saturate(.9);
}
/* Die Trennlinie darunter war fuer eine Zeile ohne Flaeche gedacht.
Auf einer eigenen Flaeche waere sie eine Kante zu viel. */
body.start .willkommen { border-bottom: 0; margin-bottom: 26px; }
body.start .kopf-zeile,
body.start .k-kopf { border-bottom: 0; }
/* Die Gruppenueberschriften auf der Startseite stehen frei zwischen den
Kacheln. Sie bekommen keinen Kasten (das waeren drei weitere Kaesten),
sondern nur einen schmalen, weich auslaufenden Traeger. */
body.start .gruppe__kopf {
position: relative;
padding: 7px 14px;
margin-left: -14px;
border-radius: 999px;
width: fit-content; max-width: 100%;
background: linear-gradient(90deg, rgba(6, 9, 16, .72), rgba(6, 9, 16, .3) 82%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Der Fusstext und freistehende Hinweise brauchen dasselbe. */
body.start .inhalt .fuss,
body.start .leer-hinweis,
body.start .protokoll-block,
body.start .zahlen-block,
body.start .dran {
position: relative;
}
body.start .inhalt .fuss {
padding: 14px 16px;
border-radius: var(--radius-klein);
background: rgba(6, 9, 16, .6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Listen und Bloecke, die bisher gar keine Flaeche hatten (Protokolle,
Verlaeufe, Tabellenzeilen) -- sie liegen jetzt auf --flaeche wie
alles andere. */
body.start #protokoll,
body.start #liste > .leise,
body.start .verlauf {
border-radius: var(--radius-klein);
}
@media (max-width: 620px) {
body.start .willkommen,
body.start .kopf-zeile,
body.start .k-kopf { padding: 16px 15px; }
body.start .gruppe__kopf { margin-left: -10px; padding: 6px 11px; }
}
/* Ohne backdrop-filter (Kontrastmodus, aeltere Browser) muss der
Verlauf allein tragen -- deshalb wird er dort deckend. */
@media (forced-colors: active) {
body.start .willkommen,
body.start .kopf-zeile,
body.start .k-kopf,
body.start .gruppe__kopf { background: Canvas; }
}
/* Die letzten drei freistehenden Textstellen, die die Kontrastmessung
nach dem Aufhellen noch gefunden hat. Alle drei sind Beschriftungen
ohne eigene Flaeche -- sie bekommen dieselbe schmale Lesezone wie die
Gruppenueberschriften. */
body.start .dran .feldschild,
body.start .zahlen-block .feldschild,
body.start .protokoll-block .feldschild,
body.start .k-leiste .feldschild {
padding: 6px 13px 6px 11px;
margin-left: -11px;
border-radius: 999px;
width: fit-content; max-width: 100%;
background: linear-gradient(90deg, rgba(6, 9, 16, .74), rgba(6, 9, 16, .32) 84%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Das Ereignisprotokoll auf der Personenseite stand als einziges ganz
ohne Traeger da -- IP-Adressen und Zeitstempel direkt auf dem Bild. */
body.start #protokoll {
padding: 4px 14px;
border-radius: var(--radius-klein);
background: rgba(6, 9, 16, .66);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Auf dem Handy gibt es keinen Platz fuer Figuren neben dem Text --
dort darf die Lesespur ueber die ganze Breite gehen. Das Bild bleibt
oben und unten sichtbar, wo der Inhalt nicht steht. */
@media (max-width: 760px) {
body.start > .schleier {
background:
linear-gradient(180deg, rgba(5, 7, 13, .88) 0%, rgba(5, 7, 13, .6) 12%,
rgba(5, 7, 13, .5) 55%, rgba(5, 7, 13, .72) 100%),
radial-gradient(90% 40% at 20% 4%, rgba(63, 189, 245, .06), transparent 70%),
radial-gradient(90% 40% at 85% 98%, rgba(138, 118, 255, .07), transparent 72%);
}
}