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>
178 lines
3.3 KiB
CSS
178 lines
3.3 KiB
CSS
/*
|
|
* Components and helpers used by the slides. The look (palette, type, panels,
|
|
* motif) is in theme.css; nothing here sets a brand colour directly.
|
|
*/
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* ---- text -------------------------------------------------------------------- */
|
|
|
|
/* A quiet aside under the main point. */
|
|
.reveal .note {
|
|
font-style: italic;
|
|
font-size: 75%;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* Image and quote credits: <!-- .element: class="attribution" --> */
|
|
.reveal .attribution {
|
|
font-size: 45%;
|
|
font-style: italic;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* One big statement on an otherwise empty slide. */
|
|
.reveal .big {
|
|
font-size: 1.9em;
|
|
font-weight: 300;
|
|
line-height: 1.25;
|
|
color: var(--ink-strong);
|
|
}
|
|
|
|
/* A fragment that grows when it appears, for the one thing to look at. It
|
|
grows by font size, not transform, so the text around it makes room. */
|
|
.reveal .pop {
|
|
transition: font-size 0.4s ease, color 0.4s ease;
|
|
}
|
|
|
|
.reveal .pop.visible {
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ---- layout ------------------------------------------------------------------ */
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1em;
|
|
}
|
|
|
|
.flex-around {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
gap: 1em;
|
|
}
|
|
|
|
/* Two equal columns: <div class="cols"><div>…</div><div>…</div></div> */
|
|
.cols {
|
|
display: flex;
|
|
gap: 1.2em;
|
|
align-items: center;
|
|
text-align: left;
|
|
}
|
|
|
|
.cols > * {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.no-border {
|
|
background: none !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.reveal img.blur-edges {
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.reveal table.borders td,
|
|
.reveal table.borders th {
|
|
border: 1px solid var(--rule);
|
|
}
|
|
|
|
/* ---- boxes: small labelled cards, e.g. one per AS or per community ----------- */
|
|
|
|
.boxes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
font-size: 70%;
|
|
margin: 0.6em 0;
|
|
}
|
|
|
|
.boxes > div {
|
|
padding: 0.35em 0.8em;
|
|
margin: 0.3em 0.5em;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
background: var(--ground);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.boxes > div.us {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
|
|
color: var(--ink-strong);
|
|
}
|
|
|
|
.boxes > div.ok {
|
|
border-color: #4fd98a;
|
|
}
|
|
|
|
.boxes > div.bad {
|
|
border-color: #ff6b6b;
|
|
}
|
|
|
|
/* ---- BGP bytes, matching the four groups of the /statusz bytes view ---------- */
|
|
|
|
.reveal pre.bytes {
|
|
font-size: 0.5em;
|
|
line-height: 1.9;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
background: rgba(8, 9, 20, 0.65);
|
|
border-radius: 6px;
|
|
padding: 15px 20px;
|
|
box-sizing: border-box;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.bytes span,
|
|
.legend span {
|
|
border-radius: 3px;
|
|
padding: 1px 3px;
|
|
}
|
|
|
|
.bytes .hh,
|
|
.legend .hh { background: #34406e; }
|
|
.bytes .hl,
|
|
.legend .hl { background: #6e3440; }
|
|
.bytes .ha,
|
|
.legend .ha { background: #245c3a; }
|
|
.bytes .ha2 { background: #2f7a4b; }
|
|
.bytes .hn,
|
|
.legend .hn { background: #6b5a1f; }
|
|
|
|
.legend {
|
|
font-size: 50%;
|
|
font-family: var(--r-code-font);
|
|
}
|
|
|
|
.legend span {
|
|
padding: 1px 0.6em;
|
|
margin: 0 0.2em;
|
|
}
|
|
|
|
/* A framed live page on a slide. */
|
|
.reveal iframe.live {
|
|
border: 1px solid var(--rule);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|