ferrix/slides/style.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;
}

/* ---- bytes with one part in focus: everything not .on is dimmed --------------- */

.bytes.focus span:not(.on) {
  opacity: 0.22;
}

.bytes.focus span.on {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.9);
}

/* Small two-column explanation under a bytes block. */
.reveal table.decode {
  font-size: 58%;
  margin-top: 10px;
}

.reveal table.decode td:first-child {
  font-family: var(--r-code-font);
  color: var(--accent-soft);
  white-space: nowrap;
}

/* ---- bits of an address: fixed part vs. free part ------------------------------ */

.bits {
  font-family: var(--r-code-font);
  font-size: 80%;
  letter-spacing: 0.02em;
}

.bits .fixed {
  color: var(--ground);
  background: var(--accent);
  border-radius: 4px 0 0 4px;
  padding: 2px 6px;
}

.bits .free {
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 1px 6px;
}

/* ---- diagrams: inline SVG drawn with the theme's colours ------------------------ */

.reveal svg.diagram {
  width: 100%;
  height: auto;
  max-height: 470px;
  display: block;
  margin: 0 auto;
}

.diagram rect,
.diagram ellipse {
  fill: var(--ground);
  stroke: var(--rule);
  stroke-width: 2;
}

.diagram .hot rect {
  stroke: var(--accent);
}

.diagram .fabric rect {
  fill: rgba(var(--accent-rgb), 0.18);
  stroke: var(--accent);
}

.diagram text {
  fill: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 19px;
  text-anchor: middle;
}

.diagram text.small {
  font-size: 14px;
  fill: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

.diagram text.accent {
  fill: var(--accent);
}

.diagram .link {
  stroke: var(--muted);
  stroke-width: 2.5;
  fill: none;
}

.diagram .bgp {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
  fill: none;
}

.diagram .traffic {
  stroke: #4fd98a;
  stroke-width: 4;
  fill: none;
}