style.scss

/*-- scss:defaults --*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

@import url('/fonts/CascadiaCodePL.woff2');

$font-family-sans-serif: "Inter", Helvetica, sans-serif !default;
$font-family-monospace: "Cascadia Code PL", monospace !default;

// $body-bg: hsl(176, 94%, 94%);
$body-bg: white;
$body-color: black;
$headings-color: transparent !default; // because we're texturing them
$link-color: #42affa;

$theme-red: #ff0000b3;
$theme-orange: #cc6600aa;
$theme-yellow: #ff9900aa;
$theme-seafoam: #00aa6699;
$theme-emerald: #0077228f;
$theme-lightblue: #0099ff99;
$theme-darkblue: #0044ffa3;
$theme-indigo: #4422ffaa;
$theme-purple: #6611bbaa;
$theme-pink: #ff0077aa;
$theme-brown: #88440099;
$theme-white: #ffffff;
$theme-black: #050505;

/*-- scss:rules --*/

.boxcol {
  background-color: #000000cc;
  color: white;
  padding: 30px;
}

// noise effect for text
@mixin scratched($baseTurbFreq: 0.005, $turbOctaves: 1, $displaceScale: 5) {
  filter: contrast(200%) url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="filter" x="-10%" y="-10%" width="120%" height="120%">\
        <feTurbulence baseFrequency="#{$baseTurbFreq}" numOctaves="#{$turbOctaves}" result="turbulence" />\
        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="#{$displaceScale}" xChannelSelector="R" yChannelSelector="G"/>\
      </filter>\
    </svg>#filter');
}


h1, h2, h3, h4, h5, h6 {
  // slide headers
  .reveal .text-wash-red & { color: $theme-red }
  .reveal .text-wash-orange & { color: $theme-orange }
  .reveal .text-wash-yellow & { color: $theme-yellow }
  .reveal .text-wash-seafoam & { color: $theme-seafoam }
  .reveal .text-wash-emerald & { color: $theme-emerald }
  .reveal .text-wash-lightblue & { color: $theme-lightblue }
  .reveal .text-wash-darkblue & { color: $theme-darkblue }
  .reveal .text-wash-indigo & { color: $theme-indigo }
  .reveal .text-wash-purple & { color: $theme-purple }
  .reveal .text-wash-pink & { color: $theme-pink }
  .reveal .text-wash-brown & { color: $theme-brown }
  .reveal .text-wash-black & { color: $theme-black }
  .reveal .text-wash-white & { color: $theme-white }

  .reveal .text-lime-cyan & {
    background: linear-gradient(45deg, #00aadd, #66dd00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .reveal .text-orange-gold & {
    background: linear-gradient(45deg, #f37335, #fdc830);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .reveal .text-indigo-pink & {
    background: linear-gradient(45deg, #4a00e0, #ff0099);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .reveal .text-red-brown & {
    background: linear-gradient(45deg, #ed213a, #93291e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .reveal .text-black-white & {
    background: linear-gradient(45deg, #333, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.reveal {
  section {
    h1, h2, h3, h4, h5, h6 {
      // other headers
      &.text-wash-red { color: $theme-red }
      &.text-wash-orange { color: $theme-orange }
      &.text-wash-yellow { color: $theme-yellow }
      &.text-wash-seafoam { color: $theme-seafoam }
      &.text-wash-emerald { color: $theme-emerald }
      &.text-wash-lightblue { color: $theme-lightblue }
      &.text-wash-darkblue { color: $theme-darkblue }
      &.text-wash-indigo { color: $theme-indigo }
      &.text-wash-purple { color: $theme-purple }
      &.text-wash-pink { color: $theme-pink }
      &.text-wash-brown { color: $theme-brown }
      &.text-wash-black { color: $theme-black }
      &.text-wash-white { color: $theme-white }

      &.text-lime-cyan {
        background: linear-gradient(45deg, #00aadd, #66dd00);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      &.text-orange-gold {
        background: linear-gradient(45deg, #f37335, #fdc830);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      &.text-indigo-pink {
        background: linear-gradient(45deg, #4a00e0, #ff0099);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      &.text-red-brown {
        background: linear-gradient(45deg, #ed213a, #93291e);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      &.text-black-white {
        background: linear-gradient(45deg, #333, #ccc);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

    }
  }

  h1, h2, h3, h4, h5, h6 {
    // background-image: url("/images/chalk2.jpg");
    // background-size: 500px;
    @include scratched();
    // color: $theme-white;
  }

  // weird that they're inline-block by default?
  ol, ul {
    display: block;
  }

  // override reveal.js progress colours (naughty!)
  .progress {
    color: transparent !important;

    span {
      background: linear-gradient(45deg, red, gold);
    }
  }

  .slide-menu-button a {
    color: #000000aa;
  }
}

.hl {
  padding-inline: 1rem;
  margin-inline: 1rem; 
  background: #99999966;

  &-purple { background: #6a159e; }
  &-red    { background: #91002655; }
  &-gold   { background: orange; }
}

// source code (probably only looks reasonable on dark tbh

.reveal div.sourceCode.cell-code {
  border: none;
  box-shadow: 0px 25px 85px #33669966;
}

.reveal pre.sourceCode code {
  background: linear-gradient(66deg, #bbeeee, #0088dd);
  padding: 12px 18px;
}