_base.scss

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

html {
  /* sticky footer fix */
  position: relative;
  min-height: 100%;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2em 0 0.5em;
  line-height: 1.2;
  font-family: $header-font-family;
  font-weight: bold;
}

h1 {
  margin-top: 0;
  font-size: $h-size-1;
}

h2 {
  font-size: $h-size-2;
}

h3 {
  font-size: $h-size-3;
}

h4 {
  font-size: $h-size-4;
}

h5 {
  font-size: $h-size-5;
}

h6 {
  font-size: $h-size-6;
}

small,
.small {
  font-size: $type-size-6;
}

p {
  margin-bottom: 1.3em;
}

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 $primary-color;

  cite {
    font-style: italic;

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

/* links */

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

  &:visited {
    color: $link-color-visited;
  }

  &:hover {
    color: $link-color-hover;
    outline: 0;
  }
}

/* buttons */

button:focus {
  @extend %tab-focus;
}

/* code */

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

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

p > code,
a > code,
li > code,
figcaption > code,
td > code {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  font-size: 0.8em;
  background: $code-background-color;
  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;
}

/* lists */

ul li,
ol li {
  margin-bottom: 0.5em;
}

li ul,
li ol {
  margin-top: 0.5em;
}

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

/* Figures and images */

figure {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  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;
    -webkit-transition: $global-transition;
    transition: $global-transition;
  }

  > 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.5em;
  color: $muted-text-color;
  font-family: $caption-font-family;
  font-size: $type-size-6;

  a {
    -webkit-transition: $global-transition;
    transition: $global-transition;

    &:hover {
      color: $link-color-hover;
    }
  }
}

/* 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;
  }

  /* override white-space for nested lists */
  ul li,
  ol li {
    margin-bottom: 0;
  }

  li ul,
  li ol {
    margin-top: 0;
  }
}

/*
   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 {
  -webkit-transition: $global-transition;
  transition: $global-transition;
}