124 lines
4.4 KiB
Markdown
124 lines
4.4 KiB
Markdown
```
|
||
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.
|