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

Ein Hintergrund fuer alles -- und Zeichen, die endlich vollstaendig sind

Browse Source 
ZWEI AUFTRAEGE.

1. DER NEUE HINTERGRUND
   Das Dogfather/Spicy-Media-Bild loest die neun Buehnen ab. Der Login
   behaelt ausdruecklich sein eigenes Bild (body.gate, unangetastet) --
   dort wird der Zugangscode eingegeben, und genau das sollte bleiben.

   Nicht einfach hingelegt: Das Bild ist sehr kraeftig, vor allem die
   rote Haelfte. Ohne Behandlung fiel der Textkontrast auf 3,03:1
   (noetig sind 4,5:1) -- ausgerechnet in der Personenverwaltung und auf
   dem Aufgabenbrett. Gemessen hat das server/pruef-buehne.mjs, das den
   Kontrast an bis zu 36 echten Bildpunkten je Seite nachrechnet.

   In vier Schritten angepasst und jedes Mal nachgemessen:
     -0,14 Helligkeit -> 4,12:1   (immer noch zu wenig)
     -0,20 Helligkeit -> 4,48:1   (zwei Hundertstel zu wenig)
     -0,23 Helligkeit -> 4,63:1   bestanden, alle Seiten
   Dazu Saettigung 0,72 und Gamma 0,91 -- dieselbe Behandlung, die auch
   die alten Buehnen bekommen haben (tools/buehne-bauen.mjs arbeitet mit
   Helligkeit 0,66 bis 0,88). Das Bild bleibt ein Bild und wird nicht
   zur Tapete, aber Text steht darauf lesbar.

2. DIE ZEICHEN
   Sie bekommen einen VERLAUF: oben hell, nach unten gedaempft -- eine
   Lichtquelle ueber dem Zeichen, wie in der echten Welt. Dazu ein
   weicher Schlagschatten in der eigenen Farbe. Der Verlauf ist EINMAL
   definiert und arbeitet mit currentColor: ein Verlauf fuer siebzehn
   Kachelfarben.

   ZWEI SACKGASSEN AUF DEM WEG, beide aufgeschrieben statt weggeraeumt:

   a) Erst lag unter jeder Linie eine dicke, weichgezeichnete Kopie --
      "Licht, das die Linie wirft". Bei einem grossen Symbol traegt das.
      Hier nicht: Ein Zeichen ist 24 Einheiten breit und 25 px gross,
      eine Einheit ist also ein Pixel. Linie 1,65 plus Schein 2,5 fuellt
      jede Luecke, die enger als vier Einheiten ist -- aus dem Kalender
      wurde ein leerer Kasten. Gesehen habe ich das erst bei dreifacher
      Vergroesserung; auf dem normalen Schirm sah es nur "satter" aus.
      Die Lage ist wieder weg.

   b) Der Verlauf lief zunaechst in OBJEKTKOORDINATEN. Damit wird er auf
      den Umriss jedes einzelnen Pfades gerechnet -- und eine waagerechte
      Linie hat die Hoehe null. Der Verlauf ist dann entartet, und der
      Browser zeichnet den Pfad GAR NICHT. Verschwunden waren dadurch:
      die Querlinie im Kalender, alle drei Regler-Striche in Technik,
      die Grundlinie der Berichte. Jetzt laeuft er in Benutzer-
      koordinaten ueber die festen 24 Einheiten -- was ohnehin richtiger
      ist, denn das Licht kommt von oben und nicht von jedem Strich
      einzeln.

   AUSSERDEM ECHT REPARIERT: Das Technik-Zeichen hatte drei Griffe aus
   Boegen der Laenge null ("a1.4 1.4 0 1 0 0-.02z") -- sie wurden nie
   gezeichnet. Uebrig blieben drei nackte Striche, die aussahen wie ein
   Menue-Symbol. Jetzt sind es echte Kreise. Kalender und Dashboard haben
   mehr Luft zwischen ihren Linien bekommen, damit sie bei 25 px nicht
   zu einer Flaeche verschmelzen.

