hacks-guide-minimal-mistakes-theme/assets/_scss/_base.scss

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

body {
  margin: 0;
  padding: 0;
  color: $text-color;
  font-family: $serif;
  line-height: 1.5;
  background-color: $background-color;

  &.overflow--hidden {
    /* when primary navigation is visible, the content in the background won't scroll */
    overflow: hidden;
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  font-family: $sans-serif;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

small {
  font-size: 0.8rem;
}

u,
ins {
  text-decoration: none;
  border-bottom: 1px solid $text-color;
  a {
    color: inherit;
  }
}

del a {
  color: inherit;
}

/* reduce orphans and widows when printing */

p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
  orphans: 3;
  widows: 3;
}

/* abbreviations */

abbr[title],
abbr[data-original-title] {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted $text-color;
}

/* blockquotes */

blockquote {
  margin: 2em 1em 2em 0;
  padding-left: 1em;
  padding-right: 1em;
  font-style: italic;
  border-left: 0.25em solid $accent-color;

  a {
    color: inherit;
  }

  cite {
    font-family: $sans-serif;
    font-size: 14px;
    font-style: normal;

    &:before {
      content: "\2014";
      padding-right: 5px;
    }
  }
}

/* links */

a {
  &:focus {
    @extend %tab-focus;
  }

  &:hover,
  &:active {
    outline: 0;
  }

  &:hover {
    img {
      box-shadow: 0 0 10px rgba(#000, 0.25);
    }
  }
}

/* code */

tt, code, kbd, samp, pre {
  font-family: $monospace;
  font-size: 12px;
}

pre {
  overflow-x: auto; // add scrollbars to wide code blocks
}

p code,
li code,
figcaption code {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  background: $code-background-color;
  border: 1px solid $lighter-gray;
  border-radius: $border-radius;

  &:before, &:after {
    letter-spacing: -0.2em;
    content: "\00a0"; // non-breaking space
  }
}

/* horizontal rule */

hr {
  display: block;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid $border-color;
}

/*
   Media and embeds
   ========================================================================== */

/* Figures and images */

figure {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 2em 0;

  img,
  iframe,
  .fluid-width-video-wrapper {
    margin-bottom: 1em;
  }

  img {
    width: 100%;
    border-radius: $border-radius;
    transition: box-shadow 0.3s;
  }

  > a {
    display: block;
  }

  &.half {
    > a,
    > img {
      @include breakpoint($small) {
        width: calc(50% - 0.5em);
      }
    }

    figcaption {
      width: 100%;
    }
  }

  &.third {
    > a,
    > img {
      @include breakpoint($small) {
        width: calc(33.3333% - 0.5em);
      }
    }

    figcaption {
      width: 100%;
    }
  }
}

/* Figure captions */

figcaption {
  margin-bottom: 0.65rem;
  color: mix(#fff, $text-color, 25%);
  font-family: $sans-serif;
  font-size: 0.8rem;

  a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid $light-gray;
    transition: border 0.4s ease-in-out;

    &:hover {
      color: #000;
      border-bottom-color: #000;
    }
  }

  code {
    font-size: 0.64rem;
  }
}


/* Fix IE9 SVG bug */

svg:not(:root) {
  overflow: hidden;
}


/*
   Navigation lists
   ========================================================================== */

/**
 * Removes margins, padding, and bullet points from navigation lists
 *
 * Example usage:
 * <nav>
 *    <ul>
 *      <li><a href="#link-1">Link 1</a></li>
 *      <li><a href="#link-2">Link 2</a></li>
 *      <li><a href="#link-3">Link 3</a></li>
 *    </ul>
 *  </nav>
 */

nav {
  ul {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }
}

/*
   Global animation transition
   ========================================================================== */

b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
  transition: all 0.2s ease-in-out;
}