/* ===================================================================== grundlagen.css – Farben, Schriften und Lesbarkeit für tabularium.info --------------------------------------------------------------------- Alle Regeln folgen gestaltung.md. Farben, Schriften und Dauern stehen hier zentral als CSS-Variablen; alle anderen CSS-Dateien benutzen nur diese Variablen und schreiben keine eigenen Farbwerte. Grundregel für Größen: Schriftgrößen und Abstände immer in rem angeben, nur sehr feine Dinge wie Linienstärken in px. "rem" bedeutet "Vielfaches der Grundschrift- größe". So wächst alles gemeinsam mit, wenn auf iPhone oder iPad eine größere Textgröße eingestellt ist. Die Regeln für die nur lokal erreichbaren Prüfseiten /muster und /symbolvergleich stehen nicht hier, sondern in pruefseiten.css. Diese Datei laden nur die beiden Prüfseiten. ===================================================================== */ /* --------------------------------------------------------------------- 1. Schriften Alle Schriftdateien liegen auf unserem eigenen Server (public/schriften), nie auf fremden Servern. Die Pfade sind relativ zu dieser CSS-Datei. font-display: swap bedeutet: Der Text erscheint sofort in einer Ersatzschrift und wechselt zur richtigen Schrift, sobald sie geladen ist. So bleibt Text nie unsichtbar, auch nicht bei langsamer Verbindung. Source Sans 3 und Source Serif 4 sind "variable" Schriften: Eine Datei enthält alle Strichstärken von 200 (sehr dünn) bis 900 (sehr fett). --------------------------------------------------------------------- */ @font-face { font-family: "Source Sans 3"; src: url("../schriften/source-sans-3/SourceSans3-VariableFont_wght.ttf") format("truetype"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../schriften/source-sans-3/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../schriften/source-serif-4/SourceSerif4-VariableFont_opsz,wght.ttf") format("truetype"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../schriften/source-serif-4/SourceSerif4-Italic-VariableFont_opsz,wght.ttf") format("truetype"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "Marcellus"; src: url("../schriften/marcellus/Marcellus-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------- 2. Farben Die Farbpalette enthält jeden Farbwert aus gestaltung.md genau einmal (--hell-… und --dunkel-…). Daraus werden die Variablen gebildet, die überall verwendet werden (--farbe-…). Welche Palette gilt: - Standard: hell - Gerät auf dunkel eingestellt: dunkel - data-erscheinungsbild="hell" oder "dunkel" am html-Element überschreibt die Geräteeinstellung (für die spätere Einstellung "Erscheinungsbild"; ohne Attribut gilt "Automatisch") color-scheme sagt dem Browser, ob hell oder dunkel gilt, damit auch Formularelemente und Bildlaufleisten mitwechseln. --------------------------------------------------------------------- */ :root { /* Farbpalette hell */ --hell-hintergrund: #FAF8F4; --hell-flaeche: #FFFFFF; --hell-text: #2C2822; --hell-nebentext: #686055; --hell-linie: #EBE5DB; --hell-bronze: #7E5C2E; --hell-bronze-flaeche: #6A4C24; --hell-schrift-auf-bronze: #FDFAF3; --hell-toenung: #F4F0E9; --hell-fehler: #9B2C2C; /* Eingabe- und Suchfelder: leicht getönte Feldfläche und feiner Rahmen rundum (der Rahmen hat mindestens 3 : 1 zur Feldfläche und zur Umgebung) */ --hell-feld: #F1ECE3; --hell-feldrahmen: #8F8676; /* Schatten schwebender Flächen: warmes Braun, sehr durchscheinend (die letzte Zahl ist die Deckkraft: 0 = unsichtbar, 1 = voll) */ --hell-schatten: rgb(90 64 28 / 0.10); /* Abdunkeln der Seite hinter den Dialogen (z. B. der Menü-Schublade) */ --hell-abdunkeln: rgb(29 26 22 / 0.30); /* Farbpalette dunkel */ --dunkel-hintergrund: #1D1A16; --dunkel-flaeche: #28241F; --dunkel-text: #EBE4D8; --dunkel-nebentext: #A59C8E; --dunkel-linie: #3C362F; --dunkel-bronze: #D4B07C; --dunkel-bronze-flaeche: #D4B07C; --dunkel-schrift-auf-bronze: #1D1A16; --dunkel-toenung: #2F2A24; --dunkel-fehler: #E08A85; --dunkel-feld: #2F2A24; --dunkel-feldrahmen: #7D7365; /* Im Dunkeln deutlich kräftiger und fast schwarz, sonst wäre der Schatten kaum zu sehen. Zusätzlich hebt sich die Flächenfarbe schon selbst etwas vom Hintergrund ab (kein Rand nötig). */ --dunkel-schatten: rgb(0 0 0 / 0.55); --dunkel-abdunkeln: rgb(0 0 0 / 0.50); /* Standard: hell */ color-scheme: light; --farbe-hintergrund: var(--hell-hintergrund); --farbe-flaeche: var(--hell-flaeche); --farbe-text: var(--hell-text); --farbe-nebentext: var(--hell-nebentext); --farbe-linie: var(--hell-linie); --farbe-bronze: var(--hell-bronze); --farbe-bronze-flaeche: var(--hell-bronze-flaeche); --farbe-schrift-auf-bronze: var(--hell-schrift-auf-bronze); --farbe-toenung: var(--hell-toenung); --farbe-fehler: var(--hell-fehler); --farbe-feld: var(--hell-feld); --farbe-feldrahmen: var(--hell-feldrahmen); --farbe-schatten: var(--hell-schatten); --farbe-abdunkeln: var(--hell-abdunkeln); } /* Gerät auf dunkel eingestellt (außer "hell" ist ausdrücklich gewählt) */ @media (prefers-color-scheme: dark) { :root:not([data-erscheinungsbild="hell"]) { color-scheme: dark; --farbe-hintergrund: var(--dunkel-hintergrund); --farbe-flaeche: var(--dunkel-flaeche); --farbe-text: var(--dunkel-text); --farbe-nebentext: var(--dunkel-nebentext); --farbe-linie: var(--dunkel-linie); --farbe-bronze: var(--dunkel-bronze); --farbe-bronze-flaeche: var(--dunkel-bronze-flaeche); --farbe-schrift-auf-bronze: var(--dunkel-schrift-auf-bronze); --farbe-toenung: var(--dunkel-toenung); --farbe-fehler: var(--dunkel-fehler); --farbe-feld: var(--dunkel-feld); --farbe-feldrahmen: var(--dunkel-feldrahmen); --farbe-schatten: var(--dunkel-schatten); --farbe-abdunkeln: var(--dunkel-abdunkeln); } } /* "Dunkel" ausdrücklich gewählt (gilt unabhängig vom Gerät) */ :root[data-erscheinungsbild="dunkel"] { color-scheme: dark; --farbe-hintergrund: var(--dunkel-hintergrund); --farbe-flaeche: var(--dunkel-flaeche); --farbe-text: var(--dunkel-text); --farbe-nebentext: var(--dunkel-nebentext); --farbe-linie: var(--dunkel-linie); --farbe-bronze: var(--dunkel-bronze); --farbe-bronze-flaeche: var(--dunkel-bronze-flaeche); --farbe-schrift-auf-bronze: var(--dunkel-schrift-auf-bronze); --farbe-toenung: var(--dunkel-toenung); --farbe-fehler: var(--dunkel-fehler); --farbe-feld: var(--dunkel-feld); --farbe-feldrahmen: var(--dunkel-feldrahmen); --farbe-schatten: var(--dunkel-schatten); --farbe-abdunkeln: var(--dunkel-abdunkeln); } /* --------------------------------------------------------------------- 3. Sanfter Hell/Dunkel-Wechsel Mit @property werden die Farbvariablen beim Browser als "Farbe" angemeldet. Dadurch kann er beim Wechsel zwischen hell und dunkel die Variablen selbst überblenden (etwa 500 Millisekunden). Kein Element braucht dafür eine eigene Regel, und spätere Hover-Effekte werden nicht ausgebremst. Ältere Browser wechseln einfach sofort. Die Startwerte (initial-value) wiederholen die hellen Farben, weil @property einen Startwert verlangt. Das ist nur ein Notwert für den Fall, dass eine Variable nicht gesetzt wäre. Weil :root oben alle Farbvariablen immer setzt, wird er nie sichtbar und muss bei Farbänderungen nicht angepasst werden. --------------------------------------------------------------------- */ @property --farbe-hintergrund { syntax: ""; inherits: true; initial-value: #FAF8F4; } @property --farbe-flaeche { syntax: ""; inherits: true; initial-value: #FFFFFF; } @property --farbe-text { syntax: ""; inherits: true; initial-value: #2C2822; } @property --farbe-nebentext { syntax: ""; inherits: true; initial-value: #686055; } @property --farbe-linie { syntax: ""; inherits: true; initial-value: #EBE5DB; } @property --farbe-bronze { syntax: ""; inherits: true; initial-value: #7E5C2E; } @property --farbe-bronze-flaeche { syntax: ""; inherits: true; initial-value: #6A4C24; } @property --farbe-schrift-auf-bronze { syntax: ""; inherits: true; initial-value: #FDFAF3; } @property --farbe-toenung { syntax: ""; inherits: true; initial-value: #F4F0E9; } @property --farbe-fehler { syntax: ""; inherits: true; initial-value: #9B2C2C; } @property --farbe-feld { syntax: ""; inherits: true; initial-value: #F1ECE3; } @property --farbe-feldrahmen { syntax: ""; inherits: true; initial-value: #8F8676; } @property --farbe-schatten { syntax: ""; inherits: true; initial-value: rgb(90 64 28 / 0.10); } @property --farbe-abdunkeln { syntax: ""; inherits: true; initial-value: rgb(29 26 22 / 0.30); } :root { transition-property: --farbe-hintergrund, --farbe-flaeche, --farbe-text, --farbe-nebentext, --farbe-linie, --farbe-bronze, --farbe-bronze-flaeche, --farbe-schrift-auf-bronze, --farbe-toenung, --farbe-fehler, --farbe-feld, --farbe-feldrahmen, --farbe-schatten, --farbe-abdunkeln; transition-duration: var(--dauer-farbwechsel); transition-timing-function: ease; } /* --------------------------------------------------------------------- 4. Animationswerte (aus gestaltung.md, Abschnitt "Animationen") Alle Bewegungen im Portal benutzen diese Werte. Schließen läuft jeweils etwa 20 Prozent schneller als Öffnen. --------------------------------------------------------------------- */ :root { /* Bewegungskurve mit ganz leichtem Nachfedern */ --bewegungskurve: cubic-bezier(.3, 1.25, .5, 1); /* Dieselbe Kurve zeitlich rückwärts, für Bewegungen, die "rückwärts ablaufen" sollen (z. B. Schließen der Schublade) */ --bewegungskurve-rueckwaerts: cubic-bezier(.5, 0, .7, -.25); /* Kleine Bewegungen, z. B. Aufklappen, Medaille, Pfeil */ --dauer-klein: 200ms; --dauer-klein-schliessen: 160ms; /* Große Bewegungen, z. B. Schublade, Seitenwechsel, Meldungen, Leiste */ --dauer-gross: 300ms; --dauer-gross-schliessen: 240ms; /* Hover (Maus oder Trackpad) und Rückmeldung beim Tippen */ --dauer-hover: 150ms; --dauer-tippen: 120ms; --dauer-tippen-mindestens: 150ms; /* Schlichtes Einblenden (bleibt auch bei "Bewegung reduzieren") */ --dauer-einblenden: 150ms; /* Überblenden beim Wechsel zwischen hell und dunkel */ --dauer-farbwechsel: 500ms; /* Ladezeichen: Dauer einer vollen Umdrehung (gleichmäßig) */ --dauer-ladezeichen-umdrehung: 1s; } /* Geräteeinstellung "Bewegung reduzieren": keine Bewegungen mehr. Bauteile verwenden dann statt einer Bewegung schlichtes Einblenden (--dauer-einblenden) oder lassen den Effekt ganz weg. */ @media (prefers-reduced-motion: reduce) { :root { --dauer-klein: 0ms; --dauer-klein-schliessen: 0ms; --dauer-gross: 0ms; --dauer-gross-schliessen: 0ms; } } /* --------------------------------------------------------------------- 5. Schriftfamilien und Grundgröße --------------------------------------------------------------------- */ :root { /* Überschriften: Source Serif 4, sonst New York (ui-serif), Georgia */ --schrift-ueberschrift: "Source Serif 4", ui-serif, Georgia, serif; /* Fließtext, Menü, Tabellen: Source Sans 3, sonst San Francisco */ --schrift-text: "Source Sans 3", system-ui, -apple-system, "Helvetica Neue", sans-serif; /* Name "Tabularium": Marcellus, sonst wie die Überschriften-Ersatzschriften */ --schrift-name: "Marcellus", ui-serif, Georgia, serif; } html { /* Grundgröße 17 Pixel: 106,25 Prozent der Browser-Standardgröße 16 Pixel. Auf dem Mac bleibt es dabei. */ font-size: 106.25%; /* Verhindert, dass iOS im Querformat die Schrift eigenmächtig vergrößert */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Hintergrund auch hinter dem Seitenrand (z. B. beim Hinausziehen) */ background-color: var(--farbe-hintergrund); } /* Dynamic Type: Auf iPhone und iPad soll zusätzlich die Textgröße aus den iOS-Einstellungen wirken (Einstellungen > Anzeige & Helligkeit > Textgröße, bzw. Bedienungshilfen). So funktioniert es: - "font: -apple-system-body" ist eine Apple-Schriftangabe. Sie liefert genau die in iOS eingestellte Textgröße (bei Standardeinstellung 17 Pixel). Damit wird die Grundgröße (1 rem) auf iPhone und iPad zur iOS-Textgröße, und alles in rem wächst mit. - Die Regel gilt nur, wenn der Browser zusätzlich -webkit-touch-callout kennt. Das kennt nur Safari auf iPhone und iPad, nicht Safari auf dem Mac. So bleibt der Mac bei 17 Pixeln. - Weil diese Angabe auch die Schriftfamilie setzt, legt body unten die Schriftfamilie und den Zeilenabstand ausdrücklich wieder fest. */ @supports (font: -apple-system-body) and (-webkit-touch-callout: none) { html { font: -apple-system-body; } } /* --------------------------------------------------------------------- 6. Lesbarkeit und Grundregeln Der Seitenaufbau (Kopfzeile, Seitenleiste, Inhaltsbereich) steht in aufbau.css; hier nur Grundabstände und Textregeln. --------------------------------------------------------------------- */ body { margin: 0; /* Grundabstand 1 rem; wo das Gerät mehr braucht (Kamera-Aussparung, Home-Balken), gilt dessen Sicherheitsabstand. Oben kein Abstand: Den übernimmt die Kopfzeile, die oben klebt und selbst Abstand zum Fensterrand hält (aufbau.css, Abschnitt 3). */ padding: 0 max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background-color: var(--farbe-hintergrund); color: var(--farbe-text); font-family: var(--schrift-text); font-size: 1rem; line-height: 1.5; /* Linksbündiger Flattersatz, kein Blocksatz */ text-align: left; /* Automatische Silbentrennung nach deutschen Regeln (Seite ist lang="de") */ -webkit-hyphens: auto; hyphens: auto; } /* Textbreite begrenzen: rund 70 Zeichen pro Zeile. Der Wert --textspalte-breite steht bei den gemeinsamen Maßen oben in aufbau.css, weil auch die Kopfzeile ihn braucht (Suchfeld bündig über der Textspalte). container-type macht den Inhaltsbereich zu einem "Container": Bauteile darin können sich mit @container nach seiner tatsächlichen Breite richten statt nach der Fensterbreite (wichtig, weil die Seitenleiste Platz nimmt). */ main { max-inline-size: var(--textspalte-breite); container-type: inline-size; } /* Fokus-Markierung: Wer mit der Tastatur (Tabulatortaste) bedient, sieht einen deutlichen Bronze-Ring um das gerade gewählte Element. :focus-visible zeigt ihn nur bei Tastaturbedienung, nicht beim Tippen oder Klicken. */ :focus-visible { outline: 2px solid var(--farbe-bronze); outline-offset: 2px; } /* Der Inhaltsbereich bekommt beim Sprung "Zum Inhalt springen" den Fokus, soll dabei aber keinen Ring um die ganze Seite zeigen */ main:focus-visible { outline: none; } /* Überschriften: Source Serif 4, halbfett; die optische Größe passt sich automatisch der Schriftgröße an (feinere Formen bei großen Größen) */ h1, h2, h3 { font-family: var(--schrift-ueberschrift); font-optical-sizing: auto; font-weight: 600; line-height: 1.2; margin: 1.5em 0 0.5em; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; } /* Hervorhebungen halbfett, passend zur halbfetten Schrift auf Bronze-Flächen */ strong, b { font-weight: 600; } /* Links in Bronze; Unterstreichung beim Überfahren nur auf Geräten mit Maus oder Trackpad; Mauszeiger als Hand */ a { color: var(--farbe-bronze); text-decoration: none; cursor: pointer; } @media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 0.15em; } } /* Tabellen: gleich breite (tabellarische) Ziffern, damit Zahlen und Daten sauber untereinander stehen */ table { font-variant-numeric: tabular-nums; border-collapse: collapse; } th, td { text-align: left; padding: 0.25rem 1rem 0.25rem 0; border-bottom: 1px solid var(--farbe-linie); } /* Nur für Bedienungshilfen wie VoiceOver: unsichtbar, aber vorlesbar (z. B. die Überschrift "Startseite"). Das Element wird auf einen unsichtbaren Punkt verkleinert, nicht ganz entfernt. */ .nur-vorlesen { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } /* Name "Tabularium" in Marcellus */ .name-tabularium { font-family: var(--schrift-name); font-weight: 400; } /* --------------------------------------------------------------------- 7. Symbole Symbole kommen aus der Sprite-Datei public/symbole/symbole.svg und werden mit symbol() aus src/symbole.php eingebaut. - Größe in em: Das Symbol ist 1,25-mal so groß wie die Schrift drumherum und wächst mit ihr mit (auch mit der Textgröße auf iPhone und iPad). - Farbe: currentColor, also die Textfarbe des umgebenden Elements. Ein Symbol in einem Bronze-Link ist damit automatisch bronzefarben. - flex-shrink: 0 verhindert, dass ein Symbol in einer engen Zeile zusammengedrückt wird. - vertical-align setzt das Symbol etwas tiefer, sodass es mittig zur Textzeile steht statt auf der Grundlinie der Schrift. --------------------------------------------------------------------- */ .symbol { inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0; fill: currentColor; vertical-align: -0.25em; }