```
CHEATSHEET STYLE LANDSCAPE (HTML/CSS → PDF via WeasyPrint)
FORMAT
- A4 landscape (297mm × 210mm)
- @page { size: A4 landscape; margin: 0; }
- Padding: 7mm 9mm 18mm 9mm (room for the footer at the bottom)
- Position relative for the absolute footer
LAYOUT
- 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)
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)
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 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
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
TYPOGRAPHY
- Body: 8pt, line-height 1.35
- Hero h1: 18pt bold
- 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, accent color
- Max 3 font sizes per block
ICONS
- SVG inline, stroke instead of fill
- 3.5mm in block heads
- 2mm in tile icons (smaller than portrait)
- currentColor for automatic adaptation
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)
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
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
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)
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:
- 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
```
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 .
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.