104 lines
3.6 KiB
Markdown
104 lines
3.6 KiB
Markdown
```
|
||
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
|
||
``` |