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

Buehne aus den echten Marken-Bildern, Kopfleiste und Begruessung neu

Browse Source 
Filipe hatte recht, und zwar zweifach: Der Husky war der FALSCHE (ein
fremder Neon-Husky aus dem alten Bilderordner statt DogFather), und zwei
in die Ecken geklebte Bilder ergeben noch kein Bild.

DIE BUEHNE, zweiter Anlauf. Aus den zehn geschickten Bildern das Studio
gewaehlt, in dem HasiDog und DogFather stehen -- nicht aus Geschmack,
sondern wegen der ANORDNUNG: Die beiden stehen weit aussen, die Mitte ist
dunkel. Genau dort steht der Inhalt. Bei den Bildern mit den Figuren in
der Mitte waeren sie hinter dem Text gelandet.

Ueber die ganze Flaeche, fest an der Scheibe, 138 % breit: Bei 100 %
staenden die beiden bei 20 % und 78 % der Breite -- mitten unter der
Textspalte. Vergroessert man das Bild ueber die Scheibe hinaus, wandern
sie nach aussen (rund 9 % und 88 %) und der leere Hallenboden liegt dort,
wo gelesen wird. Ein Bild groesser zu machen, damit WENIGER davon im Weg
ist, klingt verkehrt und ist genau richtig.

Fuer schmale Schirme ein eigener Hochkant-Ausschnitt derselben Szene --
ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand.
1,9 MB PNG -> 28 KB WebP.

DIE VIER STELLEN aus den Bildschirmfotos:

* Kopfleiste: der DogFather-Kopf davor. Als MASKE aus dem Logo gerechnet
  (Dunkelheit wird Deckkraft), nicht als Bild -- so laesst er sich im
  Stil einfaerben; ein fertig eingefaerbtes Bild muesste man fuer jede
  Farbe neu bauen. 114 KB -> 3 KB.

* "Dogfather · DogFather" war der peinlichste Punkt: Name und Rolle lasen
  sich gleich, es sah nach einem Fehler aus. Jetzt drei unterscheidbare
  Dinge -- Zeichen mit dem Anfangsbuchstaben, Name, Rolle als Marke in
  ihrer Farbe. Gebaut in kopf.js, EINMAL statt vierzehnmal: Jede
  Seitendatei setzte diese Zeile bisher selbst zusammen.

* Begruessung: leuchtender Strich, groesserer Gruss, auslaufende
  Trennlinie. Dieselben Striche vor "WAS IST DRAN" und "DEINE AUFGABEN" --
  so gehoert sichtbar zusammen, was zusammengehoert.

ZWEI EIGENE FEHLER, die die Pruefungen gefunden haben:

1. Ich hatte Verlaeufe IM TEXT gebaut (background-clip mit durchsichtiger
   Schrift). Sah gut aus, und der Kontrasttest meldete 1,05:1 -- zu Recht.
   Durchsichtige Schrift haengt an einer einzigen Technik; faellt sie aus
   (Kontrastmodus, Druck, aeltere Browser), ist der Text UNSICHTBAR statt
   nur anders gefaerbt. Das ist kein Schoenheitsfehler, das ist ein
   Ausfall. Jetzt feste Farbe mit einem Hauch Leuchten.

2. Auf dem Handy stand der Abmelden-Knopf 9 px aus dem Bild. Die Suche
   nach der Ursache ging zuerst in die Irre -- der Test nannte das
   Wasserzeichen, das aber von seiner Kachel sauber abgeschnitten wird
   und nur seine Masse meldet. Gemessen war es die Marke: 209 px + 139 px
   rechte Gruppe passten nicht in 390 px. Auf dem Handy bleibt jetzt nur
   der Kopf stehen; der Markenzug steht zwei Zeilen tiefer ohnehin als
   Ueberschrift. Fuer Vorleseprogramme bleibt er im Dokument.

Und einmal habe ich mir beim Ersetzen eines CSS-Blocks das halbe
Stylesheet geloescht (die Kachel-Regeln lagen zwischen den beiden
Suchmarken). Aufgefallen sofort am Bildschirmfoto, zurueckgeholt aus Git,
danach zeilengenau ersetzt.

