/* ===================================================================== aufbau.css – Seitenaufbau für tabularium.info --------------------------------------------------------------------- Maße und Variablen, Kopfzeile, Seitenleiste mit Hauptmenü, Inhaltsbereich und die Grenzen der Fensterbreiten. Zwei Bauteile stehen in eigenen Dateien, die direkt nach dieser geladen werden (Reihenfolge in seite_ausgeben() in src/vorlage.php): - dialoge.css: die Dialoge (Menü-Schublade, Benutzerbereich, Übersicht "Tastenkürzel") - leisten.css: die schwebende Leiste unten (iPhone) und das Ausblenden von Kopfzeile und Leiste beim Scrollen Beide benutzen die Variablen aus Abschnitt 1 dieser Datei. Farben, Schriften und Dauern kommen ausschließlich als Variablen aus grundlagen.css; diese Datei schreibt keine eigenen Farbwerte. Größen und Abstände in rem, Linienstärken in px. ===================================================================== */ /* ===================================================================== GRENZEN DER FENSTERBREITEN Dies ist die einzige Stelle, an der die Grenzen festgelegt sind. --------------------------------------------------------------------- schmal: bis 559 Pixel Breite mittel: 560 bis 743 Pixel Breite breit: ab 744 Pixel Breite Ausnahme: Ist das Fenster höchstens 500 Pixel hoch und wird es mit dem Finger bedient (iPhone quer), gilt immer "schmal". Warum ein Kommentar statt einer Variable? CSS-Variablen funktionieren in @media-Bedingungen nicht: Der Browser wertet die Bedingungen aus, bevor er Variablen kennt. (Eine geplante Lösung namens @custom-media kennt Safari noch nicht.) Deshalb werden die Bedingungen überall GENAU SO geschrieben wie hier – abschreiben, nicht abwandeln: breit: @media (width >= 744px) and ((height > 500px) or (not (pointer: coarse))) benutzt in: aufbau.css, Abschnitt 8 (BREIT) mittel: @media (560px <= width < 744px) and ((height > 500px) or (not (pointer: coarse))) benutzt in: aufbau.css, Abschnitt 7 (MITTEL) schmal: @media (width < 560px), ((height <= 500px) and (pointer: coarse)) benutzt in: aufbau.css, Abschnitt 6 (SCHMAL); dialoge.css, Abschnitt 4 (SCHMAL: Menü-Schublade über der Leiste); leisten.css, Abschnitt 2 (SCHMAL: Leiste sichtbar, Ausblenden beim Scrollen) mittel oder breit (= alles, was nicht "schmal" ist): @media (width >= 560px) and ((height > 500px) or (not (pointer: coarse))) benutzt in: startseite.css, Abschnitt 1 (Kacheln: vier in einer Reihe) Lesehilfe: "pointer: coarse" heißt "Bedienung mit dem Finger", "not (pointer: coarse)" heißt "Bedienung mit Maus oder Trackpad". Die Grenzen stehen in Pixeln, weil sie die Fensterbreite beschreiben, nicht die Schriftgröße. Die drei Bedingungen schmal, mittel und breit decken zusammen jede Fenstergröße ab; jedes Fenster fällt in genau eine davon. "Mittel oder breit" ist genau das Gegenteil von "schmal". Wer eine Grenze ändert, muss deshalb alle vier Zeilen hier und alle genannten Stellen anpassen. JavaScript enthält keine dieser Bedingungen. Aufbau dieser Datei: - Zuerst die Regeln, die immer gelten (Abschnitte 1 bis 5: Maße, "Zum Inhalt springen", Kopfzeile, Ladezeichen, Seitenleiste und Menü). - Danach je EIN Block mit der Bedingung "schmal" (Abschnitt 6: Seitenraster und Kopfzeile, keine Seitenleiste), "mittel" (Abschnitt 7: Menüknopf, keine Seitenleiste) und "breit" (Abschnitt 8: Raster mit Kopfzeile und Seitenleiste). Kopfzeile und Seitenleiste stehen zusammen in dieser Datei, weil sie in "breit" dasselbe Spaltenraster benutzen. ===================================================================== */ /* --------------------------------------------------------------------- 1. Maße, Rundungen und Ebenen für den Aufbau --------------------------------------------------------------------- */ :root { /* GEMEINSAME MASSE für Kopfzeile und Inhalt (nur hier ändern): Kopfzeile und Bereich darunter benutzen dieselben Werte, damit das Suchfeld bündig über der Textspalte steht. */ /* Breite der Seitenleiste */ --seitenleiste-breite: 17rem; /* Abstand der schwebenden Flächen zum Fensterrand und untereinander, auch zwischen Seitenleiste und Inhalt */ --abstand-aussen: 1rem; /* Höchstbreite der Textspalte: 34 rem sind bei Source Sans 3 rund 70 Zeichen pro Zeile (verwendet in grundlagen.css bei main) */ --textspalte-breite: 34rem; /* Wo das Gerät mehr Platz braucht (Kamera-Aussparung, Home-Balken, abgerundete Ecken), gilt dessen Sicherheitsabstand */ --rand-oben: max(var(--abstand-aussen), env(safe-area-inset-top)); --rand-unten: max(var(--abstand-aussen), env(safe-area-inset-bottom)); /* Höhe der Kopfzeilen-Fläche */ --kopfzeile-hoehe: 3.75rem; /* Gesamtbreite von Kopfzeile, Seitenleiste und Inhalt zusammen: 82 rem sind auf dem Mac rund 1400 Pixel */ --gesamtbreite: 82rem; /* Mindestgröße für Tippflächen (Apple empfiehlt mindestens 44 Punkte; auf iPhone und iPad ist 1 CSS-Pixel genau 1 Punkt). 2,75 rem sind bei Standardgröße rund 47 Pixel. Auf iPhone und iPad richtet sich rem aber nach der iOS-Textgröße: Bei der kleinsten Einstellung wären es nur etwa 38,5 Pixel. max() nimmt den größeren der beiden Werte, also nie weniger als 44 Pixel; bei größerer Textgröße wächst die Tippfläche weiterhin mit. */ --tippflaeche: max(44px, 2.75rem); /* Platz, den die beiden Knöpfe rechts in der Kopfzeile brauchen: zwei Tippflächen, der Abstand dazwischen (0,25 rem), der Rand zur Kante (0,5 rem) und etwas Luft zum Suchfeld (0,5 rem) */ --knopfbereich-breite: calc(2 * var(--tippflaeche) + 0.25rem + 0.5rem + 0.5rem); /* Schwebende Leiste unten (iPhone): - Innenabstand zwischen Kapselrand und Knöpfen - Höhe der Kapsel (Tippfläche plus Innenabstand oben und unten) - Abstand zum unteren Rand: Sicherheitsabstand des Home-Balkens plus etwas Luft */ --leiste-innenabstand: 0.375rem; --leiste-hoehe: calc(var(--tippflaeche) + 2 * var(--leiste-innenabstand)); --leiste-abstand-unten: calc(env(safe-area-inset-bottom) + 0.75rem); /* Rundung der schwebenden Flächen und der Einträge darin */ --radius-schwebend: 1rem; --radius-eintrag: 0.625rem; /* Kapselform: Ein sehr großer Radius macht aus jeder Fläche eine Kapsel (Enden immer halbrund, egal wie hoch die Fläche ist) */ --radius-kapsel: 999rem; /* Schatten schwebender Flächen: eine feine nahe und eine weiche ferne Stufe. Die Farbe kommt aus grundlagen.css (hell leicht und warm, dunkel deutlich kräftiger). */ --schatten-schwebend: 0 1px 2px var(--farbe-schatten), 0 0.25rem 1rem var(--farbe-schatten); /* EBENEN: welche Fläche über welcher liegt (z-index; die höhere Zahl liegt oben). Von unten nach oben: - Inhalt der Seite (ohne eigene Ebene) - runde Fläche beim Herunterziehen, über dem Inhalt (herunterziehen.css) - Kopfzeile und Leiste unten, über dem Inhalt; beide gleich hoch, sie überdecken sich nie - Streifen hinter der Statusleiste des iPhones (Uhrzeit, Akku), über der wegrutschenden Kopfzeile (leisten.css, Abschnitt 2) - Hinweis unter dem Suchfeld: Er steckt in der Kopfzeile und liegt nur dort über den anderen Teilen; die Kopfzeile bildet mit ihrer Ebene einen eigenen, abgeschlossenen Stapel - "Zum Inhalt springen", über allem Die Dialoge (Menü-Schublade, Benutzerbereich, Übersicht "Tastenkürzel") brauchen keinen Wert: Sie sind -Elemente, und der Browser legt sie automatisch in eine eigene oberste Schicht über allem anderen. */ --ebene-herunterziehen: 1; --ebene-kopfzeile: 10; --ebene-leiste: 10; --ebene-statusleiste: 11; --ebene-suchfeld-hinweis: 20; --ebene-zum-inhalt: 100; } /* --------------------------------------------------------------------- 2. "Zum Inhalt springen" Unsichtbar, bis man mit der Tabulatortaste darauf kommt. Dann erscheint er oben links als Bronze-Fläche. Er ist das erste Element der Seite. --------------------------------------------------------------------- */ .zum-inhalt { position: absolute; z-index: var(--ebene-zum-inhalt); inset-block-start: var(--rand-oben); inset-inline-start: max(var(--abstand-aussen), env(safe-area-inset-left)); padding: 0.5rem 1rem; border-radius: var(--radius-eintrag); background-color: var(--farbe-bronze-flaeche); color: var(--farbe-schrift-auf-bronze); font-weight: 600; } /* Solange er keinen Fokus hat: auf einen unsichtbaren Punkt verkleinert (nicht ganz entfernt, damit Bedienungshilfen ihn weiterhin finden) */ .zum-inhalt:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } /* --------------------------------------------------------------------- 3. Kopfzeile (gilt für alle Breiten) Was in allen drei Darstellungen (schmal, mittel, breit) gleich ist, steht nur hier. Die Abschnitte 6 bis 8 legen nur noch fest, was in ihrer Breite anders ist: die Anordnung der Teile. Das Ausblenden beim Scrollen in "schmal" steht in leisten.css. --------------------------------------------------------------------- */ /* Sprungziele (z. B. "Zum Inhalt springen") nicht unter der Kopfzeile verstecken: Der Browser lässt beim Springen oben so viel Platz, wie Kopfzeile, Rand und Abstand zusammen brauchen. Gilt in allen Breiten; "schmal" ergänzt unten noch Platz für die Leiste (Abschnitt 6). */ html { scroll-padding-block-start: calc(var(--rand-oben) + var(--kopfzeile-hoehe) + var(--abstand-aussen)); } /* Die Kopfzeile bleibt in allen Breiten beim Scrollen oben stehen (position: sticky = "an dieser Stelle festkleben"). Den Abstand zum oberen Fensterrand übernimmt sie selbst (padding-block-start); deshalb hat body oben keinen Abstand (grundlagen.css). Der Streifen über der Fläche hat die Hintergrundfarbe, damit der Inhalt beim Scrollen dort nicht durchscheint. Zusätzlich pro Breite: - schmal (leisten.css, Abschnitt 2): gleitet beim Herunterscrollen aus dem Bild - breit (Abschnitt 8): steht im Raster über beiden Spalten, ohne Abstand nach unten (den übernimmt dort das Raster) */ .kopfzeile { position: sticky; inset-block-start: 0; z-index: var(--ebene-kopfzeile); margin-block-end: var(--abstand-aussen); padding-block-start: var(--rand-oben); background-color: var(--farbe-hintergrund); } /* Die schwebende, abgerundete Fläche der Kopfzeile, in allen Breiten gleich hoch (--kopfzeile-hoehe), alle Teile senkrecht mittig. Grundform: Teile nebeneinander (flex), so in "mittel". "schmal" und "breit" machen daraus ein Raster mit eigenen Spalten; "breit" ersetzt außerdem den Innenabstand. */ .kopfzeile-flaeche { box-sizing: border-box; display: flex; align-items: center; block-size: var(--kopfzeile-hoehe); padding: 0 0.5rem; border-radius: var(--radius-schwebend); background-color: var(--farbe-flaeche); box-shadow: var(--schatten-schwebend); } /* Name "Tabularium" (Schrift Marcellus aus .name-tabularium) als Link zur Startseite; in der Haupttextfarbe, ohne Unterstreichung. Unsichtbar vergrößerte Tippfläche: Der Schriftzug selbst ist nur etwa 1,5 rem hoch, zu klein zum bequemen Antippen. Der Link ist deshalb mindestens --tippflaeche hoch; der Text steht darin senkrecht mittig (inline-flex mit align-items: center). Weil der Link in allen drei Darstellungen selbst mittig in der Kopfzeile steht, wächst die Fläche gleichmäßig nach oben und unten: Der Text bleibt an seinem Platz, und die Kopfzeile (feste Höhe --kopfzeile-hoehe) wird nicht höher. */ .kopfzeile-name { display: inline-flex; align-items: center; min-block-size: var(--tippflaeche); font-size: 1.5rem; line-height: 1; color: var(--farbe-text); } .kopfzeile-name:hover { text-decoration: none; } /* Suchfeld mit Lupe; noch ohne Funktion. Gefüllte Kapsel: leicht getönte Feldfläche und rundum ein feiner Rahmen von 1 px, wie bei den Eingabefeldern (schlichte-seite.css). Der Rahmen zeigt, wo das Feld ist (mindestens 3 : 1 zur Feldfläche und zur Umgebung). Der Rahmen ist ein Schatten nach innen (inset), kein echter Rand: So liegt er über der Feldfläche, braucht keinen Platz, und das Feld bleibt so hoch wie die Tippfläche (ein Rand käme zur Höhe des Eingabefelds hinzu). Breite: In der Kopfzeile legen die Abschnitte 7 (MITTEL) und 8 (BREIT) sie fest; auf der Suchseite füllt das Feld die Textspalte. Das Suchfeld der Suchseite sieht genauso aus (ohne Schatten); seine Zusatzklasse suchfeld--seite braucht nur public/js/tastenkuerzel.js, um es zu finden. */ .suchfeld { position: relative; display: flex; align-items: center; gap: 0.5rem; min-block-size: var(--tippflaeche); /* etwas mehr Abstand als bei Eingabefeldern, damit die Lupe nicht zu nah an der Rundung sitzt */ padding-inline: 1rem; border-radius: var(--radius-kapsel); box-shadow: inset 0 0 0 1px var(--farbe-feldrahmen); background-color: var(--farbe-feld); } .suchfeld .symbol { color: var(--farbe-bronze); } /* Bronze-Ring um das ganze Suchfeld, solange darin geschrieben wird (statt des Rings um das Eingabefeld allein). Er ersetzt dann den feinen Rahmen; weil der ein Schatten ist, ändert sich die Höhe nicht. */ .suchfeld:focus-within { outline: 2px solid var(--farbe-bronze); box-shadow: none; } .suchfeld-eingabe { flex: 1; min-inline-size: 0; block-size: var(--tippflaeche); padding: 0; border: 0; background: transparent; color: var(--farbe-text); font: inherit; /* mindestens 16 Pixel, sonst zoomt das iPhone beim Antippen heran (Begründung bei .eingabefeld in schlichte-seite.css) */ font-size: max(16px, 1rem); /* Safaris eigene Gestaltung von Suchfeldern abschalten (sonst übergeht Safari Teile der Gestaltung); das Löschen-Kreuz bleibt erhalten */ -webkit-appearance: none; appearance: none; } .suchfeld-eingabe:focus-visible { outline: none; /* der Ring sitzt am ganzen Suchfeld, siehe oben */ } .suchfeld-eingabe::placeholder { color: var(--farbe-nebentext); opacity: 1; } /* Hinweis unter dem Suchfeld: nur sichtbar, solange das Feld aktiv ist. :focus-within bedeutet "irgendein Element hier drin hat den Fokus" – so geht es ganz ohne JavaScript. */ .suchfeld-hinweis { display: none; position: absolute; z-index: var(--ebene-suchfeld-hinweis); inset-block-start: calc(100% + 0.5rem); inset-inline: 0; margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-eintrag); background-color: var(--farbe-flaeche); box-shadow: var(--schatten-schwebend); color: var(--farbe-nebentext); font-size: 0.9375rem; } .suchfeld:focus-within .suchfeld-hinweis { display: block; } /* Knöpfe rechts (Aktualisieren, Zahnrad für den Benutzerbereich). Dass sie ganz rechts stehen, regeln die Abschnitte 6 bis 8. */ .kopfzeile-knoepfe { display: flex; gap: 0.25rem; } /* Knopf, der nur ein Symbol zeigt. Die Tippfläche ist so groß wie --tippflaeche (mindestens 44 Punkte), auch wenn das Symbol selbst kleiner ist: Ein Finger ist breiter als das Symbol, die unsichtbare Fläche drumherum fängt auch ungenaues Tippen auf. Gilt für alle Symbolknöpfe: Kopfzeile (Zurück, Menü, Aktualisieren, Zahnrad), Leiste unten und die Schließen-Knöpfe (×) der Dialoge (Menü-Schublade, Benutzerbereich, Übersicht "Tastenkürzel"). -webkit-tap-highlight-color schaltet Safaris graue Markierung beim Tippen ab, weil der Knopf eine eigene Rückmeldung hat (unten). Übergänge: - scale (Eindrücken): Zurückfedern erst nach der Mindestdauer (--dauer-tippen-mindestens), damit das Eindrücken auch bei kurzem Tippen sichtbar ist - background-color (Hover): ohne Verzögerung, wie bisher */ .symbolknopf { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--tippflaeche); block-size: var(--tippflaeche); padding: 0; border: 0; border-radius: var(--radius-eintrag); background-color: transparent; color: var(--farbe-bronze); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale var(--dauer-tippen) ease var(--dauer-tippen-mindestens), background-color var(--dauer-hover) ease; } .symbolknopf .symbol { inline-size: 1.5rem; block-size: 1.5rem; } /* Hover nur auf Geräten mit Maus oder Trackpad: Tönungsfarbe */ @media (hover: hover) { .symbolknopf:hover { background-color: var(--farbe-toenung); } } /* Beim Antippen (oder Klicken) drückt sich der Knopf minimal ein: auf 92 Prozent seiner Größe, sofort, ohne Verzögerung. 0.92 statt 0.97 wie bei den Kacheln, weil der Knopf klein ist: So schrumpft er an jeder Seite um knapp 2 Pixel, sonst sähe man es unter dem Finger nicht. "scale" ist eine eigene Angabe neben "transform"; sie kommt deshalb nie mit anderen Bewegungen in Konflikt (z. B. dem Ausblenden der Leiste beim Scrollen, das transform an der Leiste selbst benutzt; siehe leisten.css). Knöpfe mit Bronze-Fläche drücken sich mitsamt Fläche ein; ihre Farben bleiben gleich. Der Fokus-Rahmen wird gleichmäßig mit kleiner. */ .symbolknopf:active { scale: 0.92; transition-delay: 0s; } /* "Bewegung reduzieren": statt Eindrücken kurz die Tönungsfarbe, die ebenfalls erst nach der Mindestdauer zurückblendet. Beim Überfahren mit der Maus erscheint sie wie bisher sofort. Knöpfe mit Bronze-Fläche (Hervorhebung in der Leiste, × der Menü-Schublade in "schmal", Zahnrad im Benutzerbereich) und das × der Übersicht "Tastenkürzel" behalten ihre Fläche: Ihre Regeln sind gleich stark, stehen aber in später geladenen Dateien (dialoge.css, leisten.css) und gewinnen deshalb, genau wie beim Hover. Eine Tönung würde die helle Schrift auf der Bronze-Fläche unlesbar machen. */ @media (prefers-reduced-motion: reduce) { .symbolknopf { transition: background-color var(--dauer-tippen) ease var(--dauer-tippen-mindestens); } @media (hover: hover) { .symbolknopf:hover { transition-delay: 0s; transition-duration: var(--dauer-hover); } } .symbolknopf:active { scale: none; background-color: var(--farbe-toenung); } } /* Menüknopf ganz links: nur in der mittleren Darstellung sichtbar (siehe Abschnitt 7, MITTEL), sonst ausgeblendet */ .kopfzeile-menueknopf { display: none; } /* Zurück-Pfeil ganz links: nur in der Web-App und nur, wenn es eine vorherige Seite gibt. - @media (display-mode: standalone): "Die Seite läuft als eigenständige App ohne Browser-Leisten" (Web-App auf iPhone, iPad und Mac). Der Browser weiß das schon vor dem ersten Zeichnen. - Klasse zurueck-moeglich am html-Element: setzt public/js/seitenwechsel.js ebenfalls vor dem ersten Zeichnen, wenn es eine vorherige Seite gibt. So erscheint der Pfeil sofort an seinem Platz, ohne dass etwas springt. Die Lage in den drei Darstellungen steht in den Abschnitten 6, SCHMAL (freigehaltener Platz links), 7, MITTEL (vor dem Menüknopf; ergibt sich aus der Reihenfolge) und 8, BREIT (über den Menüsymbolen). */ .kopfzeile-zurueck { display: none; } @media (display-mode: standalone) { html.zurueck-moeglich .kopfzeile-zurueck { display: inline-flex; } } /* Aktualisieren-Knopf: enthält den Kreispfeil (Ruhe) und das Ladezeichen. Normalerweise ist der Kreispfeil sichtbar; setzt aktualisieren.js die Klasse "laedt", ist stattdessen das Ladezeichen sichtbar. */ .aktualisieren-ruhe { display: inline-flex; } .aktualisieren-knopf .ladezeichen { display: none; } .aktualisieren-knopf.laedt .aktualisieren-ruhe { display: none; } .aktualisieren-knopf.laedt .ladezeichen { display: inline-flex; } /* --------------------------------------------------------------------- 4. Ladezeichen Zwei Pfeile (Symbol laden), die sich gleichmäßig drehen. Benutzt im Aktualisieren-Knopf und beim Herunterziehen zum Aktualisieren in der Web-App (dort gesteuert von herunterziehen.css). "linear" = immer gleich schnell, "infinite" = ohne Ende. --------------------------------------------------------------------- */ .ladezeichen { display: inline-flex; } @keyframes ladezeichen-drehen { to { transform: rotate(360deg); } } .ladezeichen .symbol { animation: ladezeichen-drehen var(--dauer-ladezeichen-umdrehung) linear infinite; } /* "Bewegung reduzieren": keine Drehung, nur das Symbol */ @media (prefers-reduced-motion: reduce) { .ladezeichen .symbol { animation: none; } } /* --------------------------------------------------------------------- 5. Seitenleiste und Hauptmenü (gilt für alle Breiten) Das Hauptmenü steht auch in der Menü-Schublade (dialoge.css); die Regeln für Menüeinträge hier gelten dort genauso. --------------------------------------------------------------------- */ /* Die schwebende, abgerundete Fläche der Seitenleiste, ohne Rand. Die Fläche der Dialoge (dialoge.css) sieht genauso aus; deshalb gilt diese eine Regel für beide. */ .seitenleiste, .dialog-flaeche { box-sizing: border-box; padding: 0.5rem; border-radius: var(--radius-schwebend); background-color: var(--farbe-flaeche); box-shadow: var(--schatten-schwebend); } .menue, .menue-unterseiten { list-style: none; margin: 0; padding: 0; } /* Etwas Luft zwischen den Hauptbereichen */ .menue-bereich + .menue-bereich { margin-block-start: 0.25rem; } /* Ein Menüeintrag: mindestens --tippflaeche hoch, Symbol und Titel nebeneinander. -webkit-tap-highlight-color schaltet Safaris graue Markierung beim Tippen ab, weil der Eintrag eine eigene Rückmeldung hat (unten). */ .menue-eintrag { display: flex; align-items: center; gap: 0.75rem; min-block-size: var(--tippflaeche); box-sizing: border-box; padding: 0.5rem 0.75rem; border-radius: var(--radius-eintrag); color: var(--farbe-text); line-height: 1.3; -webkit-tap-highlight-color: transparent; /* Rückmeldung beim Tippen: Zurück aus der Tönung erst nach der Mindestdauer, damit sie auch bei kurzem Tippen sichtbar ist (gleiches Muster wie die Eintragsliste in bausteine.css) */ transition: background-color var(--dauer-tippen) ease var(--dauer-tippen-mindestens); } /* Symbole der Hauptbereiche in Bronze */ .menue-eintrag .symbol { color: var(--farbe-bronze); } /* Unterseiten: ohne Symbol, so eingerückt, dass ihr Titel genau unter dem Titel des Hauptbereichs beginnt (Symbolbreite + Abstand) */ .menue-unterseiten .menue-eintrag { padding-inline-start: calc(0.75rem + 1.25em + 0.75rem); } /* Im Menü keine Unterstreichung beim Überfahren (gilt sonst für Links) */ .menue-eintrag:hover { text-decoration: none; } /* Fokus-Ring nach innen, damit er am Rand der Seitenleiste nicht abgeschnitten wird */ .menue-eintrag:focus-visible { outline-offset: -2px; } /* Hover (nicht beim aktuellen Eintrag): Tönungsfarbe, sofort */ @media (hover: hover) { .menue-eintrag:not([aria-current="page"]):hover { background-color: var(--farbe-toenung); transition-delay: 0s; transition-duration: var(--dauer-hover); } } /* Beim Antippen kurz die Tönungsfarbe (sofort, ohne Verzögerung). Nicht beim aktuellen Eintrag: Auf seiner Bronze-Fläche wäre die helle Schrift auf der Tönung unlesbar (wie beim Hover). */ .menue-eintrag:not([aria-current="page"]):active { background-color: var(--farbe-toenung); transition-delay: 0s; } /* Aktueller Eintrag: Bronze-Fläche mit halbfetter Schrift; auch das Symbol nimmt die Schriftfarbe für Bronze-Flächen an */ .menue-eintrag[aria-current="page"] { background-color: var(--farbe-bronze-flaeche); color: var(--farbe-schrift-auf-bronze); font-weight: 600; } .menue-eintrag[aria-current="page"] .symbol { color: inherit; } /* Fokus-Ring auf dem aktuellen Eintrag: Der bronzefarbene Ring wäre auf der Bronze-Fläche unsichtbar (Kontrast hell 1,3 zu 1, dunkel 1 zu 1; nötig sind mindestens 3 zu 1). Deshalb nimmt er hier die Schriftfarbe für Bronze-Flächen an (Kontrast hell 7,5 zu 1, dunkel 8,5 zu 1) und rückt 4 px nach innen. So bleibt außen ein schmaler Streifen Bronze-Fläche, und der Rand des Eintrags sieht aus wie ohne Fokus. */ .menue-eintrag[aria-current="page"]:focus-visible { outline-color: var(--farbe-schrift-auf-bronze); outline-offset: -4px; } /* --------------------------------------------------------------------- 6. SCHMAL: unter 560 Pixeln, und immer bei geringer Höhe mit Fingerbedienung (iPhone quer). Bedingung siehe Kommentar ganz oben. - Kopfzeile: Name genau in der Mitte, rechts Aktualisieren und Einstellungen, links freier Platz (gleich breit) für den Zurück-Pfeil der Web-App. Kein Menüknopf, kein Suchfeld. - Unten Platz für die schwebende Leiste mit Start, Suche und Menü (die Leiste selbst steht in leisten.css, Abschnitt 2). - Keine Seitenleiste; das Menü öffnet sich als Menü-Schublade über der Leiste, in fast voller Breite, mit Griff zum Wegwischen (dialoge.css, Abschnitt 4). - Beim Herunterscrollen gleiten Kopfzeile und Leiste aus dem Bild, beim Hochscrollen kommen sie zurück (leisten.css, Abschnitt 2). --------------------------------------------------------------------- */ @media (width < 560px), ((height <= 500px) and (pointer: coarse)) { /* Sprungziele auch nicht unter der Leiste verstecken (oben gilt der Wert aus Abschnitt 3; deshalb hier nur die Langform für unten) */ html { scroll-padding-block-end: calc(var(--leiste-hoehe) + var(--leiste-abstand-unten) + var(--abstand-aussen)); } /* Unten so viel Abstand, dass auch das Ende der Seite oberhalb der Leiste gelesen werden kann (oben hat body keinen Abstand, siehe Abschnitt 3) */ body { padding-block-end: calc(var(--leiste-hoehe) + var(--leiste-abstand-unten) + var(--abstand-aussen)); } /* Kopfzeile: Kleben oben, Streifen in Hintergrundfarbe, Höhe und Innenabstand siehe Abschnitt 3. Seitlich hält sie über den Rand von body Abstand zur Kamera-Aussparung im Querformat. */ /* Drei Spalten: links frei (gleich breit wie rechts), Name genau in der Mitte, Knöpfe rechts. "1fr auto 1fr" macht die beiden äußeren Spalten gleich breit, deshalb steht der Name genau mittig. */ .kopfzeile-flaeche { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.25rem; } /* Zurück-Pfeil der Web-App im freigehaltenen Platz links (sichtbar nur unter den Bedingungen in Abschnitt 3, Kopfzeile) */ .kopfzeile-zurueck { grid-column: 1; justify-self: start; } .kopfzeile-name { grid-column: 2; font-size: 1.375rem; } .kopfzeile-knoepfe { grid-column: 3; justify-self: end; } /* Kein Suchfeld in der Kopfzeile (Suche über die Leiste unten) */ .kopfzeile .suchfeld { display: none; } /* Keine Seitenleiste; das Menü steckt in der Schublade */ .seitenleiste { display: none; } /* Inhalt mittig (wichtig im Querformat) */ main { margin-inline: auto; } } /* --------------------------------------------------------------------- 7. MITTEL: 560 bis 743 Pixel (Bedingung siehe Kommentar ganz oben) - Kopfzeile: links der Menüknopf (in der Web-App davor ggf. der Zurück-Pfeil), daneben der Name, dann das Suchfeld, das den Platz bis zu den Knöpfen rechts füllt. Sie bleibt beim Scrollen oben stehen (wie in der breiten Darstellung). - Keine Seitenleiste; das Menü öffnet sich als Schublade. - Inhalt mittig. --------------------------------------------------------------------- */ @media (560px <= width < 744px) and ((height > 500px) or (not (pointer: coarse))) { /* Kopfzeile: Kleben oben, Streifen in Hintergrundfarbe, Höhe, Innenabstand und Anordnung nebeneinander (flex) siehe Abschnitt 3. Hier nur der Abstand zwischen den Teilen. */ .kopfzeile-flaeche { gap: 0.5rem; } .kopfzeile-menueknopf { display: inline-flex; } .kopfzeile-name { margin-inline-end: 0.5rem; } /* Suchfeld füllt den Platz zwischen Name und Knöpfen (nur das der Kopfzeile, nicht das auf der Suchseite). Dadurch stehen die Knöpfe ganz rechts. */ .kopfzeile .suchfeld { flex: 1 1 auto; min-inline-size: 0; } /* Keine Seitenleiste; das Menü steckt in der Schublade */ .seitenleiste { display: none; } /* Inhalt mittig */ main { margin-inline: auto; } } /* --------------------------------------------------------------------- 8. BREIT: ab 744 Pixeln (Bedingung siehe Kommentar ganz oben) - Kopfzeile oben über die ganze Breite, Seitenleiste links, Inhalt mittig im freien Raum rechts davon. - Alles zusammen höchstens rund 1400 Pixel breit und waagerecht mittig. - Beim Scrollen bleiben Kopfzeile und Seitenleiste stehen (position: sticky = "an dieser Stelle festkleben"); die Seite selbst scrollt wie gewohnt, sodass Safaris eigene Funktionen (Antippen der Statusleiste, Suchen mit Cmd + F) weiter funktionieren. --------------------------------------------------------------------- */ @media (width >= 744px) and ((height > 500px) or (not (pointer: coarse))) { /* Raster aus zwei Spalten (Seitenleiste, Inhalt) und zwei Zeilen (Kopfzeile, Rest). Oben kein Abstand, den übernimmt die Kopfzeile (Abschnitt 3). */ body { display: grid; grid-template-columns: var(--seitenleiste-breite) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--abstand-aussen); max-inline-size: var(--gesamtbreite); margin-inline: auto; } /* Kopfzeile über beide Spalten (Kleben oben und Streifen in Hintergrundfarbe siehe Abschnitt 3). margin: 0 ersetzt bewusst den Abstand nach unten aus Abschnitt 3: Den Abstand zur Seitenleiste und zum Inhalt übernimmt hier das Raster (gap). */ .kopfzeile { grid-column: 1 / -1; margin: 0; } /* Dieselbe Spaltenaufteilung wie darunter: links so breit wie die Seitenleiste (Name), dann derselbe Abstand, dann der freie Raum (Suchfeld und Knöpfe). Höhe siehe Abschnitt 3. padding: 0 ersetzt bewusst den Innenabstand aus Abschnitt 3: Links und rechts kein Innenabstand, damit die Spalten genau über denen darunter liegen. container-type macht die Fläche zu einem "Container": Das Suchfeld kann so mit der Einheit cqi rechnen (1 cqi = 1 Prozent der Breite dieser Fläche). */ .kopfzeile-flaeche { display: grid; grid-template-columns: var(--seitenleiste-breite) minmax(0, 1fr); column-gap: var(--abstand-aussen); padding: 0; container-type: inline-size; } /* Name links; 1,25 rem eingerückt, so steht er genau über den Symbolen im Menü (0,5 rem Rand der Seitenleiste + 0,75 rem Eintrag) */ .kopfzeile-name { grid-column: 1; grid-row: 1; justify-self: start; margin-inline-start: 1.25rem; } /* Zurück-Pfeil der Web-App (sichtbar nur unter den Bedingungen in Abschnitt 3, Kopfzeile) in derselben Spalte wie der Name, ganz links. Mit 0,5 rem Einzug steht seine Mitte genau über den Symbolen im Menü. */ .kopfzeile-zurueck { grid-column: 1; grid-row: 1; justify-self: start; margin-inline-start: 0.5rem; } /* Ist der Pfeil sichtbar, rückt der Name hinter ihn: 0,5 rem Einzug plus Pfeilbreite = 3,25 rem. Dort beginnen auch die Titel im Menü (0,5 rem Rand + 0,75 rem Eintrag + 1,25 rem Symbol + 0,75 rem Abstand); der Name bleibt also sauber in der Spalte über der Seitenleiste. Das Suchfeld steht in der anderen Spalte und bleibt bündig über der Textspalte. */ @media (display-mode: standalone) { html.zurueck-moeglich .kopfzeile-name { margin-inline-start: calc(0.5rem + var(--tippflaeche)); } } /* Suchfeld bündig über der Textspalte: Es rückt genauso weit ein wie die Textspalte darunter. Dafür rechnet es mit zwei Hilfswerten: - --freier-raum: Breite der rechten Spalte (wie beim Inhalt darunter) - --einzug: so weit ist die Textspalte darunter vom linken Rand des freien Raums eingerückt (sie steht mittig und ist höchstens --textspalte-breite breit). Das Suchfeld rückt genauso weit ein, die linke Kante ist also immer bündig. - Breite: so breit wie die Textspalte, aber höchstens bis kurz vor die Knöpfe. Ist genug Platz, ist auch die rechte Kante bündig; sonst endet das Suchfeld vor den Knöpfen. (Gilt nur für das Suchfeld der Kopfzeile, nicht für das auf der Suchseite.) */ .kopfzeile .suchfeld { --freier-raum: calc(100cqi - var(--seitenleiste-breite) - var(--abstand-aussen)); --einzug: max(0px, (var(--freier-raum) - var(--textspalte-breite)) / 2); grid-column: 2; grid-row: 1; justify-self: start; margin-inline-start: var(--einzug); inline-size: min(var(--textspalte-breite), var(--freier-raum) - var(--einzug) - var(--knopfbereich-breite)); box-sizing: border-box; } /* Knöpfe ganz rechts in derselben Spalte wie das Suchfeld */ .kopfzeile-knoepfe { grid-column: 2; grid-row: 1; justify-self: end; margin-inline-end: 0.5rem; } /* Seitenleiste links, bleibt direkt unter der Kopfzeile stehen. Höchstens so hoch wie der Platz im Fenster; ist das Menü länger, scrollt die Seitenleiste für sich. */ .seitenleiste { grid-column: 1; grid-row: 2; align-self: start; position: sticky; inset-block-start: calc(var(--rand-oben) + var(--kopfzeile-hoehe) + var(--abstand-aussen)); max-block-size: calc(100dvh - var(--rand-oben) - var(--kopfzeile-hoehe) - var(--abstand-aussen) - var(--rand-unten)); overflow-y: auto; /* Scrollen in der Seitenleiste nicht an die Seite weitergeben */ overscroll-behavior: contain; } /* Inhalt mittig im freien Raum rechts der Seitenleiste; die Höchstbreite (--textspalte-breite) setzt grundlagen.css */ main { grid-column: 2; grid-row: 2; justify-self: center; inline-size: 100%; min-inline-size: 0; } }