@mixin serif {
  font-family: 'Alegreya', serif;
}
@mixin sans {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 300;
}
@mixin slab {
  font-family: 'Bitter', serif;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 18px;
}

@mixin clearfix {
  *zoom: 1;

  &:before, &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

a {
  color: #666;
  text-decoration: underline;

  &:hover {
    color: #000;
    background-color: yellow;
  }
}

// grid layout fun
@media screen and (min-width: 80rem) {
  article {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-row-gap: 1rem;

    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;

    > header {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    > nav {
      max-width: 18em;
    }

    > header, > .content {
      max-width: 32rem;
      margin-left: auto;
      margin-right: auto;
    }
  }
}


// generic article styles
$article-vertical-rythm: 1.5;

article {
  @include serif;
  font-size: 1rem;
  line-height: $article-vertical-rythm;
  color: #222;
  margin-top: 1rem;
  margin-bottom: 1rem;
  
  p, ul, ol, pre, blockquote {
    margin-bottom: 1/2 * $article-vertical-rythm * 1rem;
  }
  
  ul, ol {
    ul, ol {
      margin-left: 1rem;
      margin-bottom: 0;
    }
  }
  
  h1, h2, h3, h4 {
    @include slab;
    font-weight: bold;
  }
  
  h1 {
    font-size: 1.8rem;
    line-height: 2 * $article-vertical-rythm * 1rem;
  }
  
  h2 {
    font-size: 1.4rem;
    line-height: 2 * $article-vertical-rythm * 1rem;
  }
  
  h3 {
    font-size: 1.2rem;
    line-height: 2 * $article-vertical-rythm * 1rem;
  }

  h3 {
    font-size: 1rem;
    line-height: $article-vertical-rythm * 1rem;
  }
  
  header {
    h1 {
      margin-bottom: 0.4rem;
    }
    
    @media screen and (max-width: 79.999em) {
      padding: 1rem;

      p {
        max-width: 32em;
      }
    }

    .meta {
      @include sans;
    }
  }
  
  .content {
    @media screen and (max-width: 79.999em) {
      padding: 1rem;
    }
  }
  
  blockquote {
    border-left: 5px solid #eee;
    margin: 0.2em;
    padding: 0 1em;
    
    footer {
      margin-left: 1em;
      color: #444;
    }
  }
}

// nav at the side
nav.sidebar {
  @include sans;
  line-height: $article-vertical-rythm * 1rem;
  
  @media screen and (max-width: 79.999em) {
    padding: 0 1rem;
    
    @media screen and (min-width: 30rem) {
      display: flex;

      section {
        max-width: 50%;

        &:first-child {
          margin-right: 1em;
        }
      }
    }
  }
  
  @media screen and (min-width: 80rem) {
    section + section {
      margin-top: 1rem;
    }
  }

  header {
    .label {
      display: block;
      text-transform: uppercase;
      font-size: 0.8rem;
      line-height: $article-vertical-rythm * 1rem;
    }
    
    .title {
      display: block;
      font-weight: 700;
      line-height: $article-vertical-rythm * 1rem;
      margin-top: -1/3 * $article-vertical-rythm * 1rem;
      margin-bottom: 1/3 * $article-vertical-rythm * 1rem;
    }
  }
  
  ol {
    padding-left: 0;
    list-style-position: inside;
    
    @media screen and (min-width: 80em) {
      list-style-position: outside;
    }
    
    li {
      // disable onum (Oldstyle Figures)
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "sups" 0;
    }
  }
}

// series prev/next
nav.series {
  @include sans;
  display: flex;
  
  > a, > span {
    display: block;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0.4em;
    width: 50%;
    color: #000;
    
    &.is-latest {
      border-color: #eee;
    }
  }
  
  > a {
    text-decoration: none;

    &:hover {
      background-color: #f9f9f9;
      border-color: #ccc;
    }
  }
  
  .pre {
    margin-right: 0.2em;
  }
  
  .next {
    margin-left: .2em;
  }
  
  .label {
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
  }
  
  .is-latest {
    .title {
      font-style: italic;
    }
  }
}

// some good typography choices
.footnote-ref {
  @include sans;
  // disable onum (Oldstyle Figures)
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 0, "sups" 0;
  display: inline-block;
  position: relative;
  margin-top: -0.2em;

  a {
    text-decoration: none;
  }
}

// - - -
// Sidenote fun follow
// - - -

$sidenote-spacing: 0.6em;
$sidenote-color: #666 !default;

$footnote-font-size: 0.8rem;
$footnote-line-height: 2/3 * $article-vertical-rythm * 1rem;

.sidenote {
  // First, disable all this stuff on small devices
  display: none;

  padding-bottom: $sidenote-spacing;

  @include sans;
  font-size: $footnote-font-size;
  line-height: $footnote-line-height;

  color: $sidenote-color;

  .footnote-backref {
    display: none;
  }

  .sidenote-title {
    &:before {
      $rarr: "\2192";
      $nbsp: "\00a0";
      content: "#{$rarr}";
      margin-right: $sidenote-spacing;
      font-weight: bold;
    }
  }

  .sidenote-number {
    margin-right: $sidenote-spacing;
    display: inline-block;
    float: left;
    font-weight: 700;
  }

  p {
    margin-top: 0;
    margin-bottom: 0;

    & + p {
      margin-top: $sidenote-spacing / 2;
    }
  }
}

.content.has-sidenotes {
  a, .footnote-ref {
    &:hover + .sidenote {
      .sidenote-title:before,
      .sidenote-number {
        background-color: yellow;
      }
    }
  }
}

@media screen and (min-width: 45em) {
  $article-with-sidenotes-with: 60em;
  $article-width: 70%;
  $gutter: 5%;

  /**
   * Layout:
   *
   * | ------------------------------------ | | ---------------- |
   * | lorem ipsum dolor .................. | | side note ...... |
   * | ------------------------------------ | | ---------------- |
   *
   * based on the sizes:
   *
   * | ----- $article-width --------------- | | - $side-width -- |
   *                               $gutter --^
   *
   * where `$side` and $gutter are in percent relative to `$article-width`, but
   * only `$article-width` and `$gutter` are given.
   */
  $side-width: ((100% - $article-width) * 100% / $article-width);

  .content.has-sidenotes {
    max-width: $article-with-sidenotes-with;
    @include clearfix();

    > *:not(.sidenote) {
      width: $article-width;
      box-sizing: border-box;
    }

    .sidenote {
      display: block;
      float: right;
      clear: right;

      margin-right: -1 * $side-width;
      width: $side-width - $gutter;

      vertical-align: baseline;
      position: relative;
      top: 1rem - $footnote-font-size;
    }

    .footnotes,
    .footnotes-sep {
      display: none;
    }
  }
}