4.0 KiB
4.0 KiB
ONEPAGER STYLE LANDSCAPE (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 landscape (297mm × 210mm)
- @page { size: A4 landscape; margin: 0; }
- Padding: 9mm 11mm 9mm 11mm
LAYOUT
- Grid: hero+stats (auto) / divider / main (1fr, 3 columns) / footer (absolute)
- Stats bar integrated into the hero (right), saves vertical space
- Main: 3 equal-width columns, gap 4mm
- Columns internally: flex-column, gap 4mm
- 6 thematic blocks distributed (2 per column)
STRUCTURE (in this order)
1. Hero: logo left (22mm), title + subtitle center, 4 stats right
2. Divider: 1.5pt black line
3. Main grid: 6 blocks in 3 columns
4. Footer: colored box with key message + tag (absolute, bottom)
DIFFERENCES FROM PORTRAIT
- 3 columns instead of 2 (more horizontal space)
- 6 blocks instead of 4-5
- Stats integrated into the hero instead of their own row
- Smaller font sizes (9.5pt body instead of 10pt)
- More compact code blocks (7pt instead of 7.5pt)
BLOCK STRUCTURE
- Title: 9.5pt bold uppercase, icon left, accent-color underline 2pt
- Content: visual, not plain text bullets
- Variants: icon list, code block, tile grid, plus/minus columns, type grid
COLORS (max 3 + neutrals)
- Accent color: lean on the topic's official color
- Accent dark: for headings
- Accent darker: for the footer
- Accent color: contrasting
- Background soft: light variant of the accent color
- Code background: #1e2a3a
- Text: #1a1a1a / muted #5a6470 / line #e5e5e5
TYPOGRAPHY
- Body: 9.5pt, line-height 1.4
- Hero h1: 20pt bold
- Block title: 9.5pt bold uppercase, letter-spacing 0.5pt
- Stats number: 14pt bold, label 6.5pt uppercase
- Code: 7pt monospace, dark background
- Feature text: 8.5pt
- Max 3 font sizes per block
ICONS
- SVG inline, stroke instead of fill
- 4mm in block titles (smaller than portrait due to compact layout)
- 2.8mm in tile icons
- currentColor for automatic adaptation
TOPIC-SPECIFIC ADJUSTMENTS (choose before generating)
- Accent color: the topic's official color
- Logo letter(s) or abbreviation
- 4 stats: topic-relevant numbers
- Block selection: the 6 most important aspects for a first overview
REQUIRED VISUAL ELEMENTS
- At least 1 code block
- At least 1 tile grid with icons (ecosystem)
- At least 1 plus/minus split (modern vs legacy etc.)
- Footer as a colored box (visual anchor)
- Stats bar in the hero
AVOID
- Plain bullet lists in every block
- More than 6 main blocks (landscape already has more space)
- More than 3 font sizes
- Marketing filler in the hero
- Floats or absolute positioning (except for the footer)
- Vertically very long blocks (would unbalance the columns)
GENERATION WITH FEEDBACK LOOP (max 3 iterations)
1. Write the HTML
2. weasyprint file.html file.pdf
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:
- Stats bar does not overlap the title?
- 3 columns balanced (similar height)?
- Footer not cut off?
- Code block readable?
- All icons render?
6. On problems: fix, repeat from step 2
7. Output after max 3 iterations
INSTALLATION
- pip install weasyprint pdf2image
- apt install poppler-utils
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"] { ...dark variable values... } html[data-theme="dark"] body { background: #15171c; } }
- 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.