| 1 | # Oh My PPT Layout — Supplementary Reference |
| 2 | |
| 3 | Deep-dive examples: collision-avoidance code comparisons and height-budget walkthroughs. The core rules are in SKILL.md; the named layout patterns and composition techniques are in `catalog.md`. |
| 4 | |
| 5 | ## Collision avoidance — code comparison |
| 6 | |
| 7 | ### Radial / surround layout — grid, not absolute |
| 8 | |
| 9 | ```html |
| 10 | <!-- Risky: cards positioned with absolute/translate --> |
| 11 | <div class="relative"> |
| 12 | <div class="absolute top-0 left-[20%]">Card A</div> |
| 13 | <div class="absolute top-0 right-[20%]">Card B</div> |
| 14 | <div class="absolute bottom-0 left-[20%]">Card C</div> |
| 15 | <div class="absolute bottom-0 right-[20%]">Card D</div> |
| 16 | <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Center</div> |
| 17 | </div> |
| 18 | |
| 19 | <!-- Reliable: explicit grid with cells --> |
| 20 | <div class="grid grid-cols-3 grid-rows-3 gap-4 h-full"> |
| 21 | <div class="col-start-1 row-start-1">Card A</div> |
| 22 | <div class="col-start-3 row-start-1">Card B</div> |
| 23 | <div class="col-start-1 row-start-3">Card C</div> |
| 24 | <div class="col-start-3 row-start-3">Card D</div> |
| 25 | <div class="col-start-2 row-start-2">Center</div> |
| 26 | </div> |
| 27 | ``` |
| 28 | |
| 29 | Grid cells participate in document flow, expand to fit their content, and never overlap. Absolute elements can collide, overflow, or clip when content varies. |
| 30 | |
| 31 | ### Comparison layout — equal-width columns |
| 32 | |
| 33 | ```html |
| 34 | <!-- Risky: left side may push right side out --> |
| 35 | <div class="flex"> |
| 36 | <div class="w-[55%]">Option A content</div> |
| 37 | <div class="w-[45%]">Option B content</div> |
| 38 | </div> |
| 39 | |
| 40 | <!-- Reliable: grid with equal tracks --> |
| 41 | <div class="grid grid-cols-2 gap-6"> |
| 42 | <div>Option A content</div> |
| 43 | <div>Option B content</div> |
| 44 | </div> |
| 45 | ``` |
| 46 | |
| 47 | ### Card with text — avoid deep nesting |
| 48 | |
| 49 | ```html |
| 50 | <!-- Risky: 5 levels deep, easy to miss a closing tag --> |
| 51 | <div class="flex"> |
| 52 | <div class="flex-1"> |
| 53 | <div class="p-4"> |
| 54 | <div class="bg-white rounded-lg"> |
| 55 | <div> |
| 56 | <h3>Title</h3> |
| 57 | <p>Content</p> |
| 58 | </div> |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
| 63 | |
| 64 | <!-- Reliable: 3 levels, same visual result --> |
| 65 | <div class="grid grid-cols-2 gap-4"> |
| 66 | <div class="p-4 bg-white rounded-lg"> |
| 67 | <h3>Title</h3> |
| 68 | <p>Content</p> |
| 69 | </div> |
| 70 | <div class="p-4 bg-white rounded-lg"> |
| 71 | <h3>Title</h3> |
| 72 | <p>Content</p> |
| 73 | </div> |
| 74 | </div> |
| 75 | ``` |
| 76 | |
| 77 | ## Height budget walkthrough |
| 78 | |
| 79 | ### Data-focus slide: title + metrics + chart |
| 80 | |
| 81 | ``` |
| 82 | 900px total height |
| 83 | - p-8 (32px top + 32px bottom) = 64px -> 836px remaining |
| 84 | - Title area (h1 + gap) = 60px -> 776px |
| 85 | - Metric cards row (grid-cols-4) = 100px -> 676px |
| 86 | - Gap = 24px -> 652px |
| 87 | - Chart frame: h-[360px] = 360px -> 292px |
| 88 | - Annotation line = 24px -> 268px (spare) |
| 89 | - Safety reserve = 40px -> 228px spare after reserve |
| 90 | ``` |
| 91 | |
| 92 | Chart height is chosen from the computed chart slot, not from a copied default. If the content slot is large, either size the chart enough to feel dominant or reserve the rest as intentional whitespace plus only the support the content actually needs. Do not cap the chart at a tiny default height and leave an accidental empty band; also do not fill the band with unnecessary cards. |
| 93 | |
| 94 | Do not add a second row of summary cards under this layout. When a data-focus slide already has a chart plus metric row, extra facts need a density-appropriate expression such as in-chart annotations, one concise evidence rail, a compact chip row, or a small table that is included in the budget. |
| 95 | |
| 96 | ### Comparison slide: title + two zones |
| 97 | |
| 98 | ``` |
| 99 | 900px total height |
| 100 | - p-6 (24px top + 24px bottom) = 48px -> 852px remaining |
| 101 | - Title + subtitle = 70px -> 782px |
| 102 | - Gap = 16px -> 766px |
| 103 | - Safety reserve = 32px -> 734px |
| 104 | - Two comparison zones (grid-cols-2) -> each gets 734px height |
| 105 | ``` |
| 106 | |
| 107 | ### Timeline slide: title + horizontal strip |
| 108 | |
| 109 | ``` |
| 110 | 900px total height |
| 111 | - p-6 = 48px -> 852px |
| 112 | - Title = 60px -> 792px |
| 113 | - Gap = 16px -> 776px |
| 114 | - Timeline strip (horizontal) = 120px -> 656px |
| 115 | - Detail cards below = 200px -> 456px (spare) |
| 116 | - Safety reserve = 32px -> 424px spare after reserve |
| 117 | ``` |
| 118 |