Base styles for thoughtbot's html & css quiz

html-css-quiz-base.scss

// Variables
$body-font-family: "Poppins", sans-serif;
$display-font-family: "Share Tech Mono", monospace;
$action-color: black;
$secondary-color: #e05359;
$base-spacing: 1rem;
$large-spacing: $base-spacing * 2;
$largest-spacing: $base-spacing * 4;
$small-spacing: $base-spacing / 2;
$smallest-spacing: $base-spacing / 4;
$font-size-large: 2rem;
$font-size-medium: 1.125rem;
$font-size-small: 0.85rem;
$font-size-tiny: 0.65rem;
$large-border-radius: 36px;

@mixin scantron-bars {
  background-image: repeating-linear-gradient(
    to bottom, #f7d5d6, #f7d5d6 10px, transparent 0, transparent 30px);
  background-repeat: no-repeat;
  background-size: 30px 100%;
  min-height: 100%;
}

html {
  @include scantron-bars;
}

body {
  color: black;
  font-family: $body-font-family;
  line-height: normal;
}

header {
  background-color: $secondary-color;
  color: darken($secondary-color, 30%);
  font-family: "Share Tech Mono", monospace;
  font-size: $font-size-tiny;
  letter-spacing: 0.5em;
  line-height: $large-spacing;
  text-transform: uppercase;

  svg {
    float: right;
  }
}

h1,
h2 {
  font-family: $display-font-family;
  font-size: $font-size-large;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: $largest-spacing;
}

pre {
  background-color: lighten($secondary-color, 37%);
  border-radius: 2px;
  color: $secondary-color;
  font-size: $font-size-medium;
}

.container {
  margin: 0 auto;
  max-width: 900px;
  padding: $base-spacing $largest-spacing;
}

xmp {
  font-family: $display-font-family;
  margin: 0;
}

aside {
  font-size: $font-size-small;
}

.label-tag,
code {
  font-family: $display-font-family;
  padding: $small-spacing;
}

code {
  background-color: lighten($secondary-color, 15%);
  border-radius: 2px;
}

.label-tag {
  background-color: white;
  border: 2px solid black;
  position: absolute;

  &::before {
    content: "<";
  }

  &::after {
    content: ">";
  }
}

.label-tag-open {
  left: -2px;
  top: -2px;
}

.label-tag-close {
  bottom: -2px;
  right: -2px;
}

.is-hidden {
  display: none;
}

.button,
button {
  background-color: black;
  border: 0;
  border-radius: $large-border-radius;
  color: white;
  display: inline-block;
  line-height: 2rem;
  margin-top: $base-spacing;
  padding: $base-spacing $largest-spacing;
  text-decoration: none;
}

.button-secondary {
  background-color: lighten($secondary-color, 33%);
  color: darken($secondary-color, 8%);
  font-weight: normal;
}

.question-number {
  color: $secondary-color;
  font-family: $display-font-family;
  margin-right: $base-spacing;
  position: absolute;
  right: 0;
  top: 10rem;
  transform: rotate(-90deg);
}