118 Pruefungen, alle gruen. Der Kontrast wird weiterhin an echten
Bildpunkten gemessen, jetzt an bis zu 35 Stellen je Seite.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-01 05:45:59 +02:00
co-authored by Claude Opus 5
parent fcebbd18bb
commit e74254263f
52 changed files with 516 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+217 -55
View File
@@ -26,67 +26,46 @@ body.start {
/* ---------- Die Bühne ----------------------------------------------------
Casper unten links, HasiDog unten rechts. Beide FEST an der Scheibe,
nicht am Inhalt: Sie scrollen nicht mit, sondern stehen da wie ein
HasiDog und DogFather im Studio -- das echte Marken-Bild, nicht
irgendein Husky aus dem alten Bilderordner. Über die ganze Fläche und
FEST an der Scheibe: Es scrollt nicht mit, sondern steht da wie ein
Bühnenbild, vor dem gearbeitet wird.
Drei Regeln, damit daraus kein Poster wird, auf dem man nichts lesen
kann:
Warum genau dieses von den fünf: Die beiden stehen weit AUSSEN, die
Mitte ist dunkel -- und dort steht der Inhalt. Ein Bild mit Figuren in
der Mitte wäre hinter dem Text gelandet.
1. Sie sitzen in den unteren ECKEN und lassen die Mitte frei -- genau
dort steht der Inhalt.
2. Die weichen Ränder sind ins Bild eingerechnet (tools/buehne-bauen.mjs),
nicht als Maske im Browser. Ein hartes Rechteck sähe nach
aufgeklebtem Foto aus; und eine Maske über ein 900-Pixel-Bild
kostete bei jedem Bildaufbau Rechenzeit.
3. Darüber liegt ein dunkler Schleier. Er ist der Grund, warum der
Text unverändert lesbar bleibt -- gemessen, nicht geschätzt.
Aufbereitet in tools/buehne-bauen.mjs: abgedunkelt, Mitte zusätzlich
verdunkelt, weiche Kante oben. 1,9 MB PNG -> 28 KB WebP.
Warum überhaupt zwei Bilder statt eines großen: Ein Vollbild hinter
einem Arbeitswerkzeug ist immer im Weg. Zwei Ecken lassen den Blick
in Ruhe und sind trotzdem sofort da. */
138 % breit und nach unten ausgerichtet: Bei 100 % ständen die beiden
bei 20 % und 78 % der Breite -- also mitten unter der Textspalte.
Vergrößert man das Bild über die Scheibe hinaus, wandern sie nach
außen (auf rund 9 % und 88 %) und der leere Hallenboden liegt dort,
wo gelesen wird. Ein Bild größer zu machen, damit WENIGER davon im
Weg ist, klingt verkehrt und ist genau richtig. */
body.start::before,
body.start::after {
content: "";
position: fixed; bottom: 0; z-index: 0;
pointer-events: none;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
}
/* Casper. Links, blickt nach rechts in die Seite hinein. */
body.start::before {
left: -3vw;
width: min(34vw, 480px); height: min(34vw, 480px);
background-image: url("../img/buehne-husky.webp");
background-position: left bottom;
opacity: .46;
content: "";
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
background-image: url("../img/buehne-breit.webp");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 138% auto;
}
/* HasiDog. Rechts, gespiegelt, blickt zurück. Etwas schwächer -- er ist
heller als Casper und würde sonst mehr ziehen. */
/* Weiter nach aussen und nach unten geschoben als Casper: HasiDog ist
heller, sein Gesicht zieht den Blick staerker -- direkt neben einer
Kachel wuerde man es ansehen statt der Kachel. So schaut er von unten
rechts herein, ohne sich dazwischenzustellen. */
body.start::after {
right: -2vw;
width: min(24vw, 330px); height: min(36vw, 480px);
background-image: url("../img/buehne-hasi.webp");
background-position: right bottom;
opacity: .3;
}
/* Der Schleier. Liegt über den beiden und unter dem Inhalt -- er nimmt
ihnen genau so viel Kraft, dass Text darüber unverändert lesbar
bleibt. Nach unten dichter, weil die Bilder dort stehen. */
/* Der Schleier. Er ist der Grund, warum Text über einem Foto unverändert
lesbar bleibt -- oben dicht für die Kopfleiste, in der Mitte dicht für
den Inhalt, an den Rändern offen, damit die beiden sichtbar bleiben.
Gemessen statt geschätzt: server/pruef-buehne.mjs rechnet den Kontrast
an echten Bildpunkten nach, an bis zu 34 Stellen je Seite. */
body.start > .schleier {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(180deg, transparent 0%, rgba(5, 7, 13, .55) 62%, rgba(5, 7, 13, .8) 100%),
radial-gradient(75% 55% at 50% 62%, rgba(5, 7, 13, .82), transparent 78%);
linear-gradient(180deg, rgba(5, 7, 13, .95) 0%, rgba(5, 7, 13, .72) 13%,
rgba(5, 7, 13, .6) 48%, rgba(5, 7, 13, .8) 100%),
radial-gradient(56% 68% at 50% 46%, rgba(5, 7, 13, .8), transparent 84%);
}
/* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
@@ -95,14 +74,21 @@ body.start > .kopfleiste,
body.start > .inhalt,
body.start > main { position: relative; z-index: 1; }
/* Auf schmalen Schirmen ein hochkant-Ausschnitt derselben Szene -- ein
auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
@media (max-width: 760px) {
/* Auf dem Handy nimmt der Inhalt die ganze Breite ein -- dort wäre die
Bühne nur ein Schatten hinter dem Text. Bleibt, aber deutlich
zurückgenommen und kleiner. */
body.start::before { left: -8vw; width: 60vw; height: 60vw; opacity: .28; }
body.start::after { right: -6vw; width: 42vw; height: 60vw; opacity: .2; }
body.start::before {
background-image: url("../img/buehne-schmal.webp");
background-size: cover;
}
body.start > .schleier {
background:
linear-gradient(180deg, rgba(5, 7, 13, .97) 0%, rgba(5, 7, 13, .85) 15%,
rgba(5, 7, 13, .82) 60%, rgba(5, 7, 13, .92) 100%);
}
}
/* ---------- Kopfleiste ------------------------------------------------ */
.kopfleiste {
@@ -687,3 +673,179 @@ body.start > main { position: relative; z-index: 1; }
.dran__punkt, .dran__pfeil { transition: none; }
.dran__link:hover .dran__pfeil { transform: none; }
}
/* =====================================================================
Kopfleiste, Begrüßung, Hinweise -- der Feinschliff vom 01.09.2026.
Vorher waren das vier Stellen mit reinem Systemtext: eine Marke in
Großbuchstaben, eine Überschrift, ein Name, eine Liste. Alles
funktionierte, nichts sagte etwas über den Ort, an dem man ist.
===================================================================== */
/* ---------- Die Marke oben links ----------------------------------------
Der DogFather-Kopf davor. Als MASKE, nicht als Bild: Die Form wird im
Stil eingefärbt (siehe tools/buehne-bauen.mjs). Ein fertig
eingefärbtes Bild müsste man für jede Farbe neu bauen -- und beim
Überfahren wechselt die Farbe. */
.kopfleiste .marke {
display: flex; align-items: center; gap: 9px;
letter-spacing: .14em;
/* min-width: 0 muss auch INNEN gelten. Die Marke ist jetzt selbst eine
Flex-Zeile (Zeichen + Text); ohne diese Angabe behaelt ihr Text seine
volle Wunschbreite und die Marke schrumpft nicht mehr -- der
Abmelden-Knopf stand dadurch auf dem Handy 9 px aus dem Bild.
Derselbe Fehler wie im August, eine Ebene tiefer. */
min-width: 0;
}
.kopfleiste .marke__text { min-width: 0; flex: 1 1 auto; }
.kopfleiste .marke::before {
content: "";
flex: none; width: 22px; height: 22px;
background: linear-gradient(150deg, var(--akzent), var(--violett));
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
mask: url("../img/marke-husky.webp") center / contain no-repeat;
transition: filter var(--tempo);
}
.kopfleiste:hover .marke::before { filter: brightness(1.25); }
/* KEIN Farbverlauf IM Text.
Ich hatte das zuerst gebaut (background-clip: text mit durchsichtiger
Schrift) -- es sah gut aus, und der eigene Kontrasttest schlug sofort
Alarm: 1,05:1. Zu Recht. Durchsichtige Schrift ist auf eine einzige
Technik angewiesen; faellt sie aus (Kontrastmodus des Betriebssystems,
Druck, aeltere Browser), ist der Text UNSICHTBAR statt nur anders
gefaerbt. Das ist kein Schoenheitsfehler, das ist ein Ausfall.
Stattdessen: feste Farbe, ein Hauch Leuchten. Sieht fast gleich aus
und kann nicht verschwinden. */
.kopfleiste .marke__text {
color: #a8dbfb;
text-shadow: 0 0 14px rgba(63, 189, 245, .28);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---------- Wer angemeldet ist ------------------------------------------
Vorher stand da "Dogfather · DogFather" -- Name und Rolle lasen sich
gleich und es sah nach einem Fehler aus. Jetzt: ein Zeichen mit dem
Anfangsbuchstaben, der Name, und die Rolle als eigene Marke in ihrer
Farbe. Drei verschiedene Dinge sehen jetzt auch verschieden aus. */
.wer {
display: flex; align-items: center; gap: 9px;
max-width: none; overflow: visible;
}
.wer__zeichen {
flex: none;
display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 9px;
font-size: .8rem; font-weight: 700; color: #eaf3ff;
background: linear-gradient(150deg,
color-mix(in srgb, var(--rollen-ton) 62%, transparent),
color-mix(in srgb, var(--rollen-ton) 24%, transparent));
border: 1px solid color-mix(in srgb, var(--rollen-ton) 55%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.wer__name {
font-size: .88rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.wer__rolle {
flex: none;
padding: 2px 9px; border-radius: 999px;
font-size: .66rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: color-mix(in srgb, var(--rollen-ton) 75%, #ffffff);
background: color-mix(in srgb, var(--rollen-ton) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent);
}
/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */
.wer[data-rolle="admin"] { --rollen-ton: #e8c07d; }
.wer[data-rolle="manager"] { --rollen-ton: #9085e9; }
.wer[data-rolle="scout"] { --rollen-ton: #4fc38f; }
.wer[data-rolle="creator"] { --rollen-ton: #3fbdf5; }
/* Auf dem Handy faellt die Rollen-Marke weg und der Name darf schrumpfen.
Ohne das schob die neue Kennung die Kopfleiste um 8 px aus dem Bild --
gemessen, nicht vermutet: Der Pruefflauf zaehlt den waagerechten
Ueberstand auf jeder Seite mit.
Die Rolle wegzulassen kostet hier nichts: Wer angemeldet ist, weiss,
welche Rolle er hat -- und auf der Startseite steht sie zwei Zeilen
tiefer noch einmal ausgeschrieben. */
@media (max-width: 620px) {
.wer__rolle { display: none; }
.wer { min-width: 0; gap: 7px; }
.wer__name { max-width: 34vw; }
/* Auf dem Handy bleibt vom Markenzug nur der Kopf stehen. Gemessen:
Marke 209 px + rechte Gruppe 139 px + Polsterung passten nicht in
390 px, der Abmelden-Knopf stand 9 px aus dem Bild. Schrumpfen
allein reichte nicht.
Der Text kostet hier nichts: Er steht auf jeder Seite zwei Zeilen
tiefer noch einmal als Ueberschrift. Der Kopf dagegen sagt in 22 px,
wo man ist -- und bleibt.
Vorlesende Programme verlieren nichts: Der Text bleibt im Dokument
und wird nur unsichtbar gerechnet. */
.kopfleiste .marke__text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.kopfleiste .marke { flex: none; }
}
/* ---------- Die Begrüßung ------------------------------------------------
Aus drei gestapelten Zeilen wird ein Kopf: ein leuchtender Strich, die
Zeile "ANGEMELDET" daneben, darunter der Gruß mit einem sehr sanften
Verlauf. Kein zusätzliches Element -- der Strich ist ein
Pseudo-Element der Marke. */
.willkommen .marke {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
}
.willkommen .marke::before {
content: "";
width: 26px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--akzent), transparent);
}
.willkommen .titel {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
letter-spacing: -.025em;
/* Auch hier bewusst eine feste Farbe statt eines Verlaufs im Text --
siehe die Begruendung bei .marke__text. Die Wirkung kommt aus
Groesse, engerem Satz und dem Leuchten, nicht aus einem Kniff, der
im Kontrastmodus zu unsichtbarer Schrift wird. */
color: #f2f7fd;
text-shadow: 0 2px 26px rgba(63, 189, 245, .18);
}
.willkommen .unterzeile { margin-bottom: 0; }
/* Die Trennlinie unter der Begrüßung. Läuft nach rechts aus, statt hart
abzubrechen -- eine durchgezogene Linie zerschneidet die Seite. */
.willkommen {
padding-bottom: 22px; margin-bottom: 30px;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, var(--rand-hell), transparent 62%) 1;
}
/* ---------- Abschnittsschilder ------------------------------------------
"WAS IST DRAN" und "DEINE AUFGABEN" bekommen denselben leuchtenden
Strich wie die Begrüßung -- so gehört sichtbar zusammen, was
zusammengehört. */
.dran .feldschild,
.zahlen-block .feldschild {
display: flex; align-items: center; gap: 9px;
}
.dran .feldschild::before,
.zahlen-block .feldschild::before {
content: "";
width: 18px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--akzent), transparent);
opacity: .8;
}