diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index d3b6f3ed..e4421c2a 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -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. */ diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 36d8ba6e..26e79047 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -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 diff --git a/workspace/assets/css/personen.css b/workspace/assets/css/personen.css index 745148d4..7c825346 100644 --- a/workspace/assets/css/personen.css +++ b/workspace/assets/css/personen.css @@ -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"]) { diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index a81ddba4..d86f1758 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -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). diff --git a/workspace/assets/js/personen.js b/workspace/assets/js/personen.js index fc067d9e..ee8d5059 100644 --- a/workspace/assets/js/personen.js +++ b/workspace/assets/js/personen.js @@ -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');