guides/templates/Format/Cheatsheet.md at 5152f4f309d8ba5e52cb9262c90adc92274d0397

Files

team3 5152f4f309 update

2026-06-05 11:48:55 +02:00

4.4 KiB

Raw Blame History

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 <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.

4.4 KiB Raw Blame History Unescape Escape

4.4 KiB

Raw Blame History