index.styl

// Customize reveal.js font and related features
:root
  --r-main-font: Merriweather, serif
  --r-heading-font: Merriweather, serif
  --r-heading-text-transform: none
  --r-background-color: black  // Full black background
  --r-selection-background-color: #444
// Small-caps heading option
//.reveal
//  h1, h2, h3, h4, h5, h6
//    font-variant: small-caps

// Extend fragment animations to 1 second
.reveal .slides section .fragment
  opacity: 0
  visibility: hidden
  transition: all 1s ease
  will-change: initial
  &.visible
    opacity: 1
    visibility: inherit

// For debugging slide size, uncomment the following:
//.reveal .slides section
//  background: #111

// Formatting tools specific to this presentation
cite
  color: #c0a5c0
table.side-by-side
  table-layout: fixed
  td
    width: 50%
table.compact
  td, th
    padding: 0 0.5em

.invert
  filter: invert(1) hue-rotate(180deg)
.url
  display: block
  font-size: 30%
  font-family: monospace
.sep
  color: #9a5b9a

// Token colors.  Originally based on rainbow palette from
// https://loading.io/color/feature/Rainbow/, but modified for one more color.
.t1
  fill: #e6261f
.t2
  fill: #eb7532
.t3
  fill: #f7d038
.t4
  fill: #a3e048
.t5
  fill: #49da9a
.t6
  fill: #34bbe6
.t7
  fill: #4355db
.t8
  //fill: #d23be7
  fill: #9f3be7
.t9
  fill: #e634d0

// SVG styling
circle  // token
  stroke: black
  stroke-width: 3px
  fill: #aaa
rect  // graph node
  stroke: white
  stroke-width: 3px
  fill: #aaa
line  // graph edge
  stroke: white
  stroke-width: 10px
  stroke-linecap: square
// Glows and drop shadow effects
circle
  filter: drop-shadow(0px 0px 3px #000)
rect
  filter: drop-shadow(0px 0px 4px #bbb)
line
  filter: drop-shadow(0px 0px 4px #bbb)