Alle Komponenten, aus drei gehosteten CSS-Dateien.
Diese Seite lädt ausschließlich tokens.css, base.css und layout.css von design.mgm-tp.com. Sichtbare Abweichung heißt: Fehler im Design System, nicht in der Seite.
H1 – 2.5rem / 3.0rem / 900
H2 – 1.8rem / 2.0rem / 900
H3 – 1.5rem / 1.75rem / 900
H4 – 1.35rem / 1.6rem / 900
Subheadline – 1.25rem / 1.5rem / 900
Fließtext – 1.0rem / 1.4rem / 400. Gewicht kommt ausschließlich über font-weight, nie über font-variation-settings.
40 / 60 Grid mit Bulletliste
Der Lead-Text steht in 700, die Liste darunter hat quadratische Bullets und Trennlinien.
- Bullets sind 5×5px und niemals rund
- Erstes Item bekommt zusätzlich border-top
- Trennlinien in Gray 2 (#E0E3E7)
Dreispaltiges Kartenraster auf Gray 3
Custom Properties
Farben, Typo-Skala, Abstände an genau einer Stelle.
Schrift & Buttons
Roboto Variable, drei Button-Varianten, Pfeil-Animation.
Sektionen
Seitengerüst, Navigation, alle Sektionstypen, Footer.
CORS gesetzt
Ohne ACAO-Header blockt Firefox die Webfont.
14 Hintergründe
Petrol und Marine mit je 6 Varianten.
Let's Encrypt
Auto-Renewal inkl. nginx-Reload-Hook.
Ein Statement steht kursiv in 1.5rem, Hervorhebungen darin sind 700 und aufrecht – begrenzt auf 860px Breite.
Sticky linke Spalte
Die linke Spalte bleibt beim Scrollen stehen, die rechte läuft durch.
Nummern in Akzentfarbe
Die Nummer nutzt --color-accent, der Titel bleibt weiß.
Haarlinien als Trenner
rgba(255,255,255,0.15), letztes Item ohne Linie.
Erstes Item ohne padding-top
Damit die Oberkante mit der linken Spalte fluchtet.
Schritte nebeneinander
Kreis in Akzentfarbe, Verbindungslinie in Gray 2, letzter Schritt ohne Linie.
Vhost
nginx-Serverblock für die Subdomain.
TLS
Zertifikat plus automatische Erneuerung.
Assets
Font, Logos, Favicon, Chroma-Bilder.
CSS
tokens, base und layout ausgeliefert.
Chroma-Hintergrund mit hellem Button
Der Primär-A-Button bekommt auf Bild eine weiße Outline und darf niemals auf volle Breite gestreckt werden.
Hinweistext in 0.875rem unter dem Button.