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

Sieben Motive statt einem -- und Bilder, die nicht mehr hochgerechnet werden

Browse Source 
Filipe: "die grafik soll viieeeel besser aussehen bitte. die hintergrund
bilder sollen viel hochwertiger und spezieller aussehen."

DIE URSACHE WAR NICHT DIE BILDGUETE, SONDERN DIE GROESSE.
Sein Bildschirm ist 2550 px breit, das groesste ausgelieferte Bild war
1600 -- der Browser rechnet es also um das 1,6-fache hoch. Jede Kante
wird dabei weich, gleichmaessig ueber das ganze Bild. Genau das sieht
man als "billig", ohne benennen zu koennen, warum. Eine hoehere
WebP-Guete haette daran nichts geaendert: Man kann keine Bildpunkte
zurueckholen, die nie ausgeliefert wurden.

  Anmeldeseite: jetzt 960 / 1280 / 1600 / 1920 / 2560, Guete 0,88.
  Buehnen:      jetzt 2400 (uhd) / 1600 (breit) / 900 (schmal).
Ueber srcset bzw. eine Fenstergroesse laedt trotzdem jeder nur die
Stufe, die er braucht -- ein Handy weiterhin 32 KB.

UND NEUN BUEHNEN ZEIGTEN DASSELBE BILD.
In start.css standen neun Regeln, eine je Szene -- alle zeigten auf
dieselbe Datei. Die Zuordnung war seit dem 01.09. richtig gedacht und
seit dem 03.09. wirkungslos. Aufgefallen ist es niemandem, weil jede
Seite fuer sich stimmig aussah; man merkt es erst, wenn man zwei
nebeneinander haelt. Jetzt hat jede Gruppe ihr eigenes Motiv, und die
Zuordnung folgt dem, was auf der Seite passiert:

  studio      Startseite            Chili-Wasserfall, "More Than Media"
  showbuehne  Dashboard, Reports    Spiegelkabinett -- viele auf einmal
  portal      LIVE, Content         Splash mit IDEAS / BRAND / CONTENT
  garage      Aufgaben, Technik     Kohle und Glut, Werkstatt
  arena       Dateien, Wissen       Medaillon-Sammlung, ein Archiv
  halle       Profile, Schutz       dieselbe Sammlung -- Personen, nicht
                                    Betrieb
  wald        Start-Check, Scout    roter Ahorn, etwas das waechst
  skyline     Kalender              Podest unter dem Mond
  lounge      Calls, Chat           dieselbe Nachtbuehne, ruhig

Sieben Motive auf neun Plaetze; die zwei Paare sind inhaltlich
benachbart und liegen nie nebeneinander auf einer Seite.

ABDUNKLUNG 0,42 -- gemessen, nicht uebernommen. Beim Tresorbild hatte
ich 0,62 aus den alten Szenen uebernommen, und uebrig blieb ein Schemen.
pruef-buehne rechnet den Kontrast an echten Bildpunkten nach: 4,69 bis
7,14 gegen die noetigen 4,5, an bis zu 28 Stellen je Seite.

Die Groessenpruefung in pruef-struktur bekommt eine begruendete Ausnahme
fuer GESTUFTE Bilder: Bei einer Datei, von der der Browser immer nur
eine von drei Stufen holt, misst eine feste 200-KB-Grenze das Falsche.
Sie gilt unveraendert fuer alles andere -- und die Ausnahme prueft
zusaetzlich, dass die kleineren Stufen wirklich existieren, damit sie
niemand als Schlupfloch benutzt.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-07 01:38:02 +02:00
co-authored by Claude Opus 5
parent 44b3290bc5
commit accf01b5d6
66 changed files with 393 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+57 -20
View File
@@ -63,7 +63,7 @@ body.start::before {
background-position: 50% 42%;
background-size: cover;
/* Rueckfall, falls eine Seite keine eigene Szene hat. */
background-image: url("../img/buehne-dogfather-breit.webp");
background-image: url("../img/buehne-studio-breit.webp");
}
/* ---------- Neun Buehnen, nicht eine ------------------------------------
@@ -80,15 +80,28 @@ body.start::before {
Alle sind gleich abgedunkelt und tragen dieselbe Vignette -- sie sehen
verschieden aus und verhalten sich gleich. Eine Buehne, die je Seite
anders hell waere, waere Unruhe statt Vielfalt. */
body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-dogfather-breit.webp"); }
/* JEDE SZENE IHR EIGENES MOTIV (07.09.2026).
Hier standen neun Zeilen, die alle auf DIESELBE Datei zeigten.
Die Zuordnung war seit dem 01.09. richtig gedacht und seit dem
03.09. wirkungslos -- neun Regeln, ein Bild. Aufgefallen ist es
niemandem, weil jede einzelne Seite fuer sich stimmig aussah;
man merkt es erst, wenn man zwei nebeneinander haelt.
Welches Bild wohin, steht in tools/gate-bauen.mjs begruendet.
Kurz: Es folgt dem, was auf der Seite passiert -- Spiegelkabinett
fuers Dashboard (viele auf einen Blick), Glut fuer Aufgaben und
Technik (Werkstatt), Ahorn fuer Start-Check und Scout (etwas,
das waechst). */
body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-breit.webp"); }
body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-breit.webp"); }
body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-breit.webp"); }
body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-breit.webp"); }
body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-breit.webp"); }
body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-breit.webp"); }
body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-breit.webp"); }
body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-breit.webp"); }
body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-breit.webp"); }
/* Der Schleier. Er ist der Grund, warum Text über einem Foto unverändert
@@ -165,6 +178,30 @@ body.start > .schleier {
rgba(5, 7, 13, 0) 100%);
}
/* GROSSE SCHIRME BEKOMMEN DIE GROSSE FASSUNG (07.09.2026).
Die breite Fassung ist 1600 px. Auf einem 2550 px breiten
Bildschirm rechnet der Browser sie um das 1,6-fache hoch, und
jede Kante wird weich -- dasselbe Problem wie auf der
Anmeldeseite. Ein Hintergrundbild kennt kein `srcset`, deshalb
hier ueber eine Fenstergroesse.
1700 px als Grenze, nicht 1600: Genau bei der eigenen Breite zu
wechseln hiesse, dass ein 1600er Fenster staendig zwischen
beiden Fassungen steht. */
@media (min-width: 1700px) {
body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-uhd.webp"); }
body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-uhd.webp"); }
body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-uhd.webp"); }
body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-uhd.webp"); }
body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-uhd.webp"); }
body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-uhd.webp"); }
body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-uhd.webp"); }
body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-uhd.webp"); }
body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-uhd.webp"); }
body.start::before { background-image: url("../img/buehne-studio-uhd.webp"); }
}
/* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
sichtbar darüber, aber Klicks landeten teils am falschen Ort. */
body.start > .kopfleiste,
@@ -175,19 +212,19 @@ body.start > main { position: relative; z-index: 1; }
auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
@media (max-width: 760px) {
body.start::before {
background-image: url("../img/buehne-dogfather-schmal.webp");
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-dogfather-schmal.webp"); }
body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-dogfather-schmal.webp"); }
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"); }
body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-schmal.webp"); }
body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-schmal.webp"); }
body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-schmal.webp"); }
body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-schmal.webp"); }
body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-schmal.webp"); }
body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-schmal.webp"); }
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, .86) 0%, rgba(5, 7, 13, .48) 14%,