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: #222
//  height: 100%

// Left-justify bullets
ul, ol
  width: calc(100% - 1em)  // account for 1em left margin
  box-sizing: border-box

// Inverse table headings
th
  color: black
  background: #ccc
  border-color: black

// Citation styling: purple, never bold, smaller in headings
cite
  color: #c0a5c0
  font-weight: normal
  /h2 &
    font-size: 85%
  &.bracket
    &::before
      content: ' ['
      white-space: nowrap
      font-style: normal
    &::after
      content: ']'
      white-space: nowrap
      font-style: normal

// Column formatting:
//   .columns
//     .column = regular column, minimal possible width
//     .column.arrow = rightward arrow
//     .column.space = some blank space
//     .column.fill = column that grows to fill available width
.columns
  width: 100%
  display: flex
  align-items: center
  justify-content: space-evenly
  &.v-top
    align-items: flex-start
.column
  text-align: center !important
  max-height: 100%
  display: flex
  flex-direction: column
  align-items: center
  &.fill
    flex-basis: 0
    flex-grow: 1
    align-self: stretch
  &.space
    width: 30px
  &.arrow
    margin: 0 10px
    font-size: 200%
    &:before
      content: '🡆'

// Bootstrap helpers
.text-center
  text-align: center !important
.vertical-middle
  vertical-align: middle !important
.d-inline-block
  display: inline-block
.justify-content-center
  justify-content: center
.justify-content-between
  justify-content: space-between
.h-100
  height: 100%
.mt-1
  margin-top: 0.25em
.ml-1, span.space
  margin-left: 0.25em
.ml-2
  margin-left: 0.5em
.my-0
  margin-top: 0 !important
  margin-bottom: 0 !important

// Additional helpers
.hidden
  position: absolute
  display: block
.invert
  filter: invert(1) hue-rotate(180deg)
  &.pop
    filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 1px white)
    &.bright
      filter: invert(1) hue-rotate(180deg) brightness(1.75) drop-shadow(0 0 1px white)
.full
  margin: 0
  max-width: 100%
  max-height: 100%
.url
  display: block
  font-size: 40%
  font-family: monospace
.sep
  display: inline-block
  color: #9a5b9a
  margin: 0 0.25em
.frame
  border: solid
  margin: 0 !important
  padding: 0.25em
  &.invert
    border-color: black

// Author stacks
.stack
  display: inline-grid
  cursor: help
  > *
    text-align: left
    grid-row: 1
    grid-column: 1
  > .name
    opacity: 0.666  // new stacking context
    &.a1o2
      animation: fade-1o2 4s infinite linear
    &.a2o2
      animation: fade-2o2 4s infinite linear
  > .semi
    font-size: 0
    color: transparent

// Syntax highlighting
.keyword
  color: yellow

:root
  --fade-min: 0.3
  --fade-max: 1

@keyframes fade-1o2
  0%, 10%, 90%, 100%
    opacity: var(--fade-max)
  40%, 60%
    opacity: var(--fade-min)
@keyframes fade-2o2
  0%, 10%, 90%, 100%
    opacity: var(--fade-min)
  40%, 60%
    opacity: var(--fade-max)