116 lines
4.0 KiB
Markdown
116 lines
4.0 KiB
Markdown
```
|
||
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.
|