slidev-theme-nearform/styles/layouts.css

NearForm theme for Slidev

:root {
  --nf-primary: #000e38;
  --nf-secondary: #03e5a4;
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
}

.light {
  --slidev-slide-container-background: white;
  --background-color: white;
  --text-color: var(--nf-primary);
}

.dark {
  --slidev-slide-container-background: var(--nf-primary);
  --background-color: var(--nf-primary);
  --text-color: white;
}

.slidev-layout {
  text-align: left !important;
  color: var(--text-color);
  background-color: var(--background-color);

  h1 {
    @apply font-600;
    margin-bottom: 1em !important;

    &:after {
      content: '_';
      color: var(--nf-secondary);
    }
  }

  h1 + p {
    @apply -mt-2 mb-4;
  }

  p + h2,
  ul + h2,
  table + h2 {
    @apply mt-10;
  }

  h1 {
    @apply text-4xl mb-4 -ml-[0.05em];
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-2xl;
  }

  h4 {
    @apply text-xl;
  }

  h5 {
    @apply text-base;
  }

  h6 {
    @apply text-sm pt-1 uppercase tracking-widest font-400 -ml-[0.05em];
  }

  h6:not(.opacity-100) {
    @apply opacity-40;
  }

  li {
    line-height: 1.2;
    margin-bottom: 0.8em;
  }
  li li {
    font-size: 0.8em;
    margin-bottom: 0.2em;
  }

  p {
    line-height: 1.2;
  }
}

.slidev-layout.cover,
.slidev-layout.intro {
  @apply h-full grid;

  h1 {
    color: inherit;
    @apply text-6xl leading-20;
  }
}

.slidev-layout.fact {
  @apply text-center grid h-full;
  h1 {
    @apply text-8xl font-600;
    &:after {
      content: '';
      display: none;
    }
  }
  h1 + p {
    @apply font-600 text-2xl;
  }
}

.slidev-layout.statement {
  @apply text-center grid h-full;

  h1 {
    @apply text-6xl font-600;
  }
}

.slidev-layout.quote {
  @apply grid h-full;

  h1 {
    @apply font-serif;

    &:after {
      content: '';
      display: none;
    }
  }
  h1 + p {
    @apply mt-2;
  }
}

.slidev-layout.section {
  h1 {
    @apply text-6xl font-600 leading-20;
  }
}

:not(pre) > code {
  background: var(--nf-secondary) !important;
  color: var(--nf-primary);
}

:not(pre) > code:before,
:not(pre) > code:after {
  content: '' !important;
}

strong {
  color: var(--nf-secondary);
  font-weight: 900 !important;
}

::marker {
  font-size: 1em;
}

.logo {
  width: 200px !important;
  @apply -ml-5;
}

.logo-bottom {
  width: 200px !important;
  position: absolute;
  bottom: 3em;
  @apply -ml-5;
}

.logo + h1 {
  font-size: 3em !important;
  margin-top: 2em;
  line-height: 3.5rem !important;
}

.authors {
  margin-top: 5em;
}
.authors > div {
  line-height: 1em;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-size: 1.2em !important;
  line-height: 1.2em;
}

.copyright {
  position: absolute;
  font-size: 0.9em;
  bottom: 2em;
}

.middle-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 90%;
}

.big h2 {
  font-size: 3em !important;
  line-height: 1.1em !important;
}

.cover-bg {
  left: 0;
  right: 0;
  top: 0;
  width: 100% !important;
  z-index: -1;
  position: absolute;
  display: block;
}

.huge {
  font-size: 4em !important;
  line-height: 1em !important;
}

.dot {
  width: 100%;
}
.dot h3 {
  font-size: 1em !important;
  font-weight: 900 !important;
}
.dot .desc {
  font-size: 0.9em !important;
}

.two-columns {
  grid-template-columns: 50% 50%;
  display: grid;
}

.one-big-one-small-column {
  grid-template-columns: 60% 40%;
  display: grid;
}