Rayhaan JaufeerallyandClaude Fable 5.1
106edd1df0
Structured like Matt Godbolt's newer talks (hrt-theme.css in what-happens-beneath-accu-2026): reveal.js with no stock theme but a custom dark one, every slide on a rounded panel, IBM Plex Sans and Mono, monokai code with glowing stepped lines, 16:9 with fade transitions, and the content in one Markdown file per section. Made our own: the palette is a handful of variables (with ?accent= presets for comparing), and his ring-and-thread corner motif became a chain of nodes and links, an AS path, which also opens the title slide. A wordmark sits where his decks carry the employer logo. Also: a small `bird` syntax highlighter for router config on slides, a bytes component in the four groups of the /statusz bytes view, columns, boxes, and a `bare` slide class. reveal.js 6 loads from a vendored copy when slides/vendor-reveal.sh has been run (works offline, ignored by git) and from the CDN otherwise. Section files carry a starter outline for the lab that doubles as a tour of the slide types. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Slides
A reveal.js deck structured like Matt Godbolt's newer talks (what-happens-beneath-accu-2026): no stock theme but a custom dark one, every slide on a rounded panel, IBM Plex Sans and Mono, monokai code with glowing stepped lines, 16:9 with fade transitions, and the content in one Markdown file per section.
What is ours: the palette, and the corner motif. His ring-and-thread became a chain of nodes and links, an AS path, which also opens the title slide.
| File | Holds |
|---|---|
theme.css |
the look: palette, type, panels, motif, title slide |
style.css |
components used by slides: columns, boxes, bytes, notes |
index.html |
section list, reveal.js loader and options, bird highlighter |
sections/*.md |
the slides |
Make it yours
Everything brand-like is a variable at the top of theme.css. To compare
accents without editing, open ?accent=green, ?accent=amber or
?accent=magenta (blue is the default); copy the one you like into :root.
The wordmark bottom-left is the <div class="wordmark"> in index.html.
For a full-bleed title image, empty the title <section> and give it
data-background="images/title.png".
Show it
The sections are loaded over HTTP, so open the deck through a server, not as a file:
python3 -m http.server 8000 --directory slides
Then http://localhost:8000. Keys: arrows to move, S speaker view with
notes and a timer, O overview, F fullscreen, B blank the screen.
Offline
slides/vendor-reveal.sh
copies reveal.js into slides/reveal.js/ (ignored by git). The deck uses that
copy when present and the CDN otherwise. Do this before presenting anywhere
with uncertain Wi-Fi. IBM Plex still comes from Google Fonts; without a
network the deck falls back to Helvetica/Arial and the system monospace, so
install IBM Plex on the presenting machine if that matters.
Write slides
Edit the files in sections/; add a section by adding a file and a
<section data-markdown=...> line in index.html.
----- next slide
--- next vertical slide (detail you can skip)
Notes: speaker notes from here to the end of the slide
Apply a class to the element above with <!-- .element: class="..." -->.
| Class | Effect |
|---|---|
fragment |
appears on the next click |
fragment pop |
appears, grows and takes the accent colour |
big |
one large statement on the slide |
note |
quiet italic aside |
attribution |
small credit under an image or quote |
borders |
table with visible borders |
r-stretch |
image or iframe fills the remaining height |
blur-edges |
soft edge for photos |
Blocks: <div class="cols"> two columns, <div class="boxes"> labelled cards
(us, ok, bad), <pre class="bytes"> BGP bytes in the colours of the lab
page. Code fences take a language and optional line steps, e.g.
```bird [1-3|5-9]; bird is a small highlighter defined in index.html.
<!-- .slide: class="bare" --> drops the panel, the motif and the wordmark
for one slide, e.g. a full-bleed image. The title slide does so by itself.
Open http://localhost:8000/?print-pdf in Chrome and print to PDF with background graphics on.