القائمة
Author slides for Wes's hand-rolled HTML slide engine (the slides/ folder). Use when adding, editing, or restructuring slides. Layouts are automatic via CSS :has() — pick elements, not classes.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | slide-deck |
| description | Author slides for Wes's hand-rolled HTML slide engine (the slides/ folder). Use when adding, editing, or restructuring slides. Layouts are automatic via CSS :has() — pick elements, not classes. |
A hand-rolled HTML slide engine (a customized fork of Google's old html5slides
template) served by Vite. Every slide is one <article>. Layouts are automatic:
CSS :has() selectors in slides/styles.css look at what's inside each article and
choose the layout. You almost never add a layout class — you just put the right
elements in the article and it lays itself out.
slides/)| File | What it is |
|---|---|
index.html | The deck. One <article> per slide, inside <section class="slides layout-regular template-default">. |
styles.css | Engine CSS, theme tokens, and all the :has() auto-layouts. Edit layouts here. |
slides.js | Navigation engine (keys, touch, builds, hash). Rarely touched. |
autoplay.ts | IntersectionObserver that plays/loops <video>s on-screen, pauses them off-screen. |
spanran-wrap.ts | Per-letter title animation. Currently disabled (commented out in index.html). |
images/ fonts/ icons/ | Assets. images/ holds the 3 background textures the theme needs (AU-FG-Texture4-8K.jpg, AU-FG-Texture7-8K.jpg, grunge.png) plus any slide images you add. Put videos in a videos/ folder and reference them from root (/videos/x.mp4). |
cd slides
npm start # Vite dev server on http://localhost:6969
npm run build # builds to docs/
Note: vite.config.js sets base (e.g. /AI-and-JavaScript/) for GitHub Pages —
that's per-talk, update it when you start a new deck. So is <title> in
index.html and name in package.json.
slides.js)#3) — deep-linkable and survives reload.onslideenter / onslideleave attributes run on an article; slideenter /
slideleave DOM events also fire. Use these to trigger demos.<iframe>s are lazy: their src is swapped to about:blank while off-screen.Pick the snippet whose elements match what you want. The CSS detects it automatically —
no layout class needed unless noted. Rule locations are in styles.css.
A lone heading is centered and scaled up to ~200px. (styles.css ~278–283)
<article>
<h1>A big statement</h1>
</article>
Heading followed by p/ul/ol/blockquote/pre → centered with a gap. (styles.css ~265–270)
<article>
<h2>Heading</h2>
<p>Supporting sentence.</p>
</article>
An article whose only child is an <img> or <video> fills the whole slide,
object-fit: contain, padding removed. (styles.css ~214–223)
<article>
<img src="./images/your-image.png" alt="" />
</article>
A heading (or .title) followed by a single image/video → title row on top, media
fills the rest. (styles.css ~231–246)
<article>
<h2>Pose Detection</h2>
<video src="/videos/reps.mp4" autoplay muted loop></video>
</article>
Two columns. Add even for a strict 1fr/1fr split; if a column has a heading the
grid auto-narrows the first column. Text is right-aligned by default. (styles.css ~295–332)
<article>
<div class="side-by-side even">
<div>
<p class="center">CPU — 7008ms</p>
<img src="./images/caption-cpu.png" alt="" class="wide" />
</div>
<div>
<p class="center">WebGPU — 576ms</p>
<img src="./images/caption-webgpu.png" alt="" class="wide" />
</div>
</div>
</article>
Flex row, vertically centered, big gap. Good for "X + Y" comparisons. (styles.css ~285–289)
<article>
<div class="columns">
<div><h2>Web<br/>Dev<br/>Courses</h2></div>
<div>+</div>
<div><img src="..." /></div>
</div>
</article>
Auto-fit grid of items; headings span the full row. (styles.css ~188–207)
<article class="grid">
<h2>Logos</h2>
<img src="..." /> <img src="..." /> <img src="..." />
</article>
Two-column grid of grouped lists; each <strong> renders as a green chip. (styles.css ~375–400)
<article>
<p>Lots of things, grouped.</p>
<ul class="jumble">
<li><strong>Category</strong>
<ul><li>Item</li><li>Item</li></ul>
</li>
</ul>
</article>
img.fit — width/height: 100%, object-fit: contain. Use on images that
should fill their cell. img.wide — width: 100%, auto height..center — centers text (often on a caption <p> above an image).mark — green highlight on inline text. em — emphasis, used inside headings.<p class="reason">Reason #1</p> then an <h1> — the recurring
"Reason #N" divider. .reason is plain <p> styling, just a semantic hook.<p class="sub"> — subtitle line. Plain <p> styling, semantic only.class="build" on a container (usually a <ul>).
On load slides.js (makeBuildLists) hides each child with to-build; each advance
reveals one more (buildNextItem) before moving to the next slide. Non-obvious but very
useful for revealing bullet points one at a time.
<ul class="build">
<li>First reveal</li>
<li>Second reveal</li>
</ul>
style="--display: block" on an <article> overrides the default display: grid
(used on the title slide so the title/subtitle stack normally).style="font-size: 15rem" / style="height: 900px" is normal here. One-off
sizing per slide is the accepted pattern — don't refactor it into classes.<video src="/videos/x.mp4" autoplay muted loop></video>
autoplay.ts observes every <video> and plays + resets it to currentTime = 0 when it
scrolls into view, pausing it when it leaves. Keep all four attributes and put the file in
videos/ (referenced from the site root with a leading /).
styles.css.slides/fonts/ndk/.--paper/--paper-2 are dark, and
--ink/--ink-soft are light foreground colors..overlay is intentionally hidden.<article> closest to what you want from index.html.fit, wide, side-by-side, build, …) or an inline style when the
automatic layout isn't doing what you want.images/ or videos/; videos need autoplay muted loop and a /videos/... src.npm start and arrow through to check it.