style.scss

---
---

$serif: 'PT Serif', Georgia, serif;
$sans:  'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
$mono:  'Source Code Pro', Courier, monospace;

$body-text:        16px/24px $serif;
$body-bg:          hsl(35, 30%, 96%);
$text-color:       #222;
$gray:             mix($text-color, #fff, 30%);
$dark:             mix($text-color, #fff, 50%);

$link:             hsl(200, 100%, 30%);
$link-hover:       hsl(200, 100%, 50%);
$link-light:       hsl(200, 100%, 70%);

$code-bg:          hsl(200, 30%, 97%);
$code-color:       hsl(200, 25%, 25%);

$quote-color:      mix($text-color, #fff, 60%);
$cite-color:       mix($text-color, #fff, 40%);

$nav-bg:           hsl(35, 30%, 88%);
$nav-text:         hsl(35, 40%, 40%);
$nav-title:        hsl(35, 60%, 65%);
$nav-text-small:   mix($nav-bg, $nav-text, 50%);
$nav-link:         hsl(35, 70%, 45%);
$nav-hover:        hsl(35, 80%, 70%);

$comments-bg:      hsl(35, 30%, 92%);
$comments-color:   hsl(35, 40%, 40%);

$box-bg:           hsl(200, 50%, 97%);
$box-color:        mix($text-color, $box-bg, 50%);

$update-bg:        hsl(35, 100%, 96%);
$update-color:     hsl(35, 40%, 50%);
$update-link:      hsl(35, 90%, 45%);
$update-hover:     hsl(35, 100%, 30%);

$table-bg:         hsl(35, 30%, 96%);
$table-color:      mix($table-bg, $text-color, 20%);
$table-head-color: hsl(35, 30%, 60%);
$table-alt-bg:     hsl(35, 30%, 99%);

@mixin box($color) {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: $color;
}

// Reset everything:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, cite, code, figure, img, ins, q, s, samp, small, strike,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
  color: $text-color;
  background: $body-bg;
}

table {
  border-spacing: 0;
}

a {
  text-decoration: none;
}

// Basic layout:

.column {
  max-width: 960px;
  margin: 0 auto;

  // For grid.
  position: relative;
}

.grid {
  background: url("/image/grid.png");
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.right {
  text-align: right;
}

nav {
  width: 192px;

  position: absolute;
  right: 0;
  top: 0;
  margin-top: 48px;
  padding: 0 48px 24px 48px;

  font: 13px/20px $sans;
  color: $nav-text;

  img.bob {
    @include box(#fff);
    width: 192px;
    margin: -8px -8px 32px -8px;
    border: solid 8px #fff;
    border-radius: 4px;
  }

  img.rss {
    vertical-align: middle;
    padding-bottom: 3px;
  }

  h2 {
    margin: 24px 0 4px 0;
    color: $nav-title;
    font: normal 13px $sans;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  code {
    font: 13px $mono;
  }

  a {
    color: $nav-link;
  }

  a:hover {
    color: $nav-hover;
  }

  p {
    margin-bottom: 12px;
  }

  ul {
    padding-left: 24px;
    margin-bottom: 12px;
  }

  small {
    font-size: 11px;
    color: $nav-text-small;
  }

  .copyright {
    font-size: 12px;
    font-style: italic;
    color: $nav-text-small;
    text-align: center;
  }

  .archive {
    padding-left: 24px;
    font-style: italic;
    color: $nav-text-small;
  }

  .post-count {
    background: mix($nav-text-small, $body-bg, 10%);
    margin-left: 2px;
    padding: 0 3px;
    border-radius: 4px;
  }
}

header {
  position: relative;
  display: table;
  width: 100%;
  height: 192px;
  margin-bottom: 48px;

  h1 {
    display: table-cell;
    vertical-align: middle;
    font: normal 36px/48px $serif;

    a {
      color: $text-color;
    }

    code {
      background: inherit;
      color: $code-color;
      font: 36px $mono;
    }
  }

  a.older, a.newer {
    position: absolute;
    font: normal 22px/40px $serif;
    background: #fff;
    border-radius: 40px;
    padding: 0 16px;
    bottom: -80px;
    color: $gray;
  }

  .older {
    left: -68px;
  }

  .newer {
    right: -68px;
  }
}

article {
  padding: 48px;
  margin-right: 288px;
  background: #fff;

  h2 {
    font: normal 24px $serif;
    padding: 24px 0 12px 0;
    font-weight: 700;

    code {
      background: inherit;
      color: $code-color;
      font: 24px $mono;
      font-weight: 700;
      padding: 0;
    }
  }

  h3 {
    font: italic 19px/24px $serif;
    padding: 24px 0 12px 0;

    code {
      background: inherit;
      color: $code-color;
      font: italic 19px $mono;
      padding: 0;
    }
  }

  h4 {
    position: relative;
    font: 11px $sans;
    padding: 0 0 4px 0;
    margin-bottom: 16px;

    color: $gray;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    border-bottom: solid 1px #eee;

    a {
      color: $gray;
    }

    .tags {
      position: absolute;
      top: 0;
      right: 0;

      a {
        margin-left: 5px;
      }
    }
  }

  a {
    color: $link;
  }

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

  p {
    font: $body-text;
    padding: 8px 0;

    // To cancel out list item tweaks.
    color: $text-color;
    letter-spacing: 0;
  }

  p + p {
    padding-top: 12px;
  }

  ol, ul {
    margin-left: 24px;
  }

  // Smaller list numbers.
  ol li {
    font: bold 13px $serif;
  }

  a, a code {
    color: $link;

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

  code {
    @include box($code-bg);
    padding: 1px 3px;
    color: $code-color;
    font: 15px/18px $mono;
  }

  pre {
    @include box($code-bg);
    margin: 6px 0;
    padding: 6px 12px;
    color: $code-color;
    overflow: auto;

    code {
      padding: 0;
      font: 13px/18px $mono;
    }
  }

  tt {
    font: 13px/18px $mono;
    color: $code-color;
  }

  blockquote {
    color: $quote-color;
    padding: 0 24px;

    p {
      color: $quote-color;
      font: italic 18px/26px $serif;
      padding: 4px 0;

      strong {
        font-weight: 600;
      }
    }
  }

  .cite {
    font: italic 13px/24px $sans;
    color: $cite-color;
    display: block;
    text-align: right;
    margin-top: 0;
    padding: 0 24px 12px 0;

    &:before {
      content: '\2014\00A0';
    }
  }

  .update {
    @include box($update-bg);
    margin: 12px 0;
    padding: 0 12px;
    color: $update-color;

    p {
      font: 14px/24px $sans;
      color: $update-color;
    }

    code {
      background: mix($update-bg, $code-color, 92%);
      font-size: 13px/22px;
    }

    a {
      color: $update-link;

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

  img {
    @include box(inherit);
    display: block;
    padding: 6px;
    margin: 6px auto;

    &.framed {
      background: $box-bg;
    }
  }

  figure {
    @include box($box-bg);
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px auto;
    width: 100%;

    img {
      border-radius: 0;
      padding: 0;
      margin: 0;
      width: 100%;
    }

    // Center tweets.
    iframe.twitter-tweet {
      margin-left: auto !important;
      margin-right: auto !important;
    }

    figcaption, label, input, output {
      color: $box-color;
      font: 13px $sans;
      margin-top: 10px;
    }
  }

  .table {
    @include box($table-bg);
    padding: 6px;
    margin: 6px 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    color: $table-color;

    td {
      font: $body-text;
      padding: 0 6px;
    }

    thead {
      td {
        color: $table-head-color;
        font: 13px/24px $sans;
        font-weight: 600;
      }
    }

    tbody tr:nth-child(odd) {
      background: $table-alt-bg;
    }
  }
}

.social {
  padding: 24px 0 36px 0;
  text-align: center;

  a {
    color: $gray;
    padding: 0 4px;
  }
}

// The comment area:

.comments {
  margin: 0 -48px -48px -48px;
  padding: 24px 48px;

  background: $comments-bg;
  color: $comments-color;
  font: normal 13px $sans;

  a.dsq-subscribe-email em, a.dsq-subscribe-rss em {
    text-decoration: none;
  }

  a {
    color: $nav-link;
    text-decoration: none;
  }

  a:hover {
    color: $nav-hover;
  }
}

.dsq-comment-text blockquote {
  padding-left: 16px;
  color: #777;
}

.post-box {
  display: table;

  .date {
    display: table-cell;
    font: 13px $sans;
    width: 96px;
  }

  .title {
    display: table-cell;
    padding: 0;
    font: 15px/24px $serif;
  }
}

.post-box + h4 {
  margin-top: 24px;
}

// Syntax highlighting:

.highlight {
  span.c,
  span.c1,
  span.cm  { color: mix($code-bg, $code-color, 50%); } // comment
  span.k   { color: hsl(200, 100%, 40%); } // keyword
  span.kd  { color: hsl(190, 100%, 35%); } // keyword declaration
  span.kt  { color: hsl(180, 100%, 30%); } // keyword type
  span.o   { color: hsl(200, 40%, 40%); } // operator
  span.nb  { color: hsl(170, 100%, 30%); } // built-in name
  span.nc  { color: hsl(180, 100%, 30%); } // class name
  span.p   { color: mix($code-bg, $code-color, 30%); } // punctuation
  span.s,
  span.s1,
  span.s2,
  span.sc  { color: hsl(35, 100%, 40%); } // string
  span.si  { color: hsl(27, 100%, 40%); } // string interpolation
  span.m,
  span.mf  { color: hsl(200, 100%, 40%); } // number
  span.cp  { color: hsl(320, 50%, 45%); } // preprocessor
}

@media only screen and (max-width: 1008px) {
  // Move the navigation to the bottom and split it into two columns.
  header {
    display: block;
    height: inherit;

    h1 {
      display: block;
    }
  }

  article {
    margin: 0 48px;
    padding-top: 96px;
  }

  nav {
    position: relative;
    display: table;
    margin: 0 48px;
    padding-top: 48px;
    width: inherit;

    background: $nav-bg;
  }

  .nav-first, .nav-second {
    display: table-cell;
    vertical-align: top;
    width: 50%;
  }

  .nav-first {
    padding-right: 24px;
  }

  .nav-second {
    padding-left: 24px;

    h2 {
      margin-top: 0;
    }
  }
}

@media only screen and (max-width: 640px) {
  // Kill the margins.
  article, nav {
    margin: 0;
  }

  // Bring in the older/newer buttons.
  header {
    a.older {
      left: -52px;
    }

    a.newer {
      right: -52px;
    }
  }
}

@media only screen and (max-width: 480px) {
  // Narrower padding.
  article {
    padding: 72px 24px 24px 24px;
  }

  nav {
    padding: 24px;
  }

  // TODO: fix.
  .comments {
    //display: none;
    margin: 0 -24px -24px -24px;
    padding: 24px;
  }

  // Move older/newer buttons to top corners.
  header {
    a.older, a.newer {
      background: $body-bg;
      top: -72px;
      bottom: inherit;
    }

    a.older {
      left: -24px;
      padding: 0 14px 4px 6px;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    a.newer {
      right: -24px;
      padding: 0 6px 4px 14px;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  nav {
    display: inherit;

    img.bob {
      display: block;
      margin: -8px auto 16px;
    }
  }

  .nav-first, .nav-second {
    display: inherit;
    width: inherit;
    padding: 0;
  }

  .nav-second h2 {
    margin-top: 24px;
  }

  .post-box {
    .date {
      font-size: 11px;
      width: 48px;
    }

    .title {
      font-size: 14px;
      line-height: 22px;
    }
  }

  // Shrink the text.
  header {
    h1 {
      font-size: 28px;
      line-height: 36px;
      code {
        font-size: 24px;
      }
    }
  }

  article {
    h2 {
      font-size: 20px;
      padding: 20px 0 10px 0;

      code {
        font-size: 20px;
      }
    }

    h3 {
      font-size: 17px;
      line-height: 20px;
      padding: 20px 0 10px 0;
    }

    h4 {
      font-size: 10px;
      margin-bottom: 6px;

      .tags a {
        margin-left: 2px;
        letter-spacing: 0;
      }
    }

    p {
      font-size: 14px;
      line-height: 20px;
      padding: 6px 0;
    }

    // Smaller list numbers.
    ol li {
      font-size: 11px;
    }

    code {
      padding: 1px 3px;
      font-size: 13px;
    }

    pre {
      margin: 0;
      padding: 4px 6px;

      code {
        font-size: 12px;
      }
    }

    blockquote {
      p {
        font-size: 15px;
        line-height: 24px;
      }
    }

    .cite {
      font-size: 12px;
    }

    .update {
      p {
        font-size: 12px;
        line-height: 20px;
      }

      code {
        font-size: 12px;
        line-height: 20px;
      }
    }

    figure {
      figcaption, label, input, output {
        font-size: 11px;
      }
    }

    .table {
      padding: 2px;
      margin: 4px 0;
    }

    table {
      td {
        font-size: 12px;
        padding: 0 3px;
      }

      thead {
        td {
          font-size: 12px;
        }
      }
    }
  }
}