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

Fuenf Punkte aus screen1-5: Babyblau, zweite Nut, Spalten, Wasserzeichen, Jadeknoepfe

Browse Source 
screen1 -- "da muss mehr babyblau zu sehen sein. da ist ja fast nichts."

  Gemessen als Blaustich (Mittel Blaukanal minus Rotkanal ueber die
  ganze Zeile): DogFather lag bei 7,4 und damit UNTER der roten
  Spicy-Zeile (17,3). Ursache: --dogi-haupt war #c7dcf4, und das hat
  zwischen Rot und Blau nur 45 Stufen Abstand -- im Hexwert ein Blau,
  auf dem Bildschirm ein Weiss.

  Jetzt #9ed3f4 (86 Stufen), dazu eine Schiene, deren Silber nur noch
  ein Spitzlicht am oberen Ende ist, ein breiter babyblauer Schimmer
  und der Name selbst in einem Verlauf von Silber nach Babyblau.
  Blaustich 24,3 -- der hoechste aller fuenf Zeilen, und mit dem
  hoechsten Gruenanteil, also Babyblau und nicht Lila. Abstand zur
  naechsten Rollenfarbe 0,1295 in OKLab (Hausgrenze 0,0973), Kontrast
  12,4:1.

screen2 -- "mach diesen strich der nach oben geht auch links bitte."

  Die Zentrale hat drei Felder, aber nur EINE Nut. Jetzt zwei, aus
  einem Regelsatz -- "genau gleich" heisst hier wirklich gleich und
  nicht gespiegelt: Eine Fraesung in derselben Platte hat bei Licht von
  oben links ueberall dieselbe Flanke.

  Dabei ein echter Fehler gefunden: Die Nut wurde erst bei 620 px
  abgeschaltet (start.css), die dritte Spalte faellt aber schon bei
  1180 px weg (heim.css). Zwischen 621 und 780 px stand sie deshalb als
  freier senkrechter Strich im Bild -- bei 700 px nachgemessen bei
  x = 391, wo sie nichts mehr trennte. Das Abschalten steht jetzt in
  derselben Regel wie der Spaltenwechsel, je einmal fuer 1180 und 780.

screen3 -- "die sollen schön untereinander sein."

  `.gruppe__zahl` trug ein `margin-left: auto` -- geschrieben fuer die
  Startseite, wo im Kopf nur Name, Zahl und Pfeil stehen. Auf der
  Personenseite steht dazwischen noch der Zusatztext, und der Pfeil hat
  sein eigenes auto. Zwei auto-Raender teilen den freien Platz zu
  gleichen Teilen -- also stand die Gruppe [Zahl + Zusatz] mittig, und
  ihre Lage hing an der Laenge des Rollennamens.

  Jetzt vier Rasterspalten. Die Breite der Namensspalte wird an der
  fertigen Liste GEMESSEN und als `--namen-spalte` gesetzt; eine feste
  Angabe waere bis zur naechsten Rolle mit laengerem Namen richtig.
  Spanne von Zahl und Zusatztext: 0,0 px (vorher 11 px). Gegenprobe:
  ohne die gemessene Spalte laufen sie wieder 36,5 px auseinander.

screen4 -- "das symbol rechts in der kachel soll viel groesser sein."

  Zum dritten Mal gemeldet, und zum dritten Mal hatte er recht. Zweimal
  habe ich den KASTEN vergroessert; beide Male hat sich nichts geaendert,
  und ich habe es auf die Kachelhoehe geschoben, statt nachzusehen. Der
  Kasten war 124 px -- das SVG darin 39:

    .kachel[data-gross="ja"] .kachel__svg { width: 39px }   (0,3,0)
    .kachel__wasserzeichen svg            { width: 100%  }  (0,1,1)

  Die erste Regel meint das Hauptsymbol links. Beide SVG tragen aber
  dieselbe Klasse, weil sie aus derselben Funktion kommen -- und die
  fremde Regel war staerker. Dasselbe galt fuer `.kachel:hover
  .kachel__svg` und die Reduced-Motion-Regel; alle drei sind jetzt auf
  `.kachel__zeichen` eingeschraenkt.

  Und es waren WIEDER zwei Fassungen derselben Sache, 3600 Zeilen
  auseinander: Rahmen 78 gegen 70, Zeichen 36 gegen 39. Der Kommentar
  an der spaeteren Stelle behauptete sogar schon, es gebe "EINE
  Fassung". Behauptet war es, gemessen nicht. Die toten sind entfernt.

  Zweitens fuellt die Zeichnung jetzt ihren Kasten: Im 24er-Raster liegt
  sie bei x 4 bis 20, rund 38 Prozent waren leerer Rand.

  Ergebnis: Zeichnung von 26 auf 124 px, samt der 8-Grad-Drehung
  (140 px) vollstaendig in der 152 px hohen Kachel. Deckkraft
  unveraendert bei 0,14 -- er wollte groesser, nicht lauter.

