style.scss

@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Arimo|Tangerine');

/** Simple mixin for cross browser prefixes */
@mixin crossBrowserProperty($property, $val){
  -webkit-#{$property}: $val;
  -moz-#{$property}: $val;
  -ms-#{$property}: $val;
  #{$property}: $val;
}

$black: #000000;
$light-black: #262925;
$light-gray: #e6e6e6;
$gray: #666666;
$white: #ffffff;
$off-white: #ffffef;
$primary: #D4AF37; // #274e13
$secondary: #FFDF00;
$primary-dark: #996515;

$mobile-width: 660px;

// -- Reset -- \\
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;  padding: 0; border: 0;  font-size: 16px; font: inherit;  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
  content: ''; content: none;
}
table {
  border-collapse: collapse;  border-spacing: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

// --- Actual Styles --- \\

html {
  width: 100%;
  background: linear-gradient($primary 0, $secondary 48em);

  //font-family: 'EB Garamond', serif;
  color: $black;
  font-family: 'Arimo', sans-serif;
  font-size: 16px;
  line-height: 1em;
}

body {
  width: 100%;
  min-height: 100%;
  height: 100%;
  // @include crossBrowserProperty(text-size-adjust, none);
}

h1, h2, h3, h4 {
  font-weight: bold;
  line-height: 1em;
  color: $primary-dark;
  // font-family: 'EB Garamond', serif;
  // font-family: 'Tangerine', cursive;
}

h1 {
  color: $black;
  display: block;
  font-size: 2.5em;
  line-height: 1.1em;
  padding: 1em;
  text-align: center;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

a, a:visited {
  color: $primary-dark;
  fill: $primary-dark;
  font-weight: 400;

  &:hover, &:active, &:focus {
    color: $primary;
  }
}

p {
  line-height: 1.33em;
}

* + p {
  margin-top: 0.5em;
}

ul {
  list-style-type: disc;

  & > li {
    margin-left: 2em;
    line-height: 1.33em;
  }
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

a:before, a, a:hover, a:hover:before {
  @include crossBrowserProperty(transition, 0.333s);
}

hr {
  border: none;
  border-top: $primary solid 2px;
}

#main {
  margin: 0 auto;
  max-width: 40em;
  padding-bottom: 1em;

  & section.for-h1 {
    .h1-content {
      & > p {
        display: block;
        font-size: 1.5em;
        padding: 0 1em;
        text-align: center;

        & > a {
          background-image: url("assets/github.svg");
          background-position: center right;
          background-repeat: no-repeat;
          background-size: 1em;
          padding-right: 1.25em;

          &:hover, &:focus, &:active {
            color: $black;
          }
        }

        & > img {
          margin: 0 auto;
          max-width: 100%;
        }
      }

      & > section:first-of-type {
        margin-top: 1.5em;
      }
    }
  }

  & section.for-h3 {
    padding-left: 1em;
    padding-top: 0.5em;
  }

  & section.for-h1 > hr + p > a {
    display: block;
    text-align: center;
    color: $white;
  }

  & section > {
    & h2, & h3, & h4 {
      @media only screen and (max-width: $mobile-width) {
        display: block;
        text-align: center;
      }

      & + div > p:first-child > img:first-child {
        padding: 0.5em;
        float: right;

        @media only screen and (max-width: $mobile-width) {
          // make it take up it's own centered line
          width: 50%;
          display: block;
          float: none !important;
          margin: 0 auto;
        }
      }
    }
  }

  & section:nth-child(even) > {
    & h2, & h3, & h4 {
      & + div > p:first-child > img:first-child {
        float: left;
      }
    }
  }

  & section.for-h2 {
    $border: 3px solid $black;
    background-color: $off-white;
    border: $border;
    border-top: none;
    border-bottom: none;
    padding: 1em 1em 0 1em;

    &:first-of-type {
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      border-top: $border;
    }

    &:last-of-type {
      border-bottom-left-radius: 1em;
      border-bottom-right-radius: 1em;
      border-bottom: $border;
      padding-bottom: 1em;
    }

    & img {
      padding: 1em;
      width: 25%;
    }
  }

  & p + section {
    padding-top: 0.5em;
  }

  & .h2-content > p:only-child {
    padding-top: 0.5em;
  }
}

#page-footer {
  display: block;
  color: $black;
  padding: 1em;
  text-align: center;

  & a {
    color: $black;
  }
}