GEPRUEFT: Buehne 38 (Kontrast an echten Bildpunkten), Startansicht 133,
Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14 -- alle gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-03 01:26:52 +02:00
co-authored by Claude Opus 5
parent 0404f8c0c1
commit a9815e291a
32 changed files with 339 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+95 -22
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-studio-breit.webp");
background-image: url("../img/buehne-dogfather-breit.webp");
}
/* ---------- Neun Buehnen, nicht eine ------------------------------------
@@ -80,15 +80,15 @@ 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-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"); }
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"); }
/* Der Schleier. Er ist der Grund, warum Text über einem Foto unverändert
@@ -162,19 +162,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-studio-schmal.webp");
background-image: url("../img/buehne-dogfather-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"); }
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[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 > .schleier {
background:
linear-gradient(180deg, rgba(5, 7, 13, .86) 0%, rgba(5, 7, 13, .48) 14%,
@@ -768,13 +768,79 @@ body.start > main { position: relative; z-index: 1; }
}
.kachel[data-gross="ja"] .kachel__zeichen { width: 62px; height: 62px; border-radius: 18px; }
/* ---------- Die Zeichen (überarbeitet 03.09.2026) ------------------------
Vorher: eine flache Linie in einer Farbe, siebzehnmal nebeneinander.
Sauber, aber leblos.
Jetzt zweierlei, und beides berührt die Zwischenräume nicht:
VERLAUF Die Linie ist oben hell und wird nach unten gedämpft
-- eine Lichtquelle über dem Zeichen, wie in der
echten Welt. Genau das lässt eine Linie geprägt statt
gemalt wirken.
SCHLAGSCHATTEN Ein weicher Schein um das GANZE Zeichen, in seiner
eigenen Farbe. Er hebt es von der Kachelfläche ab.
Der Verlauf ist EINMAL im Dokument definiert (bereiche.js) und
arbeitet mit currentColor. `color: var(--ton)` steht deshalb hier am
SVG -- so nimmt derselbe eine Verlauf den Ton jeder der siebzehn
Kacheln an. Siebzehn Farben, ein Verlauf. */
.kachel__svg {
width: 25px; height: 25px;
fill: none; stroke: var(--ton);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
color: var(--ton);
fill: none;
stroke-linecap: round; stroke-linejoin: round;
/* Ein sehr weicher Schein um das ganze Zeichen. Gedeckt gehalten:
Er soll Tiefe geben, nicht leuchten. */
filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--ton) 45%, transparent));
transition: transform var(--tempo), filter var(--tempo);
}
.kachel__svg .zeichen__linie {
stroke: url(#zeichen-verlauf);
stroke-width: 1.65;
}
/* DIE SCHEIN-LAGE IST WIEDER WEG (03.09.2026) -- und der Weg dorthin
gehört aufgeschrieben, damit sie niemand ein zweites Mal einbaut.
Die Idee war gut: eine dicke, weiche Kopie unter der Linie, damit das
Zeichen schwebt statt flach aufzuliegen. Bei einem grossen Symbol
funktioniert das. Hier nicht.
Ein Zeichen ist 24 Einheiten breit und 25 px gross -- eine Einheit ist
also ein Pixel. Die Querlinie im Kalender sitzt vier Einheiten unter
der Oberkante, die Striche im Technik-Zeichen 4,5 auseinander. Eine
Linie von 1,65 plus ein Schein von 2,5 füllt davon so viel, dass die
Lücke verschwindet: Aus dem Kalender wurde ein leerer Kasten, aus den
Reglern drei Punkte ohne Striche.
Gesehen habe ich das erst bei dreifacher Vergrösserung -- auf dem
normalen Schirm sah es nur "etwas satter" aus. Wer kleine Zeichen
nach dem Gesamteindruck beurteilt, übersieht genau das.
Was bleibt, wirkt ohne die Lücken zu fressen: der VERLAUF in der
Linie (Licht von oben) und ein weicher Schlagschatten um das ganze
Zeichen. Beides berührt die Zwischenräume nicht. */
/* Beim Überfahren rückt das Zeichen einen Hauch nach vorn und der
Schein wird kräftiger -- als käme die Lichtquelle näher. Ein Hauch:
Zwei Pixel sind zu sehen, acht wären Zappeln. */
.kachel:hover .kachel__svg {
transform: translateY(-1px) scale(1.04);
filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--ton) 62%, transparent));
}
.kachel[data-gross="ja"] .kachel__svg { width: 31px; height: 31px; }
@media (prefers-reduced-motion: reduce) {
.kachel__svg, .kachel:hover .kachel__svg { transition: none; transform: none; }
}
@media (forced-colors: active) {
/* Ohne Farben trägt allein die Linie. Der Schein wäre dort ein
grauer Klecks über der Zeichnung. */
.kachel__svg { filter: none; }
.kachel__svg .zeichen__linie { stroke: CanvasText; }
}
.kachel__text { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.kachel__name {
font-size: 1.06rem; font-weight: 650; letter-spacing: -.014em; line-height: 1.25;
@@ -2724,3 +2790,10 @@ body[data-fremde-sicht="ja"]::after {
@media (forced-colors: active) {
body[data-fremde-sicht="ja"]::after { border-color: Highlight; }
}
/* Das Wasserzeichen in der Ecke bekommt die neue Behandlung NICHT.
Es ist bewusst eine ganz dünne, fast unsichtbare Kontur; ein Schein
darunter würde daraus einen grauen Fleck machen -- und zwar genau
dort, wo er den Text der Kachel hinterlegt. (03.09.2026) */
.kachel__wasserzeichen .kachel__svg { filter: none; }
.kachel__wasserzeichen .zeichen__linie { stroke: var(--ton); stroke-width: 1.1; }