| 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 | ## Openers & transitions |
| 12 | |
| 13 | | file | purpose | |
| 14 | |---|---| |
| 15 | | `cover.html` | Deck cover. Kicker + huge title + lede + pill row. | |
| 16 | | `toc.html` | Table of contents. 2×3 grid of numbered cards. | |
| 17 | | `section-divider.html` | Big numbered section break (02 · Theme). | |
| 18 | |
| 19 | ## Text-centric |
| 20 | |
| 21 | | file | purpose | |
| 22 | |---|---| |
| 23 | | `bullets.html` | Classic bullet list with card-wrapped items. | |
| 24 | | `two-column.html` | Concept + example side by side. | |
| 25 | | `three-column.html` | Three equal pillars with icons. | |
| 26 | | `big-quote.html` | Full-bleed pull quote in editorial-serif style. | |
| 27 | |
| 28 | ## Numbers & data |
| 29 | |
| 30 | | file | purpose | |
| 31 | |---|---| |
| 32 | | `stat-highlight.html` | One giant number + subtitle (uses `.counter` animation). | |
| 33 | | `kpi-grid.html` | 4 KPIs in a row with up/down deltas. | |
| 34 | | `table.html` | Data table with hover rows, right-aligned numerics. | |
| 35 | | `chart-bar.html` | Chart.js bar chart, theme-aware colors. | |
| 36 | | `chart-line.html` | Chart.js dual-line chart with filled area. | |
| 37 | | `chart-pie.html` | Chart.js doughnut + takeaways card. | |
| 38 | | `chart-radar.html` | Chart.js radar comparing 2 products on 6 axes. | |
| 39 | |
| 40 | ## Code & terminal |
| 41 | |
| 42 | | file | purpose | |
| 43 | |---|---| |
| 44 | | `code.html` | Syntax-highlighted code via highlight.js (JS example). | |
| 45 | | `diff.html` | Hand-rolled +/- diff view. | |
| 46 | | `terminal.html` | Terminal window mock with traffic-light header. | |
| 47 | |
| 48 | ## Diagrams & flows |
| 49 | |
| 50 | | file | purpose | |
| 51 | |---|---| |
| 52 | | `flow-diagram.html` | 5-node pipeline with arrows and one highlighted node. | |
| 53 | | `arch-diagram.html` | 3-tier architecture grid. | |
| 54 | | `process-steps.html` | 4 numbered steps in cards. | |
| 55 | | `mindmap.html` | Radial mindmap with SVG path-draw animation. | |
| 56 | |
| 57 | ## Plans & comparisons |
| 58 | |
| 59 | | file | purpose | |
| 60 | |---|---| |
| 61 | | `timeline.html` | 5-point horizontal timeline with dots. | |
| 62 | | `roadmap.html` | 4-column NOW / NEXT / LATER / VISION. | |
| 63 | | `gantt.html` | 12-week gantt chart with 5 parallel tracks. | |
| 64 | | `comparison.html` | Before vs After two-panel card. | |
| 65 | | `pros-cons.html` | Pros and cons two-card layout. | |
| 66 | | `todo-checklist.html` | Checklist with checked/unchecked states. | |
| 67 | |
| 68 | ## Visuals |
| 69 | |
| 70 | | file | purpose | |
| 71 | |---|---| |
| 72 | | `image-hero.html` | Full-bleed hero with Ken Burns gradient background. | |
| 73 | | `image-grid.html` | 7-cell bento grid with gradient placeholders. | |
| 74 | |
| 75 | ## Closers |
| 76 | |
| 77 | | file | purpose | |
| 78 | |---|---| |
| 79 | | `cta.html` | Call-to-action with big gradient headline + buttons. | |
| 80 | | `thanks.html` | Final "Thanks" page with confetti burst. | |
| 81 | |
| 82 | ## Picking a layout |
| 83 | |
| 84 | - **Opener**: `cover.html`, often followed by `toc.html`. |
| 85 | - **Section break**: `section-divider.html` before every major section. |
| 86 | - **Core content**: `bullets.html`, `two-column.html`, `three-column.html`. |
| 87 | - **Show numbers**: `stat-highlight.html` (single) or `kpi-grid.html` (4-up). |
| 88 | - **Show plot**: `chart-bar.html` / `chart-line.html` / `chart-pie.html` / `chart-radar.html`. |
| 89 | - **Show a diff or change**: `comparison.html`, `diff.html`, `pros-cons.html`. |
| 90 | - **Show a plan**: `timeline.html`, `roadmap.html`, `gantt.html`, `process-steps.html`. |
| 91 | - **Show architecture**: `arch-diagram.html`, `flow-diagram.html`, `mindmap.html`. |
| 92 | - **Code / demo**: `code.html`, `terminal.html`. |
| 93 | - **Closer**: `cta.html` → `thanks.html`. |
| 94 | |
| 95 | ## Naming / structure conventions |
| 96 | |
| 97 | - Each slide is `<section class="slide" data-title="...">`. |
| 98 | - Header pills: `<p class="kicker">…</p>`, eyebrow: `<p class="eyebrow">…</p>`. |
| 99 | - Titles: `<h1 class="h1">…</h1>` / `<h2 class="h2">…</h2>`. |
| 100 | - Lede: `<p class="lede">…</p>`. |
| 101 | - Cards: `<div class="card">…</div>` (variants: `card-soft`, `card-outline`, `card-accent`). |
| 102 | - Grids: `.grid.g2`, `.grid.g3`, `.grid.g4`. |
| 103 | - Notes: `<div class="notes">…</div>` per slide. |
| 104 |