base-16 sass

404.scss

@import './colours';
@import './variables';

.page-not-found {
  h1 {
    font-size: 5em;
    text-align: center;
  }

  h2 {
    @include margin($bottom: 4rem);
    color: base('04');
    font-size: 3em;
    text-align: center;
  }

  @media (max-width: $max-width) {
    @each $level, $size in ('h1': 3em, 'h2': 2em) {
      h#{$level} {
        font-size: $size;
      }
    }
  }
}

article.scss

@import './variables';
@import './colours';

@mixin articleLayout {
  background-color: base('07');
  color: base('00');
  padding: 1rem 8rem;

  @media (max-width: $max-width) {
    @include padding($left: 2rem, $right: 2rem);
  }
}

@mixin highlight {
  @include responsive;
  @include margin($bottom: 1rem, $left: -8rem, $right: -8rem);
  background-color: base('01');
  box-sizing: border-box;
  padding: 1em;
  width: 52rem;
  @media (max-width: $max-width) {
    @include margin($left: 0, $right: 0);
    border-radius: 3px;
  }
}

@mixin tableCell {
  border-bottom: 1px solid base('04');
  line-height: inherit;
  padding: 0.25rem 1rem;
}

// Post List Layout
.article-list {
  h1 {
    &.list-title {
      color: base('0a');
      font-size: 3em;
    }
  }

  article {
    @include articleLayout;
    @include padding($bottom: 4rem, $top: 4rem);
    margin-bottom: 4rem;

    h2 {
      &.headline {
        color: base('0d');
        margin-top: 0;

        a {
          color: base('0d');
          margin-top: 0;
        }
      }
    }

    .meta {
      margin-bottom: 1rem;

      .key {
        color: base('03');
      }

      .val {
        color: base('0e');

        a {
          color: base('0e');
        }
      }
    }

    section {
      &.summary {
        a {
          color: base('0f');
        }
      }
    }
  }
}

// Single Post Layout

article {
  &.single {
    .meta {
      font-size: 0.9em;
      text-align: right;

      .key {
        color: base('03');
      }

      .val {
        color: base('0e');

        a {
          color: base('0e');
        }
      }
    }

    h1 {
      &.headline {
        color: base('0a');
        font-size: 3em;
        margin-top: 0;
      }
    }

    section {
      @include articleLayout;

      &.body {
        @include padding($bottom: 3rem, $top: 4rem);
        @each $prop,
          $color
            in (
              'h1': base('0d'),
              'h2': base('0b'),
              'h3': base('09'),
              'h4': base('08'),
              'h5': base('02'),
              'h6': base('03'),
              'a': base('0f')
            )
        {
          #{$prop} {
            color: $color;
          }
        }
      }
    }

    * {
      max-width: 100%;
    }

    pre {
      @include margin($bottom: 1rem, $top: 0);
      border-radius: 3px;
      overflow-x: auto;
      padding: 2rem;
    }

    p {
      code {
        background: base('03');
        border-radius: 3px;
        color: base('07');
        padding: 0.2em 0.5em;
      }
    }

    div {
      &.highlight {
        @include highlight;
      }
    }

    figure {
      @include highlight;

      img {
        border-radius: 3px;
        max-width: 100%;
        width: 100%;
      }

      figcaption {
        margin-top: 1rem;

        h4 {
          color: base('07');
          font-style: italic;
          font-weight: normal;
          margin-top: 0;
          text-align: center;
        }
      }
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
      max-width: 100%;
      width: 100%;
    }

    tr {
      &:last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th {
      @include tableCell;
      font-weight: bold;
      text-align: left;
      vertical-align: bottom;
    }

    td {
      @include tableCell;
      vertical-align: top;
    }

    blockquote {
      @include margin($left: 2rem, $right: 3rem);
      border-left: 5px solid base('0c');
      padding-left: 1rem;
    }

    hr {
      border: 0;
      border-bottom: 1px solid base('04');
    }

    @media (max-width: $max-width) {
      .meta {
        @include padding($left: 2rem, $right: 2rem);
      }

      h1 {
        &.headline {
          @include padding($left: 2rem, $right: 2rem);
        }
      }

      section {
        &.body {
          @include padding($top: 2rem, $bottom: 1rem);
        }
      }
    }
  }
}

code.scss

@import './variables';

pre {
  background: base('00');
  color: base('07');
}

.highlight {
  .hll {
    background-color: base('02');
  }
  @each $lang,
    $base
      in (
        'bp': '07',
        'c': '03',
        'c1': '03',
        'cm': '03',
        'cp': '03',
        'cs': '03',
        'err': '08',
        'gd': '08',
        'gh': '07',
        'gi': '0b',
        'gp': '03',
        'gu': '0c',
        'il': '09',
        'k': '0e',
        'kc': '0e',
        'kd': '0e',
        'kn': '0c',
        'kp': '0e',
        'kr': '0e',
        'kt': '0a',
        'l': '09',
        'ld': '0b',
        'm': '09',
        'mf': '09',
        'mh': '09',
        'mi': '09',
        'mo': '09',
        'n': '07',
        'na': '0d',
        'nb': '07',
        'nc': '0a',
        'nd': '0c',
        'ne': '08',
        'nf': '0d',
        'ni': '07',
        'nl': '07',
        'nn': '0a',
        'no': '08',
        'nt': '0c',
        'nv': '08',
        'nx': '0d',
        'o': '0c',
        'ow': '0c',
        'p': '07',
        'py': '07',
        's': '0b',
        's1': '0b',
        's2': '0b',
        'sb': '0b',
        'sc': '07',
        'sd': '03',
        'se': '09',
        'sh': '0b',
        'si': '09',
        'sr': '0b',
        'ss': '0b',
        'sx': '0b',
        'vc': '08',
        'vg': '08',
        'vi': '08',
        'w': '07'
      )
  {
    .#{$lang} {
      color: base($base);
    }
  }

  .ge {
    font-style: italic;
  }

  @each $lang in gh, gp, gs, gu {
    .#{$lang} {
      font-weight: bold;
    }
  }
}

