/* ========================================================================= fusz.css — die schmale Leiste am Fuß jeder Seite. ------------------------------------------------------------------------- WARUM ES SIE GIBT, und zwar nicht nur der Zier wegen: Impressum und Datenschutzerklärung liegen seit dem 28.08. unter /impressum und /datenschutz und werden von Frostbytes erzeugt — verlinkt waren sie bis dahin von KEINER Seite. Ein Pflichttext, den man nur findet, wenn man die Adresse rät, ist rechtlich nicht erreichbar. Die Leiste ist der Ort, an dem ein Besucher ihn erwartet. REYS VORGABE (28.08.): "schmal", "dezent". Deshalb keine Spalten, keine Wiederholung der Navigation, kein zweiter Auftritt der Marke in Textform: eine Zeile, eine feine Linie darüber, das Symbol als Zeichen. DAS SYMBOL IST DER LINK NACH HAUSE, nicht bloßes Bild — deshalb trägt es einen zugänglichen Namen und das selbst ein leeres alt. Zwei Namen für denselben Link ließe ein Screenreader sonst beide vorlesen. ========================================================================= */ :root { /* Die Höhe steht als Token, weil die Unterseiten mit ihr rechnen und die Leiste auf der Startseite als Scheibe über dem Bild genau diese Höhe behalten soll — dort ist sie das Maß der Weichzeichnung, nicht mehr das Maß eines abgeschnittenen Bildes (siehe unten). */ --fusz-hoehe: 3.5rem; /* Die Weichzeichnung hinter der Leiste auf der Startseite. 14px nimmt dem Motiv die Struktur, ohne es zu einer Farbfläche zu machen: Man sieht noch, dass dahinter ein Bild weiterläuft, und liest es nicht mehr als eigenen Streifen. */ --fusz-weichzeichnung: 14px; } /* DIE SEITE WIRD MINDESTENS EINEN SCHIRM HOCH, UND DIE LEISTE SITZT UNTEN. Ohne das steht sie auf kurzen Seiten mitten im Bild: Kontakt und Nachweise enden bei rund 850 px, darunter lag die Leiste und darunter nochmal 230 px leerer Grund. Der Kopf ist fixiert und fällt aus dem Fluss, die Reihe der Kinder ist deshalb unkritisch. */ body { display: flex; flex-direction: column; min-block-size: 100svh; } .fusz { /* Schiebt die Leiste an den unteren Rand, sobald der Inhalt kürzer ist als der Schirm. Ist er länger, tut margin: auto nichts. */ margin-block-start: auto; /* Die Höhe steht auf DIESEM Kasten, nicht auf dem Innenteil: Der Rahmen zählt bei border-box hinein, und die Unterseiten rechnen mit dem Außenmaß. Stand sie innen, war die Seite genau die Linie zu hoch — ein Pixel Rollbalken auf einer Seite, die auf einen Schirm passt. */ min-block-size: var(--fusz-hoehe); border-block-start: var(--rand-fein); /* KEIN EIGENER GRUND. Die Seite liegt auf einem Verlauf (base.css); eine weiße Fläche darunter wäre ein sichtbarer Streifen statt einer Leiste. Die feine Linie genügt als Abgrenzung. Das gilt für die UNTERSEITEN. Auf der Startseite liegt die Leiste über dem Foto und bekommt dort beides — Tönung und Weichzeichnung. Warum nur dort, steht ganz unten. */ } .fusz__innen { display: flex; align-items: center; gap: var(--raum-4); min-block-size: calc(var(--fusz-hoehe) - 1px); padding-block: var(--raum-2); } .fusz__marke { display: inline-flex; line-height: 0; border-radius: var(--radius-s); } .fusz__marke img { inline-size: 1.25rem; block-size: 1.25rem; } .fusz__recht, .fusz__link { color: var(--text-leise); font-size: var(--schrift-xs); line-height: var(--zeile-knapp); } /* Die beiden Pflichtlinks stehen rechts und rücken als Paar zusammen — die Luft dazwischen ist bewusst kleiner als der Abstand zum Copyright, damit sie als eine Gruppe zu lesen sind und nicht als drei Einzelteile. */ .fusz__wege { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); margin-inline-start: auto; } .fusz__link { text-decoration: none; border-block-end: 1px solid transparent; } .fusz__link:hover, .fusz__link:focus-visible { color: var(--akzent); border-block-end-color: currentColor; } /* AUF DEM TELEFON UMBRECHEN STATT QUETSCHEN. Bei 375 px stehen Symbol, Copyright und zwei Links nicht nebeneinander, ohne dass die Schrift umbricht — dann lieber zwei saubere Zeilen. Das margin-inline-start:auto der Wege fällt dabei weg, sonst hängt die Gruppe allein rechts. */ @media (max-width: 30rem) { .fusz__innen { flex-wrap: wrap; gap: var(--raum-2) var(--raum-3); padding-block: var(--raum-3); } .fusz__wege { margin-inline-start: 0; flex-basis: 100%; } } /* --- Startseite --------------------------------------------------------- REYS BEFUND VOM 28.08. ABENDS: "Die Fußzeile auf byte-art ist bei weitem nicht so unauffällig wie ich sie mir wünschte. Vor allem auf der Startseite ist sie viel zu präsent. Setz den Hintergrund bitte einfach auf ein Blur." WAS SIE PRÄSENT GEMACHT HAT, und es war nicht ihre Farbe: Sie stand NEBEN dem Bild, nicht darauf. Die Hero wurde mit 100svh minus Leistenhöhe gemessen, damit beide zusammen auf einen Schirm passen — damit endete das Vollbild 3,5rem über dem Schirmrand, und darunter lag ein heller Streifen mit einer harten Linie quer über die ganze Seite. Ein Vollbild, dem unten ein Balken abgeschnitten ist, fällt genau deshalb auf. Die Leiste war nicht zu laut, sie war zu sehr Nachbar. JETZT LIEGT SIE DARAUF. Die Hero bekommt den ganzen Schirm zurück, die Leiste fällt aus dem Fluss und schwebt als Scheibe über ihrem unteren Rand. Das Foto läuft dahinter weiter und wird nur weichgezeichnet — es gibt keine Kante mehr, an der es aufhört. Gescrollt wird dadurch nicht: main trägt auf der Startseite allein die Hero. DIE TÖNUNG IST NICHT FREI GEWÄHLT. Glas auf dem Hero-Foto ist --glas-auf-grund; so steht es in tokens.css bei der Glasregel, und genau dafür gibt es sie. Die Weichzeichnung allein nimmt dem Grund die Struktur, nicht die Helligkeit — ohne Tönung stünde der Text der Leiste auf den dunkleren Stellen des Motivs ohne Kontrast. DIE LINIE FÄLLT. Sie war die Abgrenzung, solange die Leiste einen eigenen Platz neben dem Bild hatte. Über dem Bild ist die Scheibe ihre eigene Kante; die Linie wäre wieder der harte Strich, der gerade weg sollte. Auf den Unterseiten bleibt sie. */ body.startseite .hero { height: 100svh; } body.startseite { /* Bezugsrahmen für die Leiste. Die Startseite scrollt nicht, absolut und fixiert sähen hier deshalb gleich aus — absolut bleibt aber auch dann richtig, wenn ein sehr flacher Schirm die Hero auf ihre min-height von 34rem zwingt: Dann sitzt die Leiste am Fuß des Dokuments statt über dem Inhalt zu schweben. */ position: relative; } body.startseite .fusz { position: absolute; inset-inline: 0; inset-block-end: 0; /* Über den Inhalt der Hero, aber unter den Kopf (--ebene-kopf: 10). Die Kinder der Hero tragen position: relative ohne eigene Ebene; eine 1 genügt deshalb und hält die Klappnavigation weiter oben. */ z-index: 1; border-block-start: none; /* KEIN GLAS AUF DER LEISTE SELBST — es liegt seit dem 31.08. an den Pillen. Begründung im nächsten Block. */ background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* --- Zwei Pillen statt einer Scheibe (31.08.) --------------------------- REYS ANSAGE: "Für die Fußzeile haben wir den Blur über die gesamte Leiste gezogen. Pass mal so an, dass es nur auf dem inhaltlichen Element liegt. Also zwei Pillen. Einmal links das Copyright und rechts Impressum/Datenschutz. Achte aber darauf, dass beide Pillen gleich groß sind. Inhalt dann entsprechend zentriert." WAS DIE SCHEIBE NOCH FALSCH GEMACHT HAT: Sie hat das Problem von oben nur verschoben. Der Block darüber hat die harte Linie beseitigt, indem er die Leiste auf das Bild gelegt hat — aber sie blieb ein Streifen über die ganze Breite, und ein weichgezeichneter Streifen quer durchs Motiv ist immer noch ein Streifen quer durchs Motiv. Zwei Pillen tragen dasselbe Glas und dieselbe Tönung, nehmen aber nur den Platz ihres Inhalts; dazwischen läuft das Foto ungestört durch. DAS WRAPPER-ELEMENT IST NUR AUF DER STARTSEITE WIRKSAM. Auf den Unterseiten steht die Leiste weiterhin als Zeile mit Linie darüber; damit ein dort kopiertes Markup nichts verstellt, ist die Pille im Grundzustand `display: contents` — sie verschwindet dann aus dem Layout, als wäre sie nicht da. */ .fusz__pille { display: contents; } body.startseite .fusz__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4); } /* GLEICH GROSS, UND ZWAR ÜBER EINE EINZIGE ZAHL. Es gibt in CSS keinen Weg, zwei inhaltsbreite Kästen an den beiden Enden einer Zeile automatisch auf dieselbe Breite zu bringen: `1fr` in einem Raster macht sie gleich, aber je halb so breit wie die Leiste — und dann ist die Scheibe zurück, die hier gerade weggeht. Also bekommen beide dieselbe MINDESTBREITE, gewählt so, dass sie beide Inhalte überragt. Dann liegen beide exakt auf ihr statt auf ihrem Inhalt, und sie sind gleich groß, weil sie dieselbe Zahl teilen. IN `ch` UND NICHT IN PIXELN: `ch` ist die Breite einer Ziffer der laufenden Schrift, wächst also mit ihr, statt an ihr vorbeizulaufen. Nachgemessen bei 1920x1080: die linke Gruppe (Zeichen plus Copyright) braucht 246 px, die rechte (Impressum, Datenschutz) 210 px; 1ch sind hier 10,18 px. 26ch = 265 px trägt beide mit Luft. WIRD EINE BESCHRIFTUNG LÄNGER, ist diese eine Zahl die Stelle, an der man das nachzieht. `nowrap` sorgt dafür, dass ein zu langer Text die Pille sichtbar auseinanderschiebt, statt still umzubrechen und die Ungleichheit hinter zwei Zeilen zu verstecken. MINDESTHÖHE, weil die linke Pille ein 20-px-Zeichen trägt und die rechte nur eine Textzeile von 18,5 px. Ohne sie wären sie 1,5 px verschieden — wenig, aber bei zwei Kapseln nebeneinander sieht man es. ZENTRIERT, weil zwei gleich breite Kästen mit linksbündigem Inhalt aussehen wie zwei ungleiche. */ body.startseite .fusz__pille { display: flex; align-items: center; justify-content: center; gap: var(--raum-3); min-inline-size: 26ch; min-block-size: 2.25rem; white-space: nowrap; padding-inline: var(--raum-4); padding-block: var(--raum-2); border-radius: var(--radius-voll); background-color: var(--glas-auf-grund); backdrop-filter: blur(var(--fusz-weichzeichnung)); -webkit-backdrop-filter: blur(var(--fusz-weichzeichnung)); } /* Die Grundregel schiebt die Wege mit `margin-inline-start: auto` an das rechte Ende der Leiste. In der Pille wäre das das Gegenteil von zentriert — den Abstand trägt jetzt das space-between der Zeile. */ body.startseite .fusz__wege { margin-inline-start: 0; } /* AUF DEM TELEFON UNTEREINANDER. Zwei Pillen von je 26ch stehen bei 375 px nicht nebeneinander. Sie behalten ihre Form und stapeln sich mittig. Die Regel steht NACH dem Umbruch-Block weiter oben, damit sie dessen `flex-basis: 100%` für die Wege nicht mitnimmt. */ @media (max-width: 30rem) { body.startseite .fusz__innen { flex-wrap: wrap; justify-content: center; gap: var(--raum-2); } body.startseite .fusz__wege { flex-basis: auto; } }