Skip to content

Commit ac9a8a1

Browse files
KylinMountainKylinMountain
committed
fix(deck-neon): fill the viewport edge-to-edge with robust per-type layout
- Frame: slides are position:fixed;inset:0 — no letterbox / no fixed card - Type scale uses clamp() so it scales with the viewport - Content wraps in an .inner with an explicit max-width: centered/data slides no longer collapse into a narrow sliver on wide screens; big numbers nowrap; compare uses a capped 2-col grid - Guard against the invalid SVG height="auto" attribute Verified by regenerating the effective-agents deck at 2560px wide: cover, data, compare and closing all fill edge-to-edge with stable layout.
1 parent c3c5df1 commit ac9a8a1

1 file changed

Lines changed: 56 additions & 32 deletions

File tree

‎skills/openkb-deck-neon/SKILL.md‎

Lines changed: 56 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ Exactly one file: `output/decks/<slug>/index.html`.
4444
It must be **self-contained**: NO external `<link rel="stylesheet">`, NO
4545
external `<script src>`, NO remote `<img>`, **and NO web fonts** (no Google
4646
Fonts link — that is an external link and breaks self-containment). All CSS in
47-
one inline `<style>`; the scale-to-fit script (§Frame) and keyboard-nav JS in
48-
one inline `<script>` at end of `<body>`. Use the local font stacks in §Type system — do not reach for Inter,
47+
one inline `<style>`; keyboard-nav JS in one inline `<script>` at end of
48+
`<body>` (no scaling script needed — CSS fills the viewport). Use the local font stacks in §Type system — do not reach for Inter,
4949
Chakra Petch, Orbitron, or any `fonts.googleapis.com` import.
5050

5151
The body is a sequence of `<section class="slide" data-type="...">` blocks;
@@ -92,12 +92,13 @@ Display titles use `--font-display` at weight 800 with `letter-spacing:-.02em`.
9292
The tech character here comes from **mono for every label / number / kicker /
9393
code**, not from a fancy downloaded display face.
9494

95-
Type scale (size / line-height):
96-
* `--type-display`: 64px / 1.05 — cover/chapter big titles
97-
* `--type-title`: 40px / 1.12 — normal slide titles
98-
* `--type-body`: 19px / 1.6 — body copy (color: var(--ink))
99-
* `--type-quote`: 30px / 1.35 — pull quotes
100-
* `--type-label`: 11px / 1.0 / letter-spacing:.22em uppercase mono — tracks
95+
Type scale — use `clamp()` so type scales with the viewport (fixed px look tiny
96+
on a 2560px screen). vw drives the middle value; the rem caps keep it sane:
97+
* `--type-display`: clamp(2.8rem, 5.2vw, 5.5rem) / 1.05 — cover/chapter titles
98+
* `--type-title`: clamp(1.9rem, 3.2vw, 3rem) / 1.12 — normal slide titles
99+
* `--type-body`: clamp(1.05rem, 1.4vw, 1.4rem) / 1.6 — body copy (var(--ink))
100+
* `--type-quote`: clamp(1.6rem, 2.6vw, 2.2rem) / 1.35 — pull quotes
101+
* `--type-label`: clamp(.66rem, .8vw, .8rem) / .22em uppercase mono — tracks
101102

102103
### Atmosphere (fixed background layers on every slide)
103104

@@ -111,24 +112,24 @@ These three layers are what stop the dark background from looking flat/cheap.
111112

112113
### Frame (every slide)
113114

114-
* **Fixed 16:9 stage that scales to fill the viewport.** Author every slide at
115-
a fixed `1280×720` design size (so px-based type sizes stay predictable),
116-
then scale the WHOLE deck to fit the window — never cap it with `max-width`:
115+
* **Every slide fills the entire viewport — edge to edge, no letterbox, no
116+
fixed card.** The slide IS the window; design for a wide canvas and let
117+
flexbox + `clamp()` sizing adapt to any window ratio:
117118
```css
118119
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
119-
#stage{position:fixed;inset:0;display:grid;place-items:center}
120-
.slide{width:1280px;height:720px;transform-origin:center;display:none}
121-
.slide.active{display:flex} /* flex/grid inside as the layout needs */
120+
.slide{position:fixed;inset:0;display:none;flex-direction:column;
121+
justify-content:center;
122+
padding:clamp(40px,5vh,72px) clamp(56px,5vw,128px)}
123+
.slide.active{display:flex}
122124
```
123-
```js
124-
const fit=()=>{const s=Math.min(innerWidth/1280,innerHeight/720);
125-
document.querySelectorAll('.slide').forEach(el=>el.style.transform=`scale(${s})`);};
126-
addEventListener('resize',fit); fit();
127-
```
128-
Result: the deck letterbox-fills ANY window size and fullscreen — never a
129-
small 1280px card stranded in a large viewport. One slide visible at a time;
130-
← / → swap the active slide (they do not scroll).
131-
* Padding: 64px top/bottom, 80px left/right.
125+
No scaling/transform tricks — CSS alone fills the viewport. On an ultrawide
126+
window the slide is simply wider than 16:9; content reflows and the dark
127+
background + aurora bleed to all four edges — never a centered card with dark
128+
side-bands. One slide visible at a time; ← / → swap the active slide, `F`
129+
fullscreen, `P` print (they do not scroll).
130+
* The aurora, dot-grid, top label row and the bottom signature bar all span the
131+
FULL viewport width (they live on `.slide`, which is the whole window). Inner
132+
padding uses the `clamp()` values above so content breathes on any size.
132133
* **Visual signature:** a glowing 3px bar along the bottom edge, gradient
133134
`teal → sky → magenta`, with `box-shadow:0 0 14px` of --teal. This is the
134135
deck's signature — present on every slide.
@@ -148,10 +149,21 @@ These three layers are what stop the dark background from looking flat/cheap.
148149