colours.scss

@import './variables';

@each $num, $color in $base {
  .base#{$num} {
    color: $color;
  }
}

@mixin drawPalette {
  $colors: ();

  @each $id, $color in $base {
    $colors: append($colors, $color);
  }
  $length: length($colors);
  $color-stops: append((), nth($colors, 1), comma);
  $stop-size: 100 / $length;

  @for $i from 1 through $length {
    $color: nth($colors, $i);

    @if $i > 1 {
      $color-stops: append($color-stops, $color $stop-size * ($i - 1) * 1%);
    }

    $color-stops: append($color-stops, $color $stop-size * $i * 1%);
  }
  background: linear-gradient(to right, $color-stops);
}

homepage.scss

@import './variables';
@import './colours';

.homepage {
  @media (max-width: $max-width) {
    margin-bottom: 2rem;
  }

  h1 {
    &.site-title {
      color: base('0c');
      font-size: 5em;
      text-align: center;
      @media (max-width: $max-width) {
        font-size: 3em;
      }
    }

    &.headline {
      color: base('0a');
      font-size: 3em;
      @media (max-width: $max-width) {
        @include padding($left: 2rem, $right: 2rem);
      }
    }
  }

  .hero-logo {
    @include drawPalette;
    height: 3em;
    margin: 1em 0;
  }

  section {
    &.categories,
    &.tags {
      @include padding($left: 2rem, $right: 2rem);
    }
  }

  .category {
    color: base('0e');

    a {
      color: base('0e');
    }
  }

  .tag {
    color: base('0e');
    margin-right: 2em;

    a {
      color: base('0e');
    }
  }
}

main.scss

@import './variables';
@import './colours';
@import './404';
@import './search';
@import './homepage';
@import './article';
@import './typography';
@import './code';

body {
  background-color: base('00');
  color: base('07');
  font-family: $fonts;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
}

.container {
  @include responsive;
  @include margin($left: auto, $right: auto);
}

div {
  &.right {
    float: right;
  }

  &.clearfix {
    overflow: auto;
  }
}

@mixin pageBase {
  @include padding($bottom: 1rem, $top: 1rem);
  background-color: base('01');
}

header {
  @include pageBase;
  @include margin($bottom: 2rem, $top: 1rem);

  a {
    &.path {
      color: base('0d');
    }
  }

  span {
    &.caret {
      color: base('07');
    }
  }

  @media (max-width: $max-width) {
    @include padding($left: 2rem, $right: 2rem);
    margin-top: 0;
  }
}

footer {
  @include pageBase;
  @include margin($bottom: 1rem, $top: 2rem);
  color: base('03');
  font-size: 0.9em;
  text-align: center;

  a {
    color: base('03');
    text-decoration: none;
  }

  @media (max-width: $max-width) {
    @include margin($bottom: 0, $top: 0);
  }
}

search.scss

@import './variables';

.search {
  display: flex;
  justify-content: space-between;

  h1 {
    @include margin($top: inherit, $left: inherit);
  }

  &.form {
    @include margin($top: 1rem, $bottom: 0.5rem);
    font-size: 3em;
  }
}

.search-box {
  border: None;
  border-radius: 2rem;
  font-size: 1.5rem;
  height: 3rem;
  margin-top: 1rem;
  padding-left: 1rem;
  transition: background 0.55s ease;
  width: 20rem;
}

typography.scss

p {
  margin-bottom: 1rem;
  margin-top: 0;
}

@each $prop, $font-size in ('h1': 2rem, 'h2': 1.5rem, 'h3': 1.25rem, 'h4': 1rem, 'h5': 0.875rem, 'h6': 0.75rem) {
  #{$prop} {
    @include margin($bottom: 0.5em, $top: 1em);
    font-size: $font-size;
    font-weight: bold;
    line-height: 1.25;
  }
}

pre,
code {
  font-family: inherit;
  font-size: inherit;
}

variables.scss

$fonts: 'Source Code Pro', monospace;
$max-width: 52em;

$base: (
  '00': #2d2d2d,
  '01': #393939,
  '02': #515151,
  '03': #747369,
  '04': #a09f93,
  '05': #d3d0c8,
  '06': #e8e6df,
  '07': #f2f0ec,
  '08': #f2777a,
  '09': #f99157,
  '0a': #fc6,
  '0b': #9c9,
  '0c': #6cc,
  '0d': #69c,
  '0e': #c9c,
  '0f': #d27b53,
);

@function base($num) {
  @return map-get($base, $num);
}

@mixin responsive {
  max-width: $max-width;
  @media (max-width: $max-width) {
    width: 100%;
  }
}

@mixin padding($top: auto, $right: auto, $bottom: auto, $left: auto) {
  padding-bottom: $bottom;
  padding-left: $left;
  padding-right: $right;
  padding-top: $top;
}

@mixin margin($top: auto, $right: auto, $bottom: auto, $left: auto) {
  margin-bottom: $bottom;
  margin-left: $left;
  margin-right: $right;
  margin-top: $top;
}