update

templates/Format/Cheatsheet.md

@@ -0,0 +1,104 @@
+```
+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
+```