| 1 | # Layouts catalog |
| 2 | |
| 3 | Every layout lives in `templates/single-page/<name>.html` as a fully |
| 4 | functional standalone page with realistic demo data. Open any file directly |
| 5 | in Chrome to see it working. |
| 6 | |
| 7 | To compose a new deck: open the file, copy the `<section class="slide">…</section>` |
| 8 | block (or multiple blocks) into your deck HTML, and replace the demo data. |
| 9 | Shared CSS (base, theme, animations) is already wired by `deck.html`. |
| 10 | |
| 11 | ## Working with images |
| 12 | |
| 13 | The `image-*` layouts use real `<img>` elements. Framing is done by |
| 14 | `.img-frame` in `assets/base.css`, not by the image, so swapping in your own |
| 15 | photo needs nothing but a new `src`: |
| 16 | |
| 17 | | | | |
| 18 | |---|---| |
| 19 | | `.img-frame` | the frame. Owns the aspect ratio and the crop; `<img>` inside it fills it with `object-fit: cover`. | |
| 20 | | `.img-frame.contain` | letterbox instead of crop. **Use this for screenshots, diagrams and logos** — cropping those loses information. | |
| 21 | | `--img-ratio` | frame aspect ratio, default `16/10`. | |
| 22 | | `--img-pos` | `object-position`, e.g. `top` to keep a headline in frame. | |
| 23 | | `.img-scrim` | bottom gradient so white text stays readable over a photo. | |
| 24 | | `.img-cap` | caption line under the frame. | |
| 25 | | `.img-tag` | small pill in the frame's top-left corner. | |
| 26 | |
| 27 | Demo artwork lives in `assets/demo-images/` — hand-written SVG, ~1 KB each, so |
| 28 | the layouts render offline. Put your own images next to the deck's |
| 29 | `index.html` and reference them relatively (`src="shot.png"`). |
| 30 | |
| 31 | ## Openers & transitions |
| 32 | |
| 33 | | file | purpose | |
| 34 | |---|---| |
| 35 | | `cover.html` | Deck cover. Kicker + huge title + lede + pill row. | |
| 36 | | `toc.html` | Table of contents. 2×3 grid of numbered cards. | |
| 37 | | `section-divider.html` | Big numbered section break (02 · Theme). | |
| 38 | |
| 39 | ## Text-centric |
| 40 | |
| 41 | | file | purpose | |
| 42 | |---|---| |
| 43 | | `bullets.html` | Classic bullet list with card-wrapped items. | |
| 44 | | `two-column.html` | Concept + example side by side. | |
| 45 | | `three-column.html` | Three equal pillars with icons. | |
| 46 | | `big-quote.html` | Full-bleed pull quote in editorial-serif style. | |
| 47 | |
| 48 | ## Numbers & data |
| 49 | |
| 50 | | file | purpose | |
| 51 | |---|---| |
| 52 | | `stat-highlight.html` | One giant number + subtitle (uses `.counter` animation). | |
| 53 | | `kpi-grid.html` | 4 KPIs in a row with up/down deltas. | |
| 54 | | `table.html` | Data table with hover rows, right-aligned numerics. | |
| 55 | | `chart-bar.html` | Chart.js bar chart, theme-aware colors. | |
| 56 | | `chart-line.html` | Chart.js dual-line chart with filled area. | |
| 57 | | `chart-pie.html` | Chart.js doughnut + takeaways card. | |
| 58 | | `chart-radar.html` | Chart.js radar comparing 2 products on 6 axes. | |
| 59 | |
| 60 | ## Code & terminal |
| 61 | |
| 62 | | file | purpose | |
| 63 | |---|---| |
| 64 | | `code.html` | Syntax-highlighted code via highlight.js (JS example). | |
| 65 | | `diff.html` | Hand-rolled +/- diff view. | |
| 66 | | `terminal.html` | Terminal window mock with traffic-light header. | |
| 67 | |
| 68 | ## Diagrams & flows |
| 69 | |
| 70 | | file | purpose | |
| 71 | |---|---| |
| 72 | | `flow-diagram.html` | 5-node pipeline with arrows and one highlighted node. | |
| 73 | | `arch-diagram.html` | 3-tier architecture grid. | |
| 74 | | `process-steps.html` | 4 numbered steps in cards. | |
| 75 | | `mindmap.html` | Radial mindmap with SVG path-draw animation. | |
| 76 | |
| 77 | ## Plans & comparisons |
| 78 | |
| 79 | | file | purpose | |
| 80 | |---|---| |
| 81 | | `timeline.html` | 5-point horizontal timeline with dots. | |
| 82 | | `roadmap.html` | 4-column NOW / NEXT / LATER / VISION. | |
| 83 | | `gantt.html` | 12-week gantt chart with 5 parallel tracks. | |
| 84 | | `comparison.html` | Before vs After two-panel card. | |
| 85 | | `pros-cons.html` | Pros and cons two-card layout. | |
| 86 | | `todo-checklist.html` | Checklist with checked/unchecked states. | |
| 87 | |
| 88 | ## Visuals |
| 89 | |
| 90 | | file | purpose | |
| 91 | |---|---| |
| 92 | | `image-single.html` | **One image, uncropped** (`.img-frame.contain`) + caption. Screenshots, diagrams, charts. | |
| 93 | | `image-full-bleed.html` | **One image filling the slide**, gradient scrim, title over it. Photos. | |
| 94 | | `image-text-split.html` | **One image + text**, 50/50. Add `flip` to `.split` to put the image on the right. | |
| 95 | | `image-gallery.html` | **3–6 images**, uniform grid, one caption each. Mixed source ratios are normalised by the frame. | |
| 96 | | `image-compare.html` | **Two images side by side**, before/after, with labels and a conclusion line. | |
| 97 | | `image-hero.html` | Full-bleed hero with Ken Burns gradient background (no real image). | |
| 98 | | `image-grid.html` | 7-cell bento grid with gradient placeholders (no real image). | |
| 99 | |
| 100 | ## Closers |
| 101 | |
| 102 | | file | purpose | |
| 103 | |---|---| |
| 104 | | `cta.html` | Call-to-action with big gradient headline + buttons. | |
| 105 | | `thanks.html` | Final "Thanks" page with confetti burst. | |
| 106 | |
| 107 | ## Picking a layout |
| 108 | |
| 109 | - **Opener**: `cover.html`, often followed by `toc.html`. |
| 110 | - **Section break**: `section-divider.html` before every major section. |
| 111 | - **Core content**: `bullets.html`, `two-column.html`, `three-column.html`. |
| 112 | - **Show numbers**: `stat-highlight.html` (single) or `kpi-grid.html` (4-up). |
| 113 | - **Show plot**: `chart-bar.html` / `chart-line.html` / `chart-pie.html` / `chart-radar.html`. |
| 114 | - **Show a diff or change**: `comparison.html`, `diff.html`, `pros-cons.html`. |
| 115 | - **Show a plan**: `timeline.html`, `roadmap.html`, `gantt.html`, `process-steps.html`. |
| 116 | - **Show one image**: `image-single.html` for a screenshot/diagram (never cropped), |
| 117 | `image-full-bleed.html` for a photo that should carry the whole slide. |
| 118 | - **Show an image plus an argument**: `image-text-split.html`. |
| 119 | - **Show several images**: `image-gallery.html` (uniform, 3–6), or `image-grid.html` |
| 120 | for an uneven bento arrangement. |
| 121 | - **Show a change**: `image-compare.html` (two shots), `comparison.html` (text). |
| 122 | - **Show architecture**: `arch-diagram.html`, `flow-diagram.html`, `mindmap.html`. |
| 123 | - **Code / demo**: `code.html`, `terminal.html`. |
| 124 | - **Closer**: `cta.html` → `thanks.html`. |
| 125 | |
| 126 | ## Naming / structure conventions |
| 127 | |
| 128 | - Each slide is `<section class="slide" data-title="...">`. |
| 129 | - Header pills: `<p class="kicker">…</p>`, eyebrow: `<p class="eyebrow">…</p>`. |
| 130 | - Titles: `<h1 class="h1">…</h1>` / `<h2 class="h2">…</h2>`. |
| 131 | - Lede: `<p class="lede">…</p>`. |
| 132 | - Cards: `<div class="card">…</div>` (variants: `card-soft`, `card-outline`, `card-accent`). |
| 133 | - Grids: `.grid.g2`, `.grid.g3`, `.grid.g4`. |
| 134 | - Notes: `<div class="notes">…</div>` per slide. |
| 135 |