update

2026-06-05 11:48:55 +02:00
parent ab85cb530f
commit 5152f4f309
7 changed files with 625 additions and 600 deletions
--- a/templates/Format/Cheatsheet.md
+++ b/templates/Format/Cheatsheet.md
@@ -1,123 +1,123 @@
 ```
-CHEATSHEET-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
+CHEATSHEET STYLE LANDSCAPE (HTML/CSS → PDF via WeasyPrint)

 FORMAT
- A4 Querformat (297mm × 210mm)
+- A4 landscape (297mm × 210mm)
 - @page { size: A4 landscape; margin: 0; }
- Padding: 7mm 9mm 18mm 9mm (unten Platz für Footer)
- Position relative für absoluten Footer
+- Padding: 7mm 9mm 18mm 9mm (room for the footer at the bottom)
+- Position relative for the absolute 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)
+- Grid: hero (auto) / main (4 columns) / footer (absolute)
+- Main: 4 equal-width columns, gap 3mm
+- Columns internally: flex-column, gap 3mm
+- 8-12 thematic blocks distributed (2-3 per column)

-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)
+STRUCTURE (in this order)
+1. Hero: logo left (15mm), title + subtitle center, version + date right
+2. Main grid: 8-12 blocks in 4 columns
+3. Footer: colored box with quick commands + tag (absolute, bottom)

-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)
+DIFFERENCES FROM THE PORTRAIT CHEATSHEET
+- 4 columns instead of 3 (more horizontal space)
+- 9-12 blocks instead of 8-10
+- Footer with 4 quick commands instead of 3
+- Smaller font sizes (8pt body instead of 8.5pt)
+- More compact code blocks (6.5pt instead of 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
+BLOCK STRUCTURE
+- Block head: accent-color background, white text, icon left (3.5mm)
+- Block body: white background, thin border, rounded 2mm
+- Content: dense reference, not explanation
+- Variants: reference table, code block, tile 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
+COLORS (max 3 + neutrals)
+- Accent color: lean on the topic's official color
+- Accent dark: darker variant for headings
+- Accent darker: even darker for the footer
+- Accent color for plus/minus: green/red
+- Background soft: light variant of the accent color
+- Code background: #1e2a3a (dark)
+- Text: #1a1a1a / muted #5a6470 / line #d8dde3

-TYPOGRAFIE
+TYPOGRAPHY
 - 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
+- Block head: 8pt bold uppercase, letter-spacing 0.5pt
+- Tables: 7.5pt, keys 7pt monospace
 - Code: 6.5pt monospace, line-height 1.4
- Inline-Code: 7pt monospace, Hauptfarbe
- Max 3 Schriftgrößen pro Block
+- Inline code: 7pt monospace, accent color
+- Max 3 font sizes per block

 ICONS
- SVG inline, stroke statt fill
- 3.5mm in Block-Heads
- 2mm in Tile-Icons (kleiner als Hochformat)
- currentColor für automatische Anpassung
+- SVG inline, stroke instead of fill
+- 3.5mm in block heads
+- 2mm in tile icons (smaller than portrait)
+- currentColor for automatic adaptation

-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)
+BLOCK TYPES (use for variation)
+- Reference table: 2 columns (command/method → meaning)
+- Code block: complete example with syntax highlighting
+- Tile grid: 2x4 with icons (e.g. ecosystem)
+- Directive grid: 2 columns, compact terms + short description
+- Plus/minus split: 2 columns (idiomatic vs avoid)

-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
+TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
+- Accent color: the topic's official color
+- Logo letter(s) or abbreviation
+- Version + as-of date
+- Block selection: the 8-12 most important reference topics
+- Quick commands in the footer: the 4 most important commands

-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
+REQUIRED VISUAL ELEMENTS
+- At least 1 code block (often several in landscape)
+- At least 1 tile grid with icons
+- At least 1 plus/minus split
+- Footer with quick commands
+- Version badge in the 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)
+AVOID
+- Plain bullet lists without structure
+- Explanatory text (belongs in a guide, not a cheatsheet)
+- More than 12 blocks (overcrowded)
+- More than 3 font sizes
+- Vertically very long blocks (unbalanced columns)
+- Floats or absolute positioning (except for the footer)

-GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
-1. HTML schreiben
+GENERATION WITH FEEDBACK LOOP (max 3 iterations)
+1. Write the HTML
 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
+3. PDF to PNG: python -c "from pdf2image import convert_from_path; convert_from_path('file.pdf', dpi=120)[0].save('preview.png')"
+4. View the preview with the Read tool
+5. Check:
+   - Footer does not overlap the content?
+   - 4 columns balanced (similar height)?
+   - All blocks fully visible?
+   - Code blocks not cut off?
+   - Icons render?
+6. On problems: tighten the content or increase padding-bottom, repeat from step 2
+7. Output after max 3 iterations

 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:
+DARK MODE (REQUIRED)
+- Define all colors exclusively via :root variables
+  (--ink, --muted, --line, --bg-soft, accent variables).
+- Additionally ship a dark-mode block:
  @media screen {
-    html[data-theme="dark"] { ...dunkle Variablenwerte... }
+    html[data-theme="dark"] { ...dark variable values... }
    html[data-theme="dark"] body { background: #15171c; }
  }
- Die App aktiviert ihn über data-theme="dark" auf <html>.
-  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.
- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
-  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
+- The app enables it via data-theme="dark" on <html>.
+  Do NOT use prefers-color-scheme.
+- Dark values: dark backgrounds (#15171c / #23262e), light text (#e6e8ee),
+  muted lines (#2c3038). Lift accent colors so headings and links stay
+  readable on a dark background (check contrast). Elements with light text on
+  accent backgrounds (e.g. table headers) may keep their light background
+  color.
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in
+  dark mode (e.g. to var(--bg-soft)); the colored border stays.
+- Only inside @media screen — print/PDF stays light.