96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
```
|
||
ONEPAGER-STIL QUERFORMAT (HTML/CSS → PDF via WeasyPrint)
|
||
|
||
FORMAT
|
||
- A4 Querformat (297mm × 210mm)
|
||
- @page { size: A4 landscape; margin: 0; }
|
||
- Padding: 9mm 11mm 9mm 11mm
|
||
|
||
LAYOUT
|
||
- Grid: hero+stats (auto) / divider / main (1fr, 3 Spalten) / footer (absolute)
|
||
- Stats-Bar in Hero integriert (rechts), spart vertikalen Platz
|
||
- Main: 3 Spalten gleich breit, gap 4mm
|
||
- Spalten intern: flex-column, gap 4mm
|
||
- 6 thematische Blöcke verteilt (2 pro Spalte)
|
||
|
||
STRUKTUR (in dieser Reihenfolge)
|
||
1. Hero: Logo links (22mm), Titel + Untertitel mittig, 4 Stats rechts
|
||
2. Divider: 1.5pt schwarze Linie
|
||
3. Main-Grid: 6 Blöcke in 3 Spalten
|
||
4. Footer: farbige Box mit Kernaussage + Tag (absolute, unten)
|
||
|
||
UNTERSCHIEDE ZU HOCHFORMAT
|
||
- 3 Spalten statt 2 (mehr horizontaler Platz)
|
||
- 6 Blöcke statt 4-5
|
||
- Stats integriert in Hero statt eigene Zeile
|
||
- Kleinere Schriftgrößen (9.5pt Body statt 10pt)
|
||
- Kompaktere Code-Blöcke (7pt statt 7.5pt)
|
||
|
||
BLOCK-AUFBAU
|
||
- Titel: 9.5pt bold uppercase, Icon links, Hauptfarbe-Unterstreichung 2pt
|
||
- Inhalt: visuell, nicht reine Textbullets
|
||
- Varianten: Icon-Liste, Code-Block, Kachel-Grid, Plus/Minus-Spalten, Type-Grid
|
||
|
||
FARBEN (max 3 + Neutrals)
|
||
- Hauptfarbe: an offizielle Farbe des Themas anlehnen
|
||
- Hauptfarbe-Dunkel: für Headings
|
||
- Hauptfarbe-Darker: für Footer
|
||
- Akzentfarbe: kontrastierend
|
||
- Hintergrund-Soft: helle Variante der Hauptfarbe
|
||
- Code-Hintergrund: #1e2a3a
|
||
- Text: #1a1a1a / muted #5a6470 / Linie #e5e5e5
|
||
|
||
TYPOGRAFIE
|
||
- Body: 9.5pt, line-height 1.4
|
||
- Hero h1: 20pt bold
|
||
- Block-Titel: 9.5pt bold uppercase, letter-spacing 0.5pt
|
||
- Stats-Zahl: 14pt bold, Label 6.5pt uppercase
|
||
- Code: 7pt monospace, dunkler Hintergrund
|
||
- Feature-Text: 8.5pt
|
||
- Max 3 Schriftgrößen pro Block
|
||
|
||
ICONS
|
||
- SVG inline, stroke statt fill
|
||
- 4mm in Block-Titeln (kleiner als Hochformat wegen kompakter Layout)
|
||
- 2.8mm in Kachel-Icons
|
||
- currentColor für automatische Anpassung
|
||
|
||
THEMENSPEZIFISCHE ANPASSUNGEN (vor Generierung wählen)
|
||
- Hauptfarbe: offizielle Farbe des Themas
|
||
- Logo-Buchstabe(n) oder Kürzel
|
||
- 4 Stats: themen-relevante Zahlen
|
||
- Block-Auswahl: 6 wichtigste Aspekte für Erstübersicht
|
||
|
||
VISUELLE ELEMENTE PFLICHT
|
||
- Mindestens 1 Code-Block
|
||
- Mindestens 1 Kachel-Grid mit Icons (Ökosystem)
|
||
- Mindestens 1 Plus/Minus-Split (Modern vs Legacy o.ä.)
|
||
- Footer als farbige Box (visueller Anker)
|
||
- Stats-Bar im Hero
|
||
|
||
VERMEIDEN
|
||
- Reine Bullet-Listen in jedem Block
|
||
- Mehr als 6 Hauptblöcke (Querformat hat eh schon mehr Platz)
|
||
- Mehr als 3 Schriftgrößen
|
||
- Marketing-Floskeln in Hero
|
||
- Floats oder absolute positioning (außer für Footer)
|
||
- Vertikal sehr lange Blöcke (würden Spalten unbalanciert machen)
|
||
|
||
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:
|
||
- Stats-Bar überlappt nicht mit Titel?
|
||
- 3 Spalten balanciert (ähnliche Höhe)?
|
||
- Footer nicht abgeschnitten?
|
||
- Code-Block lesbar?
|
||
- Alle Icons rendern?
|
||
6. Bei Problemen: fixen, ab Schritt 2 wiederholen
|
||
7. Nach max 3 Iterationen ausgeben
|
||
|
||
INSTALLATION
|
||
- pip install weasyprint pdf2image
|
||
- apt install poppler-utils
|
||
``` |