149150
### Composition rules
150151

151-
* Cover/chapter titles: `max-width:18ch`; never wrap an article onto its own line.
152-
* `data` slides center the big number (`align-items:center; text-align:center`);
153-
all other types stay left-aligned.
154-
* Cover/closing bodies: `max-width:26em`.
152+
* **Wrap each slide's content in one `.inner` block with an EXPLICIT
153+
`max-width`.** This is mandatory under fill-viewport — without it a centered
154+
box sizes to `min-content` and collapses into a narrow sliver on a wide
155+
screen (the #1 bug). Never let a content box use `min-content`/`fit-content`.
156+
* Left-aligned types (cover/chapter/thesis/closing): `.inner{
157+
max-width:min(60ch,62vw); margin-right:auto}` — hugs the left.
158+
* Centered types (`data`, `quote`): `.inner{max-width:min(840px,80vw);
159+
margin:0 auto; text-align:center}`.
160+
* `compare`: `.inner{max-width:min(1100px,88vw); margin:0 auto;
161+
display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,56px)}`
162+
with the glowing teal rule between columns.
163+
* `data` big number: `white-space:nowrap` (so `93.1%` never wraps) at
164+
`clamp(3.5rem,11vh,9rem)`; body beneath stays centered in the SAME `.inner`
165+
as a readable ~3-line paragraph — never a 3-word column.
166+
* Cover/chapter titles never wrap an article ("the"/"an"/"to") onto its own line.
155167
* Maintain contrast: body text is `--ink` on `--bg`. Never set body copy to
156168
`--muted`/`--soft` as its main color — it disappears on dark. (Exception:
157169
a `quote` slide's pull-quote is intentionally `--soft`, and `cover`/`closing`
@@ -203,14 +215,22 @@ Cover/closing have no chapter context → top-left label is "OPENKB".
203215
6. **Wall of text** — slide body >~80 words. Cut or split.
204216
7. **Visual monotony** — 3+ consecutive slides of one `data-type`.
205217
8. **Decorative-only viz** — an SVG/graph that says nothing. If you draw a
206-
graph, its nodes/edges must encode real concepts/links from the KB. In a
207-
16:9 slide prefer a small, exact, hand-placed SVG over a fake "force layout".
218+
graph, its nodes/edges must encode real concepts/links from the KB. On a
219+
single slide prefer a small, exact, hand-placed SVG over a fake "force layout".
208220
9. **Generic titles** — "Introduction"/"Background". Titles carry content.
209221
10. **Definition-grade content** — "X is Y where Y is…" with no named
210222
technique, number, or source quote. Re-read sources (step 3) first.
211-
11. **Fixed-size card** — capping the deck with `max-width` so it sits as a
212-
small 1280px card in a big window. Use the scale-to-fit stage (§Frame) so
213-
it letterbox-fills any viewport and fullscreen.
223+
11. **Letterbox / fixed-size card** — capping the slide with `max-width` or a
224+
fixed `1280×720` box, leaving dark side-bands on a wide window. Slides are
225+
`position:fixed;inset:0` and fill the viewport edge-to-edge (§Frame).
226+
12. **Collapsed content column** — a centered / `data` box sizing to
227+
`min-content` or a tiny `max-width`, squashing text into a narrow sliver on
228+
a wide screen (and breaking big numbers). Wrap content in an `.inner` with
229+
an explicit `max-width` (§Composition); big numbers `white-space:nowrap`.
230+
13. **Invalid SVG sizing** — `height="auto"` written as an SVG *attribute*
231+
(invalid; fires a console error). Give inline SVG a `viewBox` and size it
232+
with CSS (`width:100%;height:auto` in a `style`) or fixed `width`/`height`
233+
attributes — never `height="auto"` as an attribute.
214234

215235
## Self-check (before reporting back)
216236

@@ -222,5 +242,9 @@ Cover/closing have no chapter context → top-left label is "OPENKB".
222242
5. Is body copy in `--ink` (readable on dark) — `quote` pull-quotes and
223243
cover/closing subtitles in `--soft` being the only allowed exceptions — and
224244
is glow limited to titles / big numbers / graph nodes only?
245+
6. Do slides fill the viewport edge-to-edge (`position:fixed;inset:0`, no
246+
`max-width` / fixed `1280px` box, no letterbox side-bands)?
247+
7. Is content wrapped in an `.inner` with an explicit `max-width` — no narrow
248+
sliver / `min-content` collapse, and big numbers `white-space:nowrap`?
225249

226250
If any answer is no, revise and re-run this self-check.

0 commit comments

Comments
 (0)