screen5 -- "der abmelde button und teilen button sollen eine richtig
geile gruen haben ... aber so dass es nicht den augen wehtut."

  Teilen #45d6a6, Abmelden #33b394. Beide sind WENIGER gesaettigt als
  das Rot, das vorher dort stand (63 und 55 gegen 100 Prozent) -- die
  Leiste wird ruhiger, nicht greller. Kontrast der Schrift 15,6:1 und
  15,0:1 gegen vorher 13,6:1 und 12,6:1. Chat und Suchen bleiben rot;
  damit trennt die Farbe "das mache ich mit der Seite" von "das mache
  ich mit meinem Zugang".

  Erster Versuch verworfen: Ein Rahmen aus drei Toenen ueber zwei
  Hintergrundlagen machte beide Knoepfe FLAECHIG gruen, weil ich die
  deckende obere Lage durchsichtig gesetzt hatte -- damit deckte sie den
  Rahmenverlauf nicht mehr ab. Im Bildschirmfoto gesehen, nicht in den
  Zahlen: Die Farbwerte waren die ganze Zeit richtig.

Geprueft: pruef-start-ansicht, pruef-buehne, pruef-css-klassen,
pruef-personen-liste -- alle gruen. Jede eigene Messung mit Gegenprobe.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-09 04:10:44 +02:00
co-authored by Claude Opus 5
parent 74ae4c292e
commit 0a0dbff384
5 changed files with 410 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/gate.css
+87 -4
View File
@@ -143,8 +143,25 @@
Schiene links laeuft von Silber nach Babyblau, und der Glanz auf
der Zeile traegt beide Toene. Eine Mischung, die man nur im
Hexwert findet, ist keine. */
--dogi-haupt: #c7dcf4;
--dogi-zweit: #7ec8f2;
/* NACHGESCHAERFT AM 09.09.2026 (screen1). Filipe: "da muss mehr
babyblau zu sehen sein. da ist ja fast nichts."
Er hatte recht, und es war messbar: In der DogFather-Zeile waren
nur 5,9 Prozent der hellen Bildpunkte babyblau. #c7dcf4 traegt
zwischen Rot- und Blaukanal nur 45 Stufen Unterschied -- im Hexwert
ist das ein Blau, auf dem Bildschirm ein Weiss.
#9ed3f4 hat 86 Stufen, also fast das Doppelte, und bleibt trotzdem
hell genug fuer Metall: Kontrast 12,41:1 auf dem Untergrund
(vorher 14,21:1), Abstand zur naechsten Rollenfarbe 0,1295 in
OKLab -- die Hausgrenze liegt bei 0,0973. Es ist also weiterhin
eindeutig DogFather und faellt nicht in Richtung Creator.
Silber bleibt es durch die HELLIGKEIT, blau wird es durch den
Kanalabstand. Beides zugleich geht nur so; ein saettigeres Blau
waere Farbe statt Material. */
--dogi-haupt: #9ed3f4;
--dogi-zweit: #6dc2f2;
--dogi-tief: #35506b;
/* MANAGER — lila, bleibt (Wunsch: "manager bleibt lila"). */
@@ -2519,6 +2536,49 @@ body.gate {
.rolle[data-rolle="admin"] {
position: relative;
}
/* DER NAME TRAEGT DIE MISCHUNG (09.09.2026, screen1).
Filipe: "... die dogfather soll." -- der Name selbst soll das
Babyblau tragen, nicht nur die Zierde darum herum.
Von Silber nach Babyblau, in derselben Richtung wie die Schiene
links: Das Wort liest sich als ein Stueck Metall, auf das von oben
links Licht faellt. Der dunkelste Punkt des Verlaufs ist #7fc9f2 --
Kontrast 10,8:1 auf dem Untergrund der Zeile, also weit ueber den
noetigen 4,5:1. (pruef-buehne liest bei `color: transparent` den
dunkelsten Stopp eines Verlaufs aus, genau fuer solche Faelle.)
`-webkit-` steht dabei, weil `background-clip: text` ohne das
Praefix in aelteren WebKit-Fassungen nichts tut -- und "nichts tut"
heisst hier: unsichtbarer Text, nicht schwarzer. */
.rolle[data-rolle="admin"] .rolle__name {
background: linear-gradient(102deg,
#f4f9ff 0%, #cfe6fa 26%, #9ed3f4 58%, #7fc9f2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Ohne einen Schatten steht heller Text auf hellem Verlauf ohne
Kante. Der Schatten liegt HINTER der Schrift, nicht darauf. */
filter: drop-shadow(0 1px 1px rgba(3, 8, 16, .8));
}
/* Ein Verlauf auf Text hat keinen erhoehten Kontrast beim Ueberfahren
-- die Zeile hebt sich sonst nur noch am Untergrund. Deshalb wird der
Verlauf beim Zeigen einen Hauch heller, nicht anders. */
.rolle[data-rolle="admin"]:hover .rolle__name,
.rolle[data-rolle="admin"][aria-checked="true"] .rolle__name {
background: linear-gradient(102deg,
#ffffff 0%, #e2f1fd 26%, #b6e0f8 58%, #93d2f5 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* Erzwungene Farben (Windows-Kontrastmodus): Ein Verlauf auf Text wird
dort zu einer leeren Flaeche. Zurueck auf die Systemfarbe. */
@media (forced-colors: active) {
.rolle[data-rolle="admin"] .rolle__name,
.rolle[data-rolle="admin"]:hover .rolle__name {
background: none; color: CanvasText; filter: none;
}
}
/* DIE SCHIENE LAEUFT VON SILBER NACH BABYBLAU (09.09.2026).
Die Rollenschiene links wird sonst aus einer einzigen Farbe gebaut
@@ -2528,8 +2588,20 @@ body.gate {
Richtung wie das Licht auf der Kachel. */
.tafel .rolle[data-rolle="admin"]::before,
.rolle[data-rolle="admin"]::before {
/* DAS SILBER SITZT NUR NOCH OBEN (09.09.2026, screen1).
Vorher lief die Schiene bis 42 Prozent im hellen Silberton und
erreichte das Babyblau erst ganz unten -- auf 3 px Breite blieb
davon fast nichts uebrig. Jetzt ist der Silberkamm ein SPITZLICHT
am oberen Ende (die ersten 18 Prozent), darunter Babyblau ueber
die ganze restliche Laenge. Das ist dieselbe Verteilung, die eine
angestrahlte Metallkante wirklich hat: ein schmaler Glanz, viel
Eigenfarbe. */
background: linear-gradient(180deg,
#eef4fb 0%, var(--dogi-haupt) 42%, var(--dogi-zweit) 100%) !important;
#f2f8ff 0%,
var(--dogi-haupt) 18%,
var(--dogi-zweit) 62%,
#4fb3e8 100%) !important;
}
.rolle[data-rolle="admin"]::after {
@@ -2541,10 +2613,21 @@ body.gate {
Es traegt jetzt beide Toene: weiss am Kamm, babyblau im
Auslauf. So liest man die Mischung auch dort, wo keine Schiene
ist. */
/* EIN ZWEITER, BREITER SCHIMMER IN BABYBLAU (09.09.2026, screen1).
Der schmale weisse Kamm allein war Silber ohne Ton -- er sass auf
16 Prozent der Breite und war damit auf einer 900 px langen Zeile
ein Strich. Der neue Schimmer liegt darunter, ist viel breiter und
viel schwaecher: Er faerbt die Flaeche, statt sie zu streifen. */
linear-gradient(104deg,
transparent 4%,
rgba(120, 195, 240, .10) 30%,
rgba(120, 195, 240, .13) 58%,
rgba(120, 195, 240, .05) 82%,
transparent 96%),
linear-gradient(104deg,
transparent 8%,
rgba(255, 255, 255, .12) 16%,
rgba(160, 210, 245, .07) 22%,
rgba(174, 218, 248, .09) 22%,
transparent 32%),
/* Drei Lichtpunkte, unregelmaessig gesetzt. Regelmaessig waeren sie
ein Muster; unregelmaessig sind sie Zufall auf einer Oberflaeche. */
workspace/assets/css/heim.css
+48 -3
View File
@@ -666,10 +666,27 @@
.willkommen { --instrument: 224px; }
.willkommen__reihe { grid-template-columns: minmax(170px, var(--spalte)) minmax(0, 1fr); }
.willkommen__rechts { grid-column: 1 / -1; justify-content: center; margin-left: 0; }
/* EINE NUT TRENNT NUR, SOLANGE SIE ZWISCHEN ETWAS STEHT (09.09.2026).
Hier faellt die dritte Spalte weg: Die Uhr rutscht in eine eigene
Zeile darunter. Ihre Nut haengt aber weiter 18 px links von ihr --
und stand damit als senkrechter Strich mitten im Bild. Nachgemessen
bei 700 px: Die Nut lag bei x = 391 und trennte dort gar nichts.
Sie WAR ausgeschaltet, aber erst bei 620 px, und die Regel dafuer
stand 3000 Zeilen entfernt in start.css. Zwei Zahlen fuer dieselbe
Sache an zwei Orten -- der haeufigste Fehler in diesem Haus. Jetzt
steht das Ausschalten dort, wo die Spalte verschwindet, die es
begruendet. Wer die Spalten wieder anfasst, sieht es. */
.willkommen__rechts::before { display: none; }
}
@media (max-width: 780px) {
.willkommen { --instrument: 196px; }
.willkommen__reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Jetzt faellt auch die zweite Spalte weg -- ab hier trennt die linke
Nut ebenfalls nichts mehr. Bis hierher blieb sie richtig: Ring und
Text standen ja noch nebeneinander. */
.willkommen__links::before { display: none; }
.zgruss { flex-wrap: wrap; justify-content: center; }
.zgruss__text { text-align: center; align-items: center; }
}
@@ -758,17 +775,45 @@
Wand). Beides zusammen macht aus "davor" ein "darin".
===================================================================== */
.willkommen__rechts { position: relative; }
.willkommen__links { position: relative; }
/* Die Nut. */
.willkommen__rechts::before {
/* Die Nut -- ZWEIMAL, links und rechts vom Text (09.09.2026, screen2).
Filipe: "mach diesen strich der nach oben geht auch links bitte.
genau gleich."
Die Konsole hat drei Felder: Ring links, Text in der Mitte, Uhr
rechts. Eine Nut trennte bisher nur das rechte ab -- damit sass der
Text nicht ZWISCHEN zwei Instrumenten, sondern klebte am linken.
"GENAU GLEICH" HEISST HIER WIRKLICH GLEICH, nicht gespiegelt. Eine
Nut ist eine Fraesung in ein und dieselbe Platte, und das Licht faellt
im ganzen Haus von links oben. Also hat jede Nut dieselbe Flanke:
dunkel auf der Lichtseite, hell auf der Schattenseite. Eine
gespiegelte zweite Nut waere ein zweites Licht -- derselbe Fehler,
der heute schon an der Uhr steckte, wo die Lichtkante seitlich statt
von oben kam.
Beide teilen sich deshalb einen Regelsatz. Wer die eine aendert,
aendert die andere zwangslaeufig mit. */
.willkommen__rechts::before,
.willkommen__links::before {
content: ""; position: absolute;
left: -18px; top: -14px; bottom: -14px; width: 2px;
top: -14px; bottom: -14px; width: 2px;
pointer-events: none; z-index: 0;
background: linear-gradient(90deg,
rgba(0, 0, 0, .75) 0 1px,
rgba(255, 255, 255, .13) 1px 2px);
border-radius: 1px;
}
/* Jede sitzt in der Fuge NEBEN ihrem Feld: die rechte links von der
Uhr, die linke rechts vom Ring. Die 26 px Fuge kommen aus dem `gap`
der Reihe; 18 px Versatz setzen die Nut mittig hinein. */
.willkommen__rechts::before { left: -18px; }
.willkommen__links::before { right: -18px; }
/* Auch links liegen die Instrumente ueber der Nut -- gleiche
Begruendung wie rechts, siehe unten. */
.willkommen__links > * { position: relative; z-index: 1; }
/* DIE INSTRUMENTE LIEGEN UEBER DER MULDE -- und das muss ausdruecklich
dastehen. `::after` wird NACH allen Kindern gezeichnet; bei gleichem
workspace/assets/css/personen.css
+64
View File
@@ -457,6 +457,70 @@ body[data-nur-lesen="ja"] select { display: none; }
margin-left: -16px;
padding: 13px 16px 11px;
}
/* =====================================================================
DIE KOEPFE STEHEN IN SPALTEN, NICHT IN DER MITTE (screen3, 09.09.2026)
Filipe: "die sollen schön untereinander sein und nicht so
durcheinander."
URSACHE, gemessen statt vermutet: `.gruppe__zahl` traegt in start.css
ein `margin-left: auto` -- geschrieben fuer die STARTSEITE, wo im Kopf
nur Name, Zahl und Pfeil stehen und die Zahl damit ganz nach rechts
rutscht ("Sie steht ganz rechts, direkt vor dem Pfeil", so der
Kommentar dort). Auf DIESER Seite steht zwischen Zahl und Pfeil aber
noch der Zusatztext, und der Pfeil hat sein EIGENES `margin-left:
auto`. Zwei auto-Raender in einem Flexkasten teilen den freien Platz
zu gleichen Teilen -- also landete die Gruppe [Zahl + Zusatztext]
genau in der Mitte, und ihre Lage haing an der Laenge des Rollennamens
davor. Nachgemessen im Kopf:
DOGFATHER Name x 16, Zahl x 501, Zusatz x 531
SCOUT Name x 16, Zahl x 490, Zusatz x 520
CREATOR Name x 16, Zahl x 494, Zusatz x 525
Die Regel tat also nicht einmal auf dieser Seite, was ihr eigener
Kommentar behauptet. Sie bleibt fuer die Startseite unveraendert und
wird hier zurueckgenommen -- nicht dort geaendert, sonst kippt die
andere Seite.
VIER SPALTEN STATT FLEX. Name, Zahl, Zusatztext, Pfeil. Damit die
Spalten ueber ALLE Koepfe hinweg fluchten, brauchen sie dieselbe
Namensbreite -- die kommt aus `--namen-spalte`, und die wird in
personen.js an der fertig gezeichneten Liste GEMESSEN. Eine feste
Zahl (`min-width: 11ch`) waere wieder eine Rechnung von gestern: Sie
gilt bis zur naechsten Rolle mit einem laengeren Namen, und dann
verrutscht alles still. Der Rueckfallwert `max-content` sorgt dafuer,
dass es auch ohne JavaScript ordentlich aussieht -- nur eben nicht
gefluchtet. */
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
display: grid;
grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 12px;
}
/* `justify-self: start` haelt jedes Feld auf Inhaltsbreite. Ohne das
fuellt der Name seine Spalte aus -- und die Messung in personen.js
wuerde dann ihre eigene Vorgabe zurueckmessen statt der Textbreite. */
.liste-kachel .gruppe__name,
.liste-kachel .gruppe__zahl,
.liste-kachel .gruppe__unter { justify-self: start; }
.liste-kachel .gruppe__zahl { margin-left: 0; }
/* Der Pfeil braucht seinen auto-Rand im Raster nicht mehr -- die letzte
Spalte ist ohnehin die letzte. Mittig statt auf der Schriftlinie: ein
Zeichen hat keine Grundlinie, an der sich etwas ausrichten liesse. */
.liste-kachel > .gruppe > .gruppe__kopf--klappbar .klapp-pfeil {
margin-left: 0; justify-self: end; align-self: center;
}
/* Schmale Fenster: Der Zusatztext rutscht unter den Namen, statt die
Spalten zu stauchen. Zwei Zeilen sind lesbar, eine gequetschte
nicht. */
@media (max-width: 620px) {
.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
grid-template-columns: max-content auto minmax(0, 1fr) auto;
}
.liste-kachel .gruppe__unter { grid-column: 1 / -1; }
}
/* Ein Abschnitt, der offen ist, hebt sich leicht ab -- so sieht man,
welcher gerade Platz einnimmt, ohne eine zweite Farbe. */
.liste-kachel > .gruppe:has(> .gruppe__kopf[aria-expanded="true"]) {
workspace/assets/css/start.css
+182 -23
View File
@@ -1012,8 +1012,54 @@ body.start > main { position: relative; z-index: 1; }
transform: rotate(-8deg);
transition: opacity var(--tempo), transform var(--tempo);
}
.kachel__wasserzeichen svg {
width: 100%; height: 100%;
/* =====================================================================
WARUM DAS WASSERZEICHEN DREIMAL "ZU KLEIN" WAR (09.09.2026, screen4)
Filipe zum dritten Mal: "das symbol rechts in der kachel soll viel
groesser sein bitte."
Zweimal habe ich den KASTEN vergroessert. Beide Male hat sich nichts
geaendert, und ich habe es auf die Kachelhoehe geschoben. Diesmal habe
ich nachgesehen statt nachgerechnet -- der Kasten war 124 px, das SVG
darin 36:
.kachel[data-gross="ja"] .kachel__svg { width: 36px } (0,3,0)
.kachel__wasserzeichen svg { width: 100% } (0,1,1)
Die erste Regel meint das HAUPTSYMBOL links in der Kachel. Beide SVG
tragen aber dieselbe Klasse `kachel__svg`, weil sie aus derselben
Funktion kommen (`zeichenBauen`) -- und die Regel fuer das eine war
spezifischer als die Regel fuer das andere. Also stand im
Wasserzeichen jahrelang ein 36-px-Symbol, egal wie gross sein Kasten
war. Genau deshalb hat Filipe dreimal dasselbe gemeldet, und genau
deshalb hat mein Vergroessern nie etwas bewirkt: Ich habe die
Verpackung geaendert und nie den Inhalt gemessen.
Dasselbe galt fuer `.kachel:hover .kachel__svg` und die
Reduced-Motion-Regel. Alle drei sind jetzt auf `.kachel__zeichen`
eingeschraenkt -- sie meinen ohnehin nur das Hauptsymbol.
ZWEITENS FUELLT DIE ZEICHNUNG JETZT IHREN KASTEN. Im 24er-Raster
liegt sie bei x 4 bis 20 und y 4,5 bis 19,5, also 16 von 24 Einheiten
-- rund 38 Prozent des Kastens sind leerer Rand. 150 Prozent
Kastengroesse, um 25 Prozent nach aussen versetzt, ruecken die
Zeichnung genau auf die Kastenkante. Sie liegt im Raster mittig
(12/12), deshalb geht das ohne Verschiebung auf, und der leere Rand
ragt ins Nichts.
GROESSE STATT `transform`: Ein `transform` haette hier die
Reduced-Motion-Regel wieder zuruecksetzen koennen ("transform: none")
-- ausgerechnet fuer die Leute, bei denen ohnehin nichts wackelt.
Breite und Hoehe kann keine Bewegungsregel wegnehmen.
Ergebnis: Zeichnung von 36 auf 124 px, also 3,4-fache Kantenlaenge
und 11,9-fache Flaeche -- und samt der 8-Grad-Drehung (Faktor 1,129
= 140 px) vollstaendig in der 152 px hohen Kachel. Kein Beschnitt.
===================================================================== */
.kachel__wasserzeichen .kachel__svg {
position: absolute;
left: -25%; top: -25%;
width: 150%; height: 150%;
fill: none; stroke: var(--ton);
/* 1,4 statt 1,1: Bei 132 px Kantenlaenge ist eine Linie von 1,1
Einheiten im 24er-Raster rund sechs Bildpunkte breit -- sie traegt,
@@ -1063,9 +1109,27 @@ body.start > main { position: relative; z-index: 1; }
/* Auf der grossen Kachel darf es groesser sein -- aber ebenfalls
GANZ im Bild. 220 px auf 152 px Hoehe waren zu 50 Prozent
abgeschnitten; die Kachel ist breiter, nicht hoeher. */
width: min(132px, calc(100% - 30px));
height: min(132px, calc(100% - 30px));
right: 13px; bottom: 10px;
/* NEU BEMESSEN, WEIL DIE FORM JETZT DEN KASTEN FUELLT (09.09.2026).
Vorher: Kasten 132, Form darin 88 (67 Prozent). Jetzt fuellt die
Form ihren Kasten, also ist Kasten = Form -- und damit gilt die
Platzrechnung fuer die Form selbst:
Ein um 8 Grad gedrehtes Quadrat der Seite S braucht
S x (cos8 + sin8) = S x 1,129 an Hoehe.
Kachel 152 hoch, 6 px Luft oben und unten: S <= 140/1,129 = 124.
Form vorher 88 px, jetzt 124 px: 1,41-fache Kantenlaenge,
2,0-fache Flaeche -- und zum ersten Mal VOLLSTAENDIG im Bild.
SENKRECHT MITTIG STATT UNTEN VERANKERT. Mit `bottom: 10px` haengt
die Drehung unten ueber, waehrend oben Luft bleibt -- schief, und
genau das sah nach Fehler aus. `top: 0; bottom: 0; margin-block:
auto` zentriert ohne `transform`, der bleibt frei fuer die Drehung
(und fuer den Hover-Effekt, der ihn ebenfalls benutzt). */
width: min(124px, calc(100% - 16px));
height: min(124px, calc(100% - 16px));
right: 14px; top: 0; bottom: 0; margin-block: auto;
/* DIE DECKKRAFT BLEIBT BEI .14 wie bei den kleinen Kacheln.
Ich hatte sie auf .17 gehoben ("auf grosser Flaeche wirkt dieselbe
@@ -1163,7 +1227,14 @@ body.start > main { position: relative; z-index: 1; }
inset 0 1px 0 color-mix(in srgb, var(--ton) 55%, transparent),
0 6px 20px -8px color-mix(in srgb, var(--ton) 85%, transparent);
}
.kachel[data-gross="ja"] .kachel__zeichen { width: 78px; height: 78px; border-radius: 21px; }
/* DIE MASSE DER GROSSEN KACHEL STEHEN IM ABSCHNITT "Die grosse
Kachel" WEITER UNTEN -- Rahmen 70 px, Zeichen 39 px.
Hier standen 78 px und (weiter unten in dieser Datei) 36 px. Beide
waren tot: Der spaetere Block gewinnt bei gleicher Staerke. Genau
diese Doppelung ist am 09.09.2026 zum dritten Mal aufgefallen -- der
Kommentar unten behauptete sogar schon, es gebe "EINE Fassung".
Behauptet war es, gemessen nicht. Jetzt stimmt es. */
/* ---------- Die Zeichen (überarbeitet 03.09.2026) ------------------------
@@ -1282,15 +1353,22 @@ body.start > main { position: relative; z-index: 1; }
/* 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 {
/* .kachel__zeichen DAVOR IST PFLICHT (09.09.2026).
Ohne diese Einschraenkung trifft die Regel auch das SVG IM
WASSERZEICHEN -- beide tragen die Klasse `kachel__svg`, weil sie aus
derselben Funktion kommen. Sie hat dort die Groesse ueberschrieben,
und zwar staerker als die Regel des Wasserzeichens selbst. Siehe die
ausfuehrliche Begruendung bei `.kachel__wasserzeichen .kachel__svg`. */
.kachel:hover .kachel__zeichen .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: 36px; height: 36px; }
@media (prefers-reduced-motion: reduce) {
.kachel__svg, .kachel:hover .kachel__svg { transition: none; transform: none; }
.kachel__zeichen .kachel__svg,
.kachel:hover .kachel__zeichen .kachel__svg { transition: none; transform: none; }
}
@media (forced-colors: active) {
/* Ohne Farben trägt allein die Linie. Der Schein wäre dort ein
@@ -4890,7 +4968,17 @@ body[data-fremde-sicht="ja"]::after {
.kachel[data-gross="ja"] .kachel__zeichen {
width: 70px; height: 70px; margin: 0; border-radius: 18px;
}
.kachel[data-gross="ja"] .kachel__svg { width: 39px; height: 39px; }
/* `.kachel__zeichen` DAVOR IST PFLICHT (09.09.2026, screen4).
Ohne diese Einschraenkung trifft die Regel auch das SVG im
WASSERZEICHEN -- beide tragen `kachel__svg`, weil sie aus derselben
Funktion kommen. Sie war staerker als die Regel des Wasserzeichens
und hat dessen Zeichnung auf 39 px festgenagelt, egal wie gross sein
Kasten war. Deshalb hat Filipe dreimal "das symbol soll groesser
sein" gemeldet und mein zweimaliges Vergroessern des Kastens nichts
bewirkt: Ich habe die Verpackung geaendert und nie den Inhalt
gemessen. */
.kachel[data-gross="ja"] .kachel__zeichen .kachel__svg { width: 39px; height: 39px; }
.kachel[data-gross="ja"] .kachel__text { margin-top: 0; }
.kachel[data-gross="ja"] .kachel__name { font-size: 1.22rem; -webkit-line-clamp: 1; }
.kachel[data-gross="ja"] .kachel__unter { font-size: .84rem; -webkit-line-clamp: 1; }
@@ -5710,9 +5798,14 @@ body[data-fremde-sicht="ja"]::after {
Seite -- fehlt auf 17 Seiten". */
@media (max-width: 620px) {
/* Die Nut trennt Text von Instrumenten -- nebeneinander. Untereinander
traennte sie nichts und stuende quer im Bild. */
.willkommen__rechts::before { display: none; }
/* Die Nuten werden nicht mehr HIER ausgeschaltet, sondern in heim.css
bei 1180 px und 780 px -- jeweils in derselben Regel, die die
zugehoerige Spalte aufloest. Diese Zeile stand bei 620 px und kam
damit 160 px zu spaet: Zwischen 621 und 780 px stand die rechte Nut
als freier senkrechter Strich im Bild, nachgemessen bei 700 px bei
x = 391, wo sie nichts mehr trennte. Entfernt statt korrigiert --
eine zweite Zahl an einem zweiten Ort waere derselbe Fehler noch
einmal. */
/* Auf dem Handy rückt die Gruppe unter den Gruß und die Uhr wird
kleiner -- 108 px neben einer Überschrift lassen für den Namen
keine Zeile mehr übrig. */
@@ -6583,35 +6676,101 @@ body[data-fremde-sicht="ja"]::after {
pointer-events: none;
}
/* ---- Die Knöpfe: alle rot, aber jeder ein anderes Rot -------------
/* ---- Die Knöpfe: zwei in Jade, zwei in Rot -------------------------
"alle andere rot töne aber rot" -- also nicht viermal derselbe Ton.
Die vier laufen von warm nach tief: Teilen ist das hellste
(Chili-Rot der Marke), Chat etwas ruhiger, Suchen glutorange,
Abmelden am dunkelsten. Das ist auch die Reihenfolge, in der man sie
braucht -- und Abmelden soll am wenigsten locken.
Bis zum 09.09.2026 waren alle vier rot ("alle andere rot töne aber
rot"). Filipe (screen5): "der abmelde button und teilen button sollen
eine richtig geile grün haben bitte und nicht rot. aber soll wirklich
geil sein. richtig speziell. aber so dass es nicht den augen wehtut
aber doch speziell."
ES IST JADE, KEIN SIGNALGRUEN. Nachgerechnet in HSL:
bisher #ff7a5e Saettigung 100 %
Neongruen #00ff88 Saettigung 100 %
jetzt #45d6a6 Saettigung 63 %
#33b394 Saettigung 55 %
Beide neuen Toene sind also WENIGER gesaettigt als das Rot, das
vorher dort stand -- die Leiste wird durch den Wechsel ruhiger, nicht
greller. "Speziell" kommt hier aus der Farbe selbst: Ein Jadegruen
auf einer Leiste, die von unten rot glueht, ist der groesstmoegliche
Gegensatz, und genau deshalb faellt es auf, ohne laut zu sein.
ZWEI VERSCHIEDENE GRUEN, nicht zweimal dasselbe -- dieselbe Regel wie
vorher bei den vier Rottoenen. Teilen ist das hellere (man benutzt es
absichtlich), Abmelden das tiefere und kuehlere: Es soll am wenigsten
locken, und das macht man ueber Helligkeit, nicht ueber Warnfarbe.
Chat und Suchen bleiben rot. Damit teilt die Leiste sich in "das
mache ich mit der Seite" (rot, in der Mitte) und "das mache ich mit
meinem Zugang" (jade, aussen) -- die Farbe sagt etwas, statt nur
verschieden zu sein.
`--f` ist die Knopffarbe aus gate.css; sie färbt Rahmen, Schimmer
und den Schein beim Überfahren gleich mit. Deshalb wird hier nur
diese eine Variable gesetzt statt fünf Eigenschaften je Knopf. */
.kopfleiste .teilen { --f: #ff7a5e; }
.kopfleiste .teilen { --f: #45d6a6; --f-tief: #1d8f74; }
.kopfleiste .chat-knopf { --f: #f26a5a; }
.kopfleiste .suche-knopf { --f: #e8734f; }
.kopfleiste .abmelden { --f: #d2564a; }
.kopfleiste .abmelden { --f: #33b394; --f-tief: #17705d; }
/* Die Schrift muss auf dem dunklen Knopf lesbar bleiben: Ein Rot als
Rahmen ist etwas anderes als ein Rot als Schrift. Deshalb steht der
Text weiterhin hell und nimmt nur einen Hauch der Knopffarbe an. */
Text weiterhin hell und nimmt nur einen Hauch der Knopffarbe an.
DAS GEMISCHTE WEISS FOLGT DER KNOPFFARBE (09.09.2026). #f4e6e2 ist
ein warmes, leicht rotstichiges Weiss -- richtig unter roten Knoepfen,
falsch unter gruenen: Dort ergab es einen schmutzigen Ton, weil sich
Rotstich und Gruen gegenseitig ausloeschen. Die beiden Jadeknoepfe
bekommen deshalb ein kuehles Weiss. Gemessen auf der Leiste:
15,6:1 und 15,0:1 -- besser als die 13,6:1 und 12,6:1 vorher. */
.kopfleiste .teilen,
.kopfleiste .chat-knopf,
.kopfleiste .suche-knopf,
.kopfleiste .abmelden {
color: color-mix(in srgb, var(--f) 22%, #f4e6e2);
color: color-mix(in srgb, var(--f) 22%, var(--f-weiss, #f4e6e2));
border-color: color-mix(in srgb, var(--f) 42%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--f) 9%, transparent),
color-mix(in srgb, var(--f) 4%, transparent));
}
.kopfleiste .teilen, .kopfleiste .abmelden { --f-weiss: #e9f7f0; }
/* WARUM HIER KEIN VERLAUFSRAHMEN STEHT (09.09.2026, nach dem ersten
Versuch verworfen).
Ich hatte den beiden Jadeknoepfen einen Rahmen aus drei Toenen gegeben
-- ueber zwei Lagen, `padding-box` fuer die Flaeche und `border-box`
fuer den Rand. Im Bildschirmfoto waren beide Knoepfe daraufhin
FLAECHIG GRUEN und damit doppelt so laut wie Chat und Suchen daneben.
Der Grund ist der Trick selbst: Eine `border-box`-Lage liegt unter der
GANZEN Flaeche, nicht nur unter dem Rand. Sichtbar wird sie nur dort,
weil die `padding-box`-Lage darueber sie ueberall sonst zudeckt. Ich
hatte diese obere Lage durchsichtig gemacht (wie bei den roten
Knoepfen) -- damit deckte sie nichts mehr zu, und der Rahmenverlauf
fuellte den Knopf.
Deckend haette es funktioniert, aber dann waeren die beiden die
einzigen Knoepfe mit undurchsichtigem Koerper. Deshalb der Rueckbau
auf denselben Aufbau wie bei den roten: durchscheinende Flaeche, EIN
Randton. "Speziell" macht hier die Farbe, nicht die Bauart -- ein
Jadegruen auf einer rot gluehenden Leiste faellt von selbst auf, und
zwar ohne lauter zu sein. Zahlen dazu stehen weiter oben: beide neuen
Toene sind WENIGER gesaettigt als das Rot, das vorher dort stand.
Nur der Lichtkamm oben muss mitgeaendert werden -- er kommt aus der
gemeinsamen Regel in gate.css und rechnet dort mit `--f`. */
/* Der Lichtkamm oben nimmt den helleren der beiden Toene -- sonst
liegt auf einem gruenen Knopf ein roter Streifen (er kommt aus der
gemeinsamen Grundregel in gate.css und rechnet dort mit `--f`). */
.kopfleiste .teilen::after,
.kopfleiste .abmelden::after {
background: linear-gradient(90deg, transparent,
color-mix(in srgb, var(--f) 70%, transparent), transparent);
opacity: .85;
}
/* DIE ZAHLENREIHE BLEIBT STEHEN, AUCH WENN ALLES NULL IST (08.09.2026).
workspace/assets/js/personen.js
+29
View File
@@ -648,6 +648,35 @@
ziel.append(block);
}
/* DIE NAMENSSPALTE WIRD GEMESSEN (09.09.2026, screen3).
Filipe: "die sollen schön untereinander sein und nicht so
durcheinander."
Die Koepfe stehen seit heute in vier Spalten (siehe personen.css).
Damit Zahl und Zusatztext ueber alle Abschnitte hinweg fluchten,
muss die erste Spalte ueberall gleich breit sein -- und zwar so
breit wie der LAENGSTE Rollenname.
Diese Breite wird hier am gezeichneten Text abgenommen, nicht
ausgerechnet. Eine feste Angabe (`11ch` fuer "Spicy Media") waere
auf drei Arten falsch: Sie haengt an der Schriftart, `ch` misst
die Ziffer Null und nicht Grossbuchstaben mit Sperrung, und sie
gilt nur, bis jemand eine sechste Rolle mit laengerem Namen
anlegt. Gemessen stimmt sie immer.
Erst zuruecksetzen, dann messen: Steht die Vorgabe noch, fuellt
jeder Name seine Spalte aus, und die Messung liefert die eigene
Vorgabe von eben zurueck. (`justify-self: start` im CSS haelt die
Felder zusaetzlich auf Inhaltsbreite -- Guertel und Hosentraeger,
weil dieser Fehler von aussen wie ein Zufall aussaehe.) */
ziel.style.removeProperty('--namen-spalte');
const namen = [...ziel.querySelectorAll('.gruppe__name')];
if (namen.length) {
const breit = Math.max(...namen.map((n) => n.getBoundingClientRect().width));
if (breit > 0) ziel.style.setProperty('--namen-spalte', Math.ceil(breit) + 'px');
}
/* Ein Knopf für alle auf einmal -- bei vier Rollen viermal klicken zu
müssen, nur um einmal alles zu sehen, wäre unnötige Arbeit. */
const schalter = $('rest-schalter');