diff --git a/public/assets/site.css b/public/assets/site.css index b252062..a36031e 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -438,9 +438,14 @@ body.consent-open{padding-bottom:320px} .kant .width-full>.section-inner{width:100%;max-width:none;margin-inline:0} @media (max-width:767px){.kant .width-wide>.section-inner{width:calc(100% - 36px)}} -/* A section that is a flex container centres its content box; the inner container must then be - allowed to grow, or a full height section would show a strip in the middle. */ -.block-section>.section-inner{flex:1 1 auto} +/* Ein Abschnitt, der ein Flex-Kasten ist, reiht seinen Inhaltskasten als Flex-Element ein. + Wachsen darf der dabei nicht: die Laufrichtung ist voreingestellt die Zeile, und dort frisst + das Wachsen die Randluft des Containers. Auf dem Telefon stand der Text eines Hero-Abschnitts + damit hart an der Kante, waehrend Kopf und alle uebrigen Abschnitte ihre 18 px hatten - am + Schreibtisch fiel es nicht auf, weil dort die Hoechstbreite des Designs vorher bremst. + Die Hoehe braucht das Wachsen nicht: quer zur Laufrichtung dehnt sich ein Flex-Element + ohnehin ueber die volle Hoehe, und steht "Ausrichtung: Mitte", ist die Mitte gewollt. */ +.block-section>.section-inner{flex:0 1 auto} /* Menu kinds. Horizontal is the default; vertical stacks; burger is a details element, so it opens without a script - a menu that needs one would not open on a page that runs none. */ @@ -472,9 +477,13 @@ body.consent-open{padding-bottom:320px} weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */ .site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none} .site-header .menu-burger[open]>summary{border-radius:8px} +/* Die Flaeche malt ihren eigenen Untergrund, also setzt sie auch ihre eigene Schriftfarbe. + Ohne das erbte sie die Farbe des Kopfbereichs: bei einem Kopf, der ueber einem dunklen Bild + schwebt und deshalb weiss schreibt, stand das aufgeklappte Menue weiss auf weiss. */ .site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30; padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px; - background:var(--paper);box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)} + background:var(--paper);color:var(--ink); + box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)} .site-header .menu-burger-body .menu-list{gap:0} .site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px} /* Visibility never overwrites the block's grid/flex/display settings. */