// normal text color
$normal_color: hsl(0,0, 90%);
// the nice orange
$action_color: hsl(32, 100%, 50%);
// the blue
$alternate_color: hsl(204, 35%, 35%);
// box color for quotes and code
$box_color: hsla(0, 0%, 0%, 0);

// standard size to size everything from that
$standard-width: 1em;

// other variables
$box_border: $standard-width solid $box_color;

html {
  font-size: 99%;
  font-family: sans-serif;
  /* original picture from http://subtlepatterns.com/iron-grip/ */
  background-image: url('/images/irongrip-zero.png');
  min-width: 300px;
  width: 100%;
  max-width: 1100px;
  margin: auto;
}

code {
  font-family: "PT mono", monospace;
}
pre {
  border: $box_border;
  overflow-x: auto;
}
blockquote {
  border: $box_border;
  margin: 0;
  font-style: italic;
  position: relative;

  :before {
    content: '”';
    font-size: 300%;
    color: fade-out($alternate-color, 0.2);
    font-weight: bold;
    z-index: -1;
    position: absolute;
    bottom: $standard-width * -0.75;
    right: $standard-width * -0.1;
  }

  p:first-child {
    margin-top: 0;
  }
  p:last-child {
    margin-bottom: 0;
  }
}

#header {
  h1, h2 {
    display: none;
    margin: $standard-width / 2;
    padding: 0;
  }
}

a {
  text-decoration: none;
  color: $action-color;
}

.page {
  margin-left: $standard-width;
  margin-right: $standard-width;
  display: block;
  text-align: center;
  padding: $standard-width;
  font-size: $standard-width * 0.9;
  font-weight: bold;
  &.up {
    border-top: $standard-width / 4 solid $alternate-color;
    &:hover, &:focus, &:active {
      border-top: $standard-width / 4 solid $action-color;
    }
  }
  &.down {
    border-bottom: $standard-width / 4 solid $alternate-color;
    &:hover, &:focus, &:active {
      border-bottom: $standard-width / 4 solid $action-color;
    }
  }
}
#content, pre, blockquote {
  background-color: fade-out($alternate-color, 0.7);
}
article {
  color: $normal_color;
  padding: $standard-width;
  header {
    padding: $standard-width / 4;
    display: inline-block;
    h1 { margin: 0;}
    h1, h2 { display: inline-block; }
  }
  footer {
    padding: $standard-width / 4;
    display: inline-block;
    font-size: $standard-width * 0.9;
    div {
      display: inline-block;
      margin: $standard-width / 5;
      font-weight: bold;
      color: hsl(0, 0%, 60%);
    }
    .author:before { content: 'by '; }
    .date:before { content: ' on '; }
    .time { display: none; }
  }
  section {
    border-top: $standard-width/5 solid $alternate-color;
    word-wrap: break-word;
    h1 { font-size: $standard-width * 1.3 }
    h2 { font-size: $standard-width * 1.2 }
    h3 { font-size: $standard-width * 1.1; font-weight: normal; }
    h1, h2, h3 {
      border-bottom: $standard-width / 10 solid $normal-color;
      margin-right: 25%;
    }
    code, pre { word-wrap: initial; }
  }
}