diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 54d6cdab..3fbdc32c 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -607,8 +607,37 @@ font-size: 1rem; line-height: 1.55; max-width: 46ch; margin: 2px auto 0; text-wrap: balance; + + /* `justify-content: center` -- und ohne das war die Zeile schief. + + `.willkommen .unterzeile` (start.css) macht daraus einen FLEX-Kasten + mit Umbruch, damit die Lage hinter der Rolle stehen und auf dem + Handy in die zweite Zeile rutschen kann. Das ist richtig so. Nur: + In einem Flex-Kasten ordnet `text-align` die Elemente NICHT an -- + es zentriert den Text INNERHALB jedes Elements, waehrend die + Elemente selbst links kleben bleiben (Vorgabe `flex-start`). + + In der breiten alten Begruessung fiel das nie auf, weil beide in + eine Zeile passten. Die Spalte der Zentrale ist 397 px schmal, also + bricht es immer um -- und dann steht jede Zeile fuer sich links. + Gemessen bei 1920 px: der Rollentext 39,7 px und die Lage 58,6 px + links der Achse, auf jeder Fensterbreite gleich. + + `align-items` waere hier das falsche Werkzeug: Die Richtung ist + `row` mit Umbruch, nicht `column`. Gezielt wird also die Verteilung + IN der Zeile, und die heisst `justify-content`. */ + justify-content: center; } +/* Der Aufzaehlungspunkt der Lage haengt in einem `padding-left: 14px` + (start.css). Steht die Lage in einer eigenen Zeile -- in dieser + Spalte immer --, ist das Element dadurch 14 px breiter als sein Text, + und der Text sitzt 7 px rechts der Mitte. Ein Ausgleich auf der + anderen Seite macht das Element wieder symmetrisch; der Punkt bleibt, + wo er ist. Bewusst nur hier und nicht in start.css: Stehen Rolle und + Lage nebeneinander, waere ein rechter Rand ein zu grosser Abstand. */ +.willkommen__reihe .willkommen__lage { padding-right: 14px; } + .ztitel { margin: 0; /* Obergrenze von 2.9 auf 2.45rem. Bei 1440 px lief der Titel vorher @@ -723,7 +752,25 @@ sind eine Kante. Dieselbe Regel wie bei der Nut daneben. */ .willkommen__stand { display: flex; align-items: stretch; - margin-left: auto; flex: 0 1 auto; + /* KEIN `margin-left: auto` (entfernt 08.09.2026). + + Es stammte aus der Zeit, als die drei Ablesungen RECHTS zwischen + Text und Uhr standen -- dort hat es sie an den rechten Rand + geschoben. Seit sie unter dem Titel in der Mitte stehen, schlaegt + es das `align-items: center` der Spalte: In einer Flex-Spalte + gewinnt ein `auto`-Rand immer gegen die Ausrichtung des Elternteils. + + Gemessen bei 1920 px: Anrede, Zierzeile, Titel und Unterzeile lagen + alle exakt auf Mitte 960 -- dieser Kasten allein auf 1129, also + 169 px zu weit rechts. Genau das hat Filipe im Bildschirmfoto + gesehen. + + Aufgefallen war es schon einmal: Weiter unten stand fuer 412 px + bereits `margin-left: 0`, mit dem Vermerk "im Bildschirmfoto + gesehen, nicht hergeleitet". Dort wurde das Symptom geflickt, die + Ursache blieb -- und auf dem grossen Bildschirm damit bestehen. + Deshalb hier weg statt dort noch einmal. */ + flex: 0 1 auto; padding: 3px; border-radius: 13px; background: @@ -1350,7 +1397,11 @@ Breite gehen duerfen, wenn drei Felder nebeneinander nicht mehr passen -- dann verteilen sie sich, statt sich zu stauchen. */ .willkommen__stand { - margin-left: 0; width: 100%; + /* `margin-left: 0` steht hier nicht mehr: Der `auto`-Rand, den es + zuruecknehmen musste, ist seit dem 08.09.2026 aus der Grundregel + verschwunden. Eine Zeile, die nichts mehr aufhebt, sieht aus wie + eine Absicht und wird beim naechsten Mal mitgeschleppt. */ + width: 100%; justify-content: space-around; } .stand { min-width: 0; flex: 1 1 0; padding: 10px 8px 9px; }