uncover.scss

@use 'sass:color';

/*!
 * Marp / Marpit Uncover theme
 *
 * @theme uncover
 * @author Yuki Hattori
 *
 * @auto-scaling true
 * @size 16:9 1280px 720px
 * @size 4:3 960px 720px
 */

@mixin color-scheme($bg: #fdfcff, $text: #202228, $highlight: #009dd5) {
  --color-background: #{$bg};
  --color-background-code: #{color.mix($bg, $text, 95%)};
  --color-background-paginate: #{rgba($text, 0.05)};
  --color-foreground: #{$text};
  --color-highlight: #{$highlight};
  --color-highlight-hover: #{color.mix($text, $highlight, 25%)};
  --color-highlight-heading: #{color.mix(#fff, $highlight, 20%)};
  --color-header: #{rgba($text, 0.4)};
  --color-header-shadow: #{rgba($bg, 0.8)};
}

section {
  background: var(--color-background);
  color: var(--color-foreground);
  display: flex;
  flex-flow: column nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 40px;
  height: 720px;
  justify-content: center;
  letter-spacing: 3px;
  line-height: 1.4;
  padding: 30px 70px;
  position: relative;
  text-align: center;
  width: 1280px;
  word-wrap: break-word;
  z-index: 0;

  &::after {
    align-items: flex-end;
    background: linear-gradient(
      -45deg,
      var(--color-background-paginate) 50%,
      transparent 50%
    );
    background-size: cover;
    color: var(--color-foreground);
    display: flex;
    font-size: 0.6em;
    height: 80px;
    justify-content: flex-end;
    padding: 30px;
    text-align: right;
    text-shadow: 0 0 5px var(--color-background);
    width: 80px;
  }

  @include color-scheme;

  &:where(:not(.invert)) {
    @import '~highlight.js/styles/color-brewer';
  }

  &:where(.invert) {
    @include color-scheme(#202228, #fff, #60d0f0);
    @import '~highlight.js/styles/codepen-embed';
  }

  > *:first-child,
  &[data-header] > :nth-child(2) {
    margin-top: 0;
  }

  > *:last-child,
  &[data-footer] > :nth-last-child(2) {
    margin-bottom: 0;
  }

  p,
  blockquote {
    margin: 0 0 15px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 15px 0 30px;

    strong {
      color: var(--color-highlight-heading);
      font-weight: inherit;
    }

    &::part(auto-scaling) {
      max-height: 660px; // Slide height - padding * 2
    }
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.7em;
  }

  h3 {
    font-size: 1.4em;
    letter-spacing: 2px;
  }

  h4 {
    font-size: 1.2em;
    letter-spacing: 2px;
  }

  h5 {
    font-size: 1em;
    letter-spacing: 1px;
  }

  h6 {
    font-size: 0.8em;
    letter-spacing: 1px;
  }

  header,
  footer {
    color: var(--color-header);
    font-size: 0.45em;
    left: 70px;
    letter-spacing: 1px;
    position: absolute;
    right: 70px;
    text-shadow: 0 1px 0 var(--color-header-shadow);
    z-index: 1;
  }

  header {
    top: 30px;
  }

  footer {
    bottom: 30px;
  }

  a {
    color: var(--color-highlight);
    text-decoration: none;

    &:hover {
      color: var(--color-highlight-hover);
      text-decoration: underline;
    }
  }

  ul,
  ol {
    margin: 0 auto;
    text-align: left;
  }

  > ul,
  > ol {
    margin-bottom: 15px;
  }

  code {
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier,
      monospace;
    letter-spacing: 0;
  }

  & > code,
  *:not(pre) > code {
    background: var(--color-background-code);
    color: var(--color-foreground);
    margin: -0.2em 0.2em 0.2em;
    padding: 0.2em;
  }

  pre {
    --preserve-aspect-ratio: xMidYMid meet;

    filter: drop-shadow(0 4px 4px rgba(#000, 0.2));
    font-size: 70%;
    line-height: 1.15;
    margin: 15px 0 30px;
    text-align: left;

    &::part(auto-scaling) {
      max-height: 570px;
    }
  }

  pre > code {
    background: var(--color-background-code);
    box-sizing: content-box;
    color: var(--color-foreground);
    display: block;
    margin: 0 auto;
    min-width: 456px; // (Slide width - padding * 2) * 40%
    padding: 0.4em 0.6em;
  }

  &[data-size='4:3'] pre > code {
    min-width: 328px;
  }

  table {
    border-collapse: collapse;
    margin: 0 auto 15px;

    > thead,
    > tbody {
      > tr {
        > td,
        > th {
          padding: 0.15em 0.5em;
        }
      }
    }

    > thead > tr {
      > td,
      > th {
        border-bottom: 3px solid currentcolor;
      }
    }

    > tbody > tr:not(:last-child) {
      > td,
      > th {
        border-bottom: 1px solid currentcolor;
      }
    }
  }

  blockquote {
    font-size: 90%;
    line-height: 1.3;
    padding: 0 2em;
    position: relative;
    z-index: 0;

    &::before,
    &::after {
      content: url('./assets/uncover-quote.svg');
      height: auto;
      pointer-events: none;
      position: absolute;
      width: 1em;
      z-index: -1;
    }

    &::before {
      left: 0;
      top: 0;
    }

    &::after {
      bottom: 0;
      right: 0;
      transform: rotate(180deg);
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }

  mark {
    color: var(--color-highlight);
    background: transparent;
  }
}