```
CHEATSHEET-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 Querformat (297mm × 210mm)
- @page { size: A4 landscape; margin: 0; }
- Padding: 7mm 9mm 18mm 9mm (unten Platz für Footer)
- Position relative für absoluten Footer
LAYOUT
- Grid: hero (auto) / main (4 Spalten) / footer (absolute)
- Main: 4 Spalten gleich breit, gap 3mm
- Spalten intern: flex-column, gap 3mm
- 8-12 thematische Blöcke verteilt (2-3 pro Spalte)
STRUKTUR (in dieser Reihenfolge)
1. Hero: Logo links (15mm), Titel + Untertitel mittig, Version + Stand rechts
2. Main-Grid: 8-12 Blöcke in 4 Spalten
3. Footer: farbige Box mit Quick-Commands + Tag (absolute, unten)
UNTERSCHIEDE ZU HOCHFORMAT-CHEATSHEET
- 4 Spalten statt 3 (mehr horizontaler Platz)
- 9-12 Blöcke statt 8-10
- Footer mit 4 Quick-Commands statt 3
- Kleinere Schriftgrößen (8pt Body statt 8.5pt)
- Kompaktere Code-Blöcke (6.5pt statt 6.8pt)
BLOCK-AUFBAU
- Block-Head: Hauptfarbe-Hintergrund, weißer Text, Icon links (3.5mm)
- Block-Body: weißer Hintergrund, dünner Rand, abgerundet 2mm
- Inhalt: dichte Referenz, nicht Erklärung
- Varianten: Referenz-Tabelle, Code-Block, Kachel-Grid, Plus/Minus
FARBEN (max 3 + Neutrals)
- Hauptfarbe: an offizielle Farbe des Themas anlehnen
- Hauptfarbe-Dunkel: dunklere Variante für Headings
- Hauptfarbe-Darker: noch dunkler für Footer
- Akzentfarbe für Plus/Minus: grün/rot
- Hintergrund-Soft: helle Variante der Hauptfarbe
- Code-Hintergrund: #1e2a3a (dunkel)
- Text: #1a1a1a / muted #5a6470 / Linie #d8dde3
TYPOGRAFIE
- Body: 8pt, line-height 1.35
- Hero h1: 18pt bold
- Block-Head: 8pt bold uppercase, letter-spacing 0.5pt
- Tabellen: 7.5pt, Keys 7pt monospace
- Code: 6.5pt monospace, line-height 1.4
- Inline-Code: 7pt monospace, Hauptfarbe
- Max 3 Schriftgrößen pro Block
ICONS
- SVG inline, stroke statt fill
- 3.5mm in Block-Heads
- 2mm in Tile-Icons (kleiner als Hochformat)
- currentColor für automatische Anpassung
BLOCK-TYPEN (für Variation nutzen)
- Referenz-Tabelle: 2-spaltig (Befehl/Methode → Bedeutung)
- Code-Block: vollständiges Beispiel mit Syntax-Highlighting
- Kachel-Grid: 2x4 mit Icons (z.B. Ökosystem)
- Direktiven-Grid: 2-spaltig kompakte Begriffe + Kurzbeschreibung
- Plus/Minus-Split: 2-spaltig (idiomatisch vs vermeiden)
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
- Hauptfarbe: offizielle Farbe des Themas
- Logo-Buchstabe(n) oder Kürzel
- Version + Stand-Datum
- Block-Auswahl: 8-12 wichtigste Referenz-Themen
- Quick-Commands im Footer: 4 wichtigste Kommandos
VISUELLE ELEMENTE PFLICHT
- Mindestens 1 Code-Block (oft mehrere im Querformat)
- Mindestens 1 Kachel-Grid mit Icons
- Mindestens 1 Plus/Minus-Split
- Footer mit Quick-Commands
- Versionsbadge in Hero
VERMEIDEN
- Reine Bullet-Listen ohne Struktur
- Erklärtext (gehört in Guide, nicht Cheatsheet)
- Mehr als 12 Blöcke (überfüllt)
- Mehr als 3 Schriftgrößen
- Vertikal sehr lange Blöcke (Spalten unbalanciert)
- Floats oder absolute positioning (außer für Footer)
GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
1. HTML schreiben
2. weasyprint file.html file.pdf
3. PDF zu PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
4. Preview ansehen mit Read-Tool
5. Prüfen:
- Footer überlappt nicht mit Inhalt?
- 4 Spalten balanciert (ähnliche Höhe)?
- Alle Blöcke vollständig sichtbar?
- Code-Blöcke nicht abgeschnitten?
- Icons rendern?
6. Bei Problemen: Inhalt straffen oder padding-bottom erhöhen, ab Schritt 2 wiederholen
7. Nach max 3 Iterationen ausgeben
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
```
DARKMODE (PFLICHT)
- Alle Farben ausschließlich über :root-Variablen definieren
(--ink, --muted, --line, --bg-soft, Akzent-Variablen).
- Zusätzlich einen Dunkelmodus-Block ausliefern:
@media screen {
html[data-theme="dark"] { ...dunkle Variablenwerte... }
html[data-theme="dark"] body { background: #15171c; }
}
- Die App aktiviert ihn über data-theme="dark" auf .
KEIN prefers-color-scheme verwenden.
- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
Hintergrundfarbe behalten.
- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.