diff --git a/Makefile b/Makefile
index 9f604ccfd..e2ad817c4 100644
--- a/Makefile
+++ b/Makefile
@@ -2,6 +2,12 @@ npmbin := ./node_modules/.bin
 PORT ?= 3000
 HOST ?= 127.0.0.1
 
+help:
+	@echo
+	@echo Makefile targets
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' Makefile | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+	@echo
+
 # Builds intermediate files. Needs a _site built first though
 update: _site critical
 
@@ -9,27 +15,39 @@ update: _site critical
 _site:
 	bundle exec jekyll build --incremental
 
-# Builds critical path CSS/JS
-critical: _site
+critical: _site ## Builds critical path CSS/JS
 	node _support/critical.js
 
-# Starts development server
-dev:
+# Ensure that bins are available.
+ensure-bin:
+	@if [ ! -d $(npmbin) ]; then \
+		echo "---"; \
+		echo "Error: $(npmbin) not found, you may need to run '[docker-compose run --rm web] yarn install'."; \
+		echo "---"; \
+		exit 1; \
+		fi
+	@if ! which jekyll &>/dev/null; then \
+		echo "---"; \
+		echo "Warning: Jekyll not found, you may need to run '[docker-compose run --rm web] bundle install'."; \
+		echo "---"; \
+		fi
+
+dev: ensure-bin ## Starts development server
 	$(npmbin)/concurrently -k -p command -c "blue,green" \
 		"make dev-webpack" \
 		"make dev-jekyll"
 
-dev-webpack:
+dev-webpack: ensure-bin
 	$(npmbin)/webpack --watch --colors -p
 
-dev-jekyll:
+dev-jekyll: ensure-bin
 	if [ -f _site ]; then \
 		bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \
 		else \
 		bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \
 		fi
 
-test: _site
+test: _site ## Runs rudimentary tests
 	@test -f _site/vim.html
 	@test -f _site/react.html
 	@test -f _site/index.html
diff --git a/_includes/head.html b/_includes/head.html
index e5422292f..76458931c 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -4,7 +4,7 @@
   {% include meta.html %}
   {% include polyfills.html %}
   <style>html{opacity:0}</style>
-  <link href="https://ricostacruz.com/til/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
+  <link rel="stylesheet" href="{{base}}/assets/2015/style.css?t={{ timestamp }}">
   <link href="{{base}}/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
   <link href="{{base}}/assets/print.css?t={{ timestamp }}" rel="stylesheet" media="print" />
 </head>
diff --git a/_sass/2015/base/normalize.scss b/_sass/2015/base/normalize.scss
new file mode 100644
index 000000000..458eea1ea
--- /dev/null
+++ b/_sass/2015/base/normalize.scss
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/_sass/2015/base/typography.sass b/_sass/2015/base/typography.sass
new file mode 100644
index 000000000..baf91b06b
--- /dev/null
+++ b/_sass/2015/base/typography.sass
@@ -0,0 +1,58 @@
+@import url('//brick.a.ssl.fastly.net/Roboto:400,400i,700')
+@import url('//fonts.googleapis.com/css?family=Raleway:800')
+@import url('//fonts.googleapis.com/css?family=Fira+Mono:400,400i')
+@import url('//brick.a.ssl.fastly.net/EB+Garamond:400i')
+
+$body-font-size: 17px
+$body-line-height: 1.7
+
+@mixin font-size($multiplier, $lhmultiplier, $size, $line-height)
+  font-size: $size * $multiplier
+  @if $line-height != none
+    line-height: $line-height * $lhmultiplier
+
+@mixin body-font
+  font-family: 'Roboto', sans-serif
+  font-weight: 400
+
+@mixin italic-font
+  font-family: 'eb garamond', serif
+  font-weight: 400
+  font-style: italic
+  +kernliga
+
+@mixin headline-font
+  font-family: 'eb garamond', serif
+  font-weight: 400
+  font-style: italic
+  +kernliga
+
+@mixin caps-font
+  text-transform: uppercase
+  letter-spacing: 2px
+
+@mixin mono-font
+  font-family: 'fira mono', monospace
+  font-weight: 400
+  letter-spacing: -0.5px
+  +no-antialias
+
+@mixin bold-font
+  font-family: 'raleway', sans-serif
+  font-weight: 800
+
+/*
+ * sizes
+ */
+
+@mixin italic-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
+
+@mixin headline-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
+
+@mixin bold-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
+
+@mixin mono-font-size($size, $line-height: none)
+  +font-size(1.0, 1.0, $size, $line-height)
diff --git a/_sass/2015/base/utils.sass b/_sass/2015/base/utils.sass
new file mode 100644
index 000000000..97373fb74
--- /dev/null
+++ b/_sass/2015/base/utils.sass
@@ -0,0 +1,41 @@
+@mixin kernliga
+  font-size-adjust: none
+  // don't display digraphs in languages that don't support it
+  -webkit-font-language-override: normal
+  font-language-override: normal
+
+  // use font-defined kerning info
+  -webkit-font-kerning: auto
+  font-kerning: auto
+
+  // opentype options: kerning, ligatures, horiz ligatures, discretionary ligatures, contextual swash
+  // http://en.wikipedia.org/wiki/List_of_typographic_features
+  -webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
+  font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
+
+  // allow browser to auto-infer missing glyphs
+  font-synthesis: weight style
+
+  // swashes on first letters
+  // &:first-letter
+  //   font-feature-settings: "kern", "swsh"
+  //   -webkit-font-feature-settings: "kern", "swsh"
+
+@mixin antialias
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+@mixin no-antialias
+  text-rendering: auto
+  -webkit-font-smoothing: subpixel-antialiased
+  -moz-osx-font-smoothing: auto
+
+@mixin clearfix
+  &:after
+    display: table
+    content: ''
+    clear: both
+    height: 0
+    zoom: 1
+
diff --git a/_sass/2015/components/about-the-site.sass b/_sass/2015/components/about-the-site.sass
new file mode 100644
index 000000000..a30747444
--- /dev/null
+++ b/_sass/2015/components/about-the-site.sass
@@ -0,0 +1,105 @@
+/*
+ * .about-the-site
+ */
+
+.about-the-site
+  &
+    position: relative
+
+  .container
+    text-align: center
+    padding: 3em 80px
+    margin: 0 auto
+    +clearfix
+
+    @media (max-width: 768px)
+      padding-left: 40px
+      padding-right: 40px
+
+  &:before
+    content: ''
+    position: absolute
+    display: block
+    left: 20px
+    right: 20px
+    top: 0
+    border-top: solid 1px $hairline
+
+  &
+    +body-font
+    font-size: 0.85em
+    color: lighten($gray, 20%)
+
+  a, a:visited
+    color: lighten($gray, 10%)
+    box-shadow: inset 0 -1px rgba(black, 0.05)
+    padding-bottom: 2px
+
+  a:hover, a:focus
+    color: $black
+    box-shadow: inset 0 -2px $accent
+
+  strong
+    +bold-font
+
+  strong a, strong a:visited
+    color: $black
+    box-shadow: none
+
+  strong a:hover, strong a:focus
+    color: $black
+    box-shadow: inset 0 -2px $accent
+
+  .identity
+    margin: 0
+    margin-top: 0.2em
+    float: right
+    +italic-font
+    +italic-font-size(2.5em)
+
+  .identity a,
+  .identity a:visited
+    color: $black
+    box-shadow: none
+
+  .identity a:hover,
+  .identity a:focus
+    color: $accent
+
+  .blurb
+    margin: 0
+    max-width: 500px
+    text-align: left
+    float: left
+    line-height: 1.55
+
+  .back
+    float: right
+    margin-top: 0.4em
+    margin-right: 2em
+
+  .fleuron:before
+    content: '\f492'
+    font-family: Ionicons
+    font-size: 16px
+    font-weight: normal
+    font-style: normal
+    display: inline-block
+    vertical-align: middle
+    color: $black
+    margin: 0 7px
+
+    @media (max-width: 768px)
+      display: none
+
+  @media (max-width: 768px)
+    .identity
+      float: left
+      clear: both
+    .blurb
+      float: none
+      margin-bottom: 1em
+      width: auto
+    .back
+      float: right
+      margin-right: 0
diff --git a/_sass/2015/components/big-button.sass b/_sass/2015/components/big-button.sass
new file mode 100644
index 000000000..33f61e0cb
--- /dev/null
+++ b/_sass/2015/components/big-button.sass
@@ -0,0 +1,66 @@
+.big-button,
+a.big-button
+  display: inline-block
+
+  width: 180px
+  height: 50px
+  line-height: 50px - 2px
+  padding: 0
+  border-radius: 30px
+  font-size: 0.85em
+  box-shadow: none
+  background: transparent
+
+  @media (max-width: 768px)
+    width: 140px
+    height: 40px
+    line-height: 40px - 2px
+
+  &, &:visited
+    border: solid 2px $accent
+    color: $accent
+
+  &.-back,
+  &.-back:visited
+    border: solid 1px rgba($gray, 0.2)
+    color: $gray
+
+  &.-back:before,
+  &.-next:after
+    font-family: Ionicons
+    font-size: 20px
+    display: inline-block
+    vertical-align: middle
+    position: relative
+    top: -1px
+
+  &.-back:before
+    content: '\f38f'
+
+  &.-next:after
+    content: '\f3d1'
+    margin-left: 16px
+    top: 0
+
+  &.-slim
+    width: 60px
+    border-width: 2px
+    height: 60px
+    line-height: 60px
+    border-radius: 50%
+
+    @media (max-width: 768px)
+      width: 40px
+      height: 40px
+      line-height: 40px
+
+  &:hover, &:focus
+    background: $accent
+    border-color: transparent
+    color: white
+    box-shadow: none
+
+  &.-back:hover,
+  &.-back:focus
+    background: $accent
+    color: white
diff --git a/_sass/2015/components/brief-intro.sass b/_sass/2015/components/brief-intro.sass
new file mode 100644
index 000000000..ac4ce72fb
--- /dev/null
+++ b/_sass/2015/components/brief-intro.sass
@@ -0,0 +1,8 @@
+/*
+ * .brief-intro -- Brief introduction
+ */
+
+.brief-intro
+  font-size: 1.1em
+  color: $gray
+
diff --git a/_sass/2015/components/full-image.sass b/_sass/2015/components/full-image.sass
new file mode 100644
index 000000000..0234709b1
--- /dev/null
+++ b/_sass/2015/components/full-image.sass
@@ -0,0 +1,38 @@
+/*
+ * .full-image -- full width image containers
+ */
+
+.full-image
+  &
+    overflow: hidden
+    text-align: center
+    position: relative
+
+  img
+    background: #fcfcfc
+
+  &.cropped img,
+  &.cropped img:first-child:last-child
+    margin-bottom: -50px
+    display: block
+    background: transparent
+
+  &.cropped:after
+    content: ''
+    display: block
+    position: absolute
+    bottom: 0
+    left: 20px
+    right: 20px
+    border-bottom: solid 1px $lightgray
+
+  &.stretched img
+    width: 100%
+
+  @media (max-width: 768px)
+    margin-left: -20px
+    margin-right: -20px
+
+  @media (min-width: 769px)
+    width: 100vw
+    margin-left: calc(-50vw + #{$page-width} / 2)
diff --git a/_sass/2015/components/hint.sass b/_sass/2015/components/hint.sass
new file mode 100644
index 000000000..7d3c25258
--- /dev/null
+++ b/_sass/2015/components/hint.sass
@@ -0,0 +1,14 @@
+.hint--top, .hint--bottom
+  &:before
+    margin-top: -14px
+    margin-left: -8px
+    border-radius: 2px
+
+  &:before, &:after
+    transition-duration: 10ms
+
+  &:after
+    box-shadow: none
+    border-radius: 2px
+    text-shadow: none
+    margin-left: -55px
diff --git a/_sass/2015/components/hljs.sass b/_sass/2015/components/hljs.sass
new file mode 100644
index 000000000..b9cfc8930
--- /dev/null
+++ b/_sass/2015/components/hljs.sass
@@ -0,0 +1,78 @@
+.hljs-literal,
+.hljs-number,
+.hljs-string,
+.hljs-symbol,
+.hljs-value
+  color: $accent
+
+.hljs-key,
+.hljs-attribute
+  color: darken($accent, 20%)
+
+.hljs-keyword,
+.hljs-constant
+  color: $black
+
+.hljs-comment
+  color: $gray
+  font-style: italic
+
+//
+// Prism
+//
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata
+  color: $gray
+  font-style: italic
+
+.token.punctuation
+  color: #999
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted
+  color: #905
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted
+  color: $accent
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string
+  color: #a67f59
+
+.token.atrule,
+.token.attr-value,
+.token.keyword
+  color: #07a
+
+.token.function
+  color: #DD4A68
+
+.token.regex,
+.token.important,
+.token.variable
+  color: #e90
+
+.token.important,
+.token.bold
+  font-weight: bold
+.token.italic
+  font-style: italic
+
+.token.entity
+  cursor: help
diff --git a/_sass/2015/components/next-article.sass b/_sass/2015/components/next-article.sass
new file mode 100644
index 000000000..485114ad9
--- /dev/null
+++ b/_sass/2015/components/next-article.sass
@@ -0,0 +1,142 @@
+/*
+ * .next-article -- lead into the next article
+ */
+
+.next-article
+  $bg: darken(#8e44ad, 15%)
+  $textcolor: saturate(mix(white, $bg, 85%), 90%)
+
+  &
+    display: block
+    padding: 0
+    margin-left: 40px
+    margin-right: 40px
+    position: relative
+
+
+  &, &:hover, &:focus
+    box-shadow: none
+
+  &:after
+    content: ''
+    display: block
+    position: absolute
+    left: -20px
+    right: -20px
+    bottom: 0
+    border-bottom: solid 1px $hairline
+
+  // suppress its hairline
+  & + .about-the-site:before
+    display: none
+
+  @media (max-width: 768px)
+    margin-left: 0
+    margin-right: 0
+
+    // remove horizontal line
+    & + .about-the-site:before
+      display: none
+
+  .container
+    display: block
+    text-align: center
+    padding: 10em 20px
+
+    @media (min-width: 769px)
+      margin-top: 8em
+      padding: 8em 20px
+
+  .h3
+    display: block
+    margin: 0 auto auto
+    padding: 0
+    font-size: 2.2em
+    line-height: 1.3em
+    +bold-font
+    color: white
+    transition: all 250ms linear
+
+    // &:hover > span
+      // box-shadow: inset 0 -2px $accent
+      // text-shadow: 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg
+
+    @media (max-width: 768px)
+      font-size: 1.5em
+
+  .h3, .excerpt
+    max-width: $page-width * 0.9
+
+  .h3 + .excerpt
+    margin-top: 0.5em
+
+  .excerpt
+    display: block
+    margin-left: auto
+    margin-right: auto
+    font-size: 1em
+    line-height: 1.6em
+
+  .big-button
+    margin-top: 2em
+
+  h3 a:hover,
+  h3 a:focus
+    color: $accent
+
+  .heading
+    display: block
+    +caps-font
+    font-size: 0.7em
+    margin-bottom: 1em
+
+  .heading:before
+    font-family: Ionicons
+    content: '\f4a8'
+    margin-right: 15px
+    font-size: 16px
+    display: inline-block
+    vertical-align: middle
+    color: $accent
+
+  .big-button,
+  a.big-button
+    background: transparent
+
+    &, &:visited
+      border-color: $accent
+      color: white
+
+    &:hover, &:focus
+      background: $accent
+      border-color: transparent
+
+@mixin recolor-article($bg, $bg2, $url: '', $a: 0.9, $angle: 177deg)
+  $w: 1500
+  $h: 10
+  $textcolor: mix(white, $bg, 75%)
+  $notch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$w}' height='#{$h}' version='1.1'><polyline fill='white' points='#{$w},0 0,0 0,#{$h}'/></svg>"
+
+  &
+    background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 0%), $a), rgba(adjust-color($bg2, $lightness: 0%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
+  &:hover, &:focus
+    background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 1%), $a), rgba(adjust-color($bg2, $lightness: 1%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
+  .excerpt, .heading
+    color: $textcolor
+
+.next-article
+  &
+    +recolor-article(#612e76, #5867cc)
+  &.-v2
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#027d65, #00536b, "bg/pebbles.jpg", 0.7, $angle: 35deg)
+  &.-v3
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#1d2434, #202a3e, "bg/roughwall.jpg", 0.9, $angle: 1deg)
+  &.-v4
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#902014, #c77e0a, "bg/woodfloor.jpg", 0.45, $angle: 1deg)
+  &.-v5
+    text-shadow: 0 1px 1px rgba(black, 0.5)
+    +recolor-article(#17283a, #25295e, "bg/stairs.jpg", 0.85, $angle: 1deg)
+  // &.next-article
diff --git a/_sass/2015/components/post-headline.sass b/_sass/2015/components/post-headline.sass
new file mode 100644
index 000000000..7a950fafd
--- /dev/null
+++ b/_sass/2015/components/post-headline.sass
@@ -0,0 +1,56 @@
+/*
+ * .post-headline -- H1's of posts
+ */
+
+.post-headline
+  &
+    margin: 1.5em auto 3em auto
+    text-align: center
+
+  .post-icon
+    margin-bottom: 2px
+
+  h1
+    text-align: center
+    margin-bottom: 0
+    +headline-font
+    +headline-font-size(2.8em, 1.2)
+    width: 80%
+    margin-left: auto
+    margin-right: auto
+
+    @media (max-width: 768px)
+      +headline-font-size(2em)
+
+  .meta
+    display: block
+    text-align: center
+    margin: 0
+    margin-top: 1em
+    font-weight: normal
+    +caps-font
+    font-size: 0.8em
+
+  .meta .author,
+  .meta .date
+    margin: 0 5px
+    padding-bottom: 2px
+
+  .meta a,
+  .meta a:visited
+    color: $gray
+
+  .meta a:hover,
+  .meta a:focus
+    &, span
+      color: $gray
+
+    time
+      color: $black
+      box-shadow: inset 0 -2px $accent
+
+  a, a:visited, a:focus, a:hover
+    color: $black
+    text-decoration: none
+    box-shadow: none
+
diff --git a/_sass/2015/components/post-icon.sass b/_sass/2015/components/post-icon.sass
new file mode 100644
index 000000000..1bf376f1c
--- /dev/null
+++ b/_sass/2015/components/post-icon.sass
@@ -0,0 +1,58 @@
+/*
+ * .post-icon -- category icons
+ */
+
+$icon-size: 56px
+
+@mixin iconify($color, $text)
+  &
+    background: $color
+    color: lighten($color, 50%)
+    box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba($color, 0.2), 1px 3px rgba($color, 0.3)
+
+  span:after
+    content: $text
+
+.post-icon,
+abbr.post-icon
+  border: 0
+  margin: 0
+  display: inline-block
+  width: $icon-size
+  height: $icon-size
+  line-height: $icon-size + 2px
+  text-align: center
+  border-radius: 50%
+  color: #aaa
+  background: #eee
+
+  +body-font
+  font-size: 16px
+  letter-spacing: 1px
+
+  span:after
+    content: attr(data-label)
+    font-size: 0.9em
+    position: relative
+    top: -1px
+
+  @media (max-width: 480px)
+    transform: scale(0.75)
+
+  &.-icon-css
+    +iconify(#3498db, 'CSS')
+    font-size: 14px
+    line-height: $icon-size + 2px
+  &.-icon-development
+    +iconify(#34495e, 'DEV')
+    font-size: 14px
+    line-height: $icon-size + 2px
+  &.-icon-ruby
+    +iconify(#e74c3c, 'RB')
+    text-indent: 2px
+  &.-icon-javascript
+    +iconify(#2ecc71, 'JS')
+    text-indent: 1px
+  &.-icon-productivity
+    +iconify(#2ecc71, 'PROD')
+    text-indent: 1px
diff --git a/_sass/2015/components/post-index.sass b/_sass/2015/components/post-index.sass
new file mode 100644
index 000000000..87586d057
--- /dev/null
+++ b/_sass/2015/components/post-index.sass
@@ -0,0 +1,73 @@
+/*
+ * .post-index (et al) -- utility classes
+ */
+
+.post-index
+  &
+    margin: 0 auto 4em auto
+    position: relative
+    padding-top: 4em
+    font-size: 0.9em
+
+  .container
+    overflow: hidden
+    max-width: $page-width
+    margin: 0 auto
+
+  h3
+    +caps-font
+    color: $gray
+    font-size: 1em
+
+.post-index-item
+  display: block
+  overflow: hidden
+  padding: 6px 20px
+  border-top: solid 1px $hairline
+
+  &, &:hover, &:focus
+    box-shadow: none
+
+  &:hover, &:focus
+    .article
+      transition: none
+
+  .date
+    display: block
+
+  .date
+    width: 100px
+    font-size: 0.8em
+    color: $gray
+
+  @media (min-width: 768px)
+    padding-left: 0
+    padding-right: 0
+
+    .date, .tag
+      margin-top: 0.2em
+
+    .date, article
+      float: left
+
+    .tag
+      float: right
+
+  .article
+    color: $text
+    margin-right: 3px
+    transition: all 100ms linear
+
+  &:hover .article
+    color: $accent
+
+  &:nth-of-type(1) .article,
+  &:nth-of-type(2) .article,
+  &:nth-of-type(3) .article,
+  &:nth-of-type(4) .article
+    +bold-font
+
+  .tag
+    color: $gray
+    font-weight: normal
+    font-size: 0.8em
diff --git a/_sass/2015/components/post-list.sass b/_sass/2015/components/post-list.sass
new file mode 100644
index 000000000..ed0f9ed63
--- /dev/null
+++ b/_sass/2015/components/post-list.sass
@@ -0,0 +1,23 @@
+.post-item
+  max-width: $page-width
+  margin: 0 auto
+
+.post-list
+  margin: 40px auto
+  padding: 20px
+
+  @media (max-width: 768px)
+    margin: 0 auto
+
+.post-list > .post-item:not(:first-child)
+  &:before
+    content: ''
+    display: block
+    width: 150px
+    height: 1px
+    background: $hairline
+    margin: 7em auto
+
+    @media (max-width: 768px)
+      margin: 4em auto
+
diff --git a/_sass/2015/components/site-header.sass b/_sass/2015/components/site-header.sass
new file mode 100644
index 000000000..a5c34b84e
--- /dev/null
+++ b/_sass/2015/components/site-header.sass
@@ -0,0 +1,17 @@
+
+.site-header
+  text-align: center
+  padding: 0 20px
+
+  .container
+    padding: 15px 20px
+    font-size: 0.9em
+    color: rgba($gray, 0.6)
+    border-bottom: solid 1px $hairline
+
+  em
+    +italic-font
+    +italic-font-size(1.1em)
+    font-size: 1.1em
+    color: $text
+
diff --git a/_sass/2015/components/social-list.sass b/_sass/2015/components/social-list.sass
new file mode 100644
index 000000000..c6ddbe737
--- /dev/null
+++ b/_sass/2015/components/social-list.sass
@@ -0,0 +1,73 @@
+/*
+ * .social-list -- social share icons
+ */
+
+.social-list
+  &, li
+    margin: 0
+    padding: 0
+
+  &
+    display: block
+    text-align: center
+    width: 100%
+    margin-top: 2em
+
+    @media (min-width: 768px)
+      margin-top: 4em
+
+  &.-top
+    margin-top: -2em
+
+    @media (min-width: 768px)
+      margin-top: -1em
+
+  li
+    display: inline-block
+
+  a
+    display: inline-block
+    padding: 6px
+    text-align: center
+    box-shadow: none
+
+  a:before, a:after
+    transition: all 100ms linear
+
+  .text
+    display: none
+
+  a:before
+    font-family: 'Ionicons'
+    font-weight: normal
+    font-style: normal
+    font-size: 18px
+    width: 40px
+    height: 40px
+    line-height: 40px
+    display: inline-block
+    text-align: center
+    border: solid 2px transparent
+    border-radius: 50%
+
+  @mixin socialiconify($color, $content, $filled)
+    &
+      color: darken($lightgray, 10%)
+
+    &:hover,
+    &:focus
+      color: $color
+    &:before
+      content: $filled
+    &:hover:before,
+    &:focus:before
+      border-color: $color
+      content: $filled
+
+  .facebook a
+    +socialiconify(#4c66a4, '\f230', '\f231')
+  .twitter a
+    +socialiconify(dodgerblue, '\f242', '\f243')
+  .googleplus a
+    +socialiconify(#f53, '\f234', '\f235')
+
diff --git a/_sass/2015/elements/body.sass b/_sass/2015/elements/body.sass
new file mode 100644
index 000000000..bd074d32b
--- /dev/null
+++ b/_sass/2015/elements/body.sass
@@ -0,0 +1,157 @@
+/*
+ * html base (html, body)
+ */
+
+*
+  +antialias
+
+html
+  font-size: $body-font-size
+  line-height: $body-line-height
+  background: $bg
+  color: $text
+
+  @media (max-width: 768px)
+    font-size: floor($body-font-size * 14/17)
+
+html
+  transition: opacity 200ms linear
+  opacity: 1
+
+html, input, textarea, td, th
+  +body-font
+
+html, body
+  overflow-x: hidden
+
+/*
+ * fouc prevention
+ */
+
+body
+  transition: opacity 100ms linear
+
+html.no-js *
+  opacity: 0
+
+/*
+ * basic styles (a, p, img...)
+ */
+
+a, a:visited
+  color: $text
+  text-decoration: none
+  box-shadow: inset 0 -1px rgba(#888, 0.3)
+  transition: all 100ms linear
+
+a:focus, a:hover
+  box-shadow: inset 0 -2px $accent
+  color: $black
+
+strong, b
+  &, a, a:visited
+    color: $black
+
+h3, p, ul, ol
+  margin: 1.5em 0
+
+/*
+ * iframes
+ */
+
+p > iframe
+  margin: 0 auto
+  display: block
+
+/*
+ * lists
+ */
+
+ul, ol
+  padding-left: 1.5em
+
+ul
+  &
+    list-style: none
+
+  > li
+    position: relative
+
+  > li:before
+    content: ''
+    display: block
+    position: absolute
+    left: -1.4em
+    top: 0
+    margin-top: 0.7em
+    width: 4px
+    height: 4px
+    border-radius: 50%
+    border: solid 2px $lightgray
+
+    @media (max-width: 768px)
+      width: 3px
+      height: 3px
+
+/*
+ * headings
+ */
+
+h2
+  &, a, a:visited
+    color: $black
+
+h2
+  text-align: center
+  +headline-font
+  +headline-font-size(2em, 1.4)
+  margin: 2em auto 0 auto
+  @media (max-width: 768px)
+    +headline-font-size(1.6em)
+
+@media (min-width: 769px)
+  h2:before,
+  h2:after
+    content: ''
+    display: inline-block
+    vertical-align: middle
+    width: 46px
+    height: 1px
+    background: $lightgray
+    margin: 0 30px
+
+h3
+  +bold-font
+  +bold-font-size(1.1em)
+  margin-top: 2em
+
+  &, a, a:visited
+    color: $black
+
+  @media (max-width: 768px)
+    margin-top: 1.5em
+
+h3 + p
+  margin-top: -1.7em
+
+/*
+ * images
+ */
+
+p > img:first-child:last-child
+  display: block
+  margin: 0 auto
+  max-width: 100%
+
+code
+  +mono-font
+  +mono-font-size(0.9em)
+
+hr
+  width: 200px
+  height: 1px
+  border: 0
+  background: $lightgray
+  margin: 3em auto
+  display: block
+
diff --git a/_sass/2015/elements/code.sass b/_sass/2015/elements/code.sass
new file mode 100644
index 000000000..ed80ba786
--- /dev/null
+++ b/_sass/2015/elements/code.sass
@@ -0,0 +1,119 @@
+$term-border: mix($accent, white, 50%)
+
+/*
+ * pre > code -- code blocks
+ */
+
+pre > code
+  +mono-font
+  +mono-font-size(0.82em)
+  color: $text
+  padding-right: 20px
+  // box-shadow: inset 1px 1px rgba(black, 0.06)
+
+pre
+  padding: 20px 50px
+  border-radius: 4px
+  background: $wash
+  margin: 2.2em -50px
+  line-height: 1.2em
+
+  @media (min-width: 768px)
+    border-top: solid 1px #eef3fa
+    border-bottom: solid 1px #c7d7ee
+    border-radius: 4px
+
+  @media (max-width: 768px)
+    padding: 20px
+    margin: 2em -20px
+    background: darken($wash, 3%)
+
+  @media (max-width: 660px)
+    border-radius: 0
+
+pre + pre
+  margin-top: -1.5em
+
+pre.medium
+  > code
+    font-size: 1em
+  @media (min-width: 768px)
+    padding-top: 30px
+    padding-bottom: 30px
+
+pre.large
+  > code
+    font-size: 1.1em
+    line-height: 1.4em
+  @media (min-width: 768px)
+    padding-top: 30px
+    padding-bottom: 30px
+
+pre.terminal,
+pre.light
+  &
+    background: white
+    border: solid 1px $term-border
+    position: relative
+
+pre.light
+  background: #fdfdff
+
+pre.terminal
+  &
+    padding-top: 56px
+
+  &.large
+    padding-top: 65px
+
+  &:before
+    content: ''
+    display: block
+    height: 34px
+    line-height: 34px
+    background: white
+    border-bottom: solid 1px $term-border
+    border-top-left-radius: 3px
+    border-top-right-radius: 3px
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    +bold-font
+
+  &:after
+    content: ''
+    position: absolute
+    display: block
+    width: 4px
+    height: 4px
+    border-radius: 50%
+    left: 15px
+    top: 15px
+    font-size: 20px
+    background-color: $term-border
+    box-shadow: 20px 0 $term-border, 40px 0 $term-border
+
+  @media (max-width: 768px)
+    margin-left: 0
+    margin-right: 0
+
+pre + pre
+  margin-top: -1.7em
+
+@media (min-width: 769px)
+  pre.cursor > code > :last-child:after
+    content: ''
+    display: inline-block
+    width: 3px
+    height: 1em
+    transform: scaleY(1.5) translateY(0.1em)
+    margin-left: 0.4em
+    background-color: $accent
+    -webkit-animation: blink 700ms steps(2,end) infinite
+    -moz-animation: blink 700ms steps(2,end) infinite
+    animation: blink 700ms steps(2,end) infinite
+
+h3 + pre,
+h3 + table
+  margin-top: -1em
diff --git a/_sass/2015/elements/table.sass b/_sass/2015/elements/table.sass
new file mode 100644
index 000000000..680346463
--- /dev/null
+++ b/_sass/2015/elements/table.sass
@@ -0,0 +1,73 @@
+/*
+ * table
+ */
+
+table
+  min-width: 100%
+  margin-top: 2em
+  margin-bottom: 2em
+  font-size: 0.9em
+  border-bottom: solid 1px $gray
+
+thead > tr:first-child > th,
+thead > tr:first-child > td,
+tbody > tr:first-child > th,
+tbody > tr:first-child > td
+  border-top: solid 1px $gray
+
+td, th
+  text-align: left
+  border-top: solid 1px $hairline
+  padding: 8px 10px
+
+th
+  +bold-font
+  color: $black
+
+td:first-child,
+th:first-child
+  text-align: left
+  padding-left: 0
+
+td:last-child,
+th:last-child
+  padding-right: 0
+
+table.no-head
+  thead
+    display: none
+
+table.shortcuts
+  &
+    table-layout: fixed
+
+  thead
+    display: none
+
+  th:nth-child(1), td:nth-child(1)
+    width: 25%
+
+  th:nth-child(2), td:nth-child(2)
+    width: 75%
+
+  td:first-child > code
+    background: #fcfcfc
+    padding: 5px 10px
+    border-radius: 2px
+
+table.lite-headings
+  &
+    border-bottom: solid 1px mix($gray, $lightgray, 50%)
+    
+  th
+    color: mix($gray, $lightgray, 50%)
+    font-size: 0.9em
+
+  thead > tr:first-child > td,
+  thead > tr:first-child > th
+    border-top: solid 1px mix($gray, $lightgray, 50%)
+
+  tbody > tr:first-child > td,
+  tbody > tr:first-child > th
+    border-top: solid 1px $hairline
+
diff --git a/_sass/2015/helpers/blink.sass b/_sass/2015/helpers/blink.sass
new file mode 100644
index 000000000..b123b3ad1
--- /dev/null
+++ b/_sass/2015/helpers/blink.sass
@@ -0,0 +1,11 @@
+@keyframes blink
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@-webkit-keyframes blink
+  0%
+    opacity: 0
+  100%
+    opacity: 1
diff --git a/_sass/2015/helpers/general.sass b/_sass/2015/helpers/general.sass
new file mode 100644
index 000000000..18ea7100e
--- /dev/null
+++ b/_sass/2015/helpers/general.sass
@@ -0,0 +1,27 @@
+/*
+ * .center (et al) -- utility classes
+ */
+
+.center
+  text-align: center
+
+.spaced
+  @media (min-width: 769px)
+    margin-top: 4em
+    margin-bottom: 4em
+
+.spaced-more
+  @media (min-width: 769px)
+    margin-top: 6em
+    margin-bottom: 6em
+
+.spaced-less
+  @media (min-width: 769px)
+    margin-top: 2em
+    margin-bottom: 2em
+
+.wide
+  @media (min-width: 920px)
+    width: 140%
+    margin-left: -25%
+
diff --git a/_sass/2015/helpers/margins.sass b/_sass/2015/helpers/margins.sass
new file mode 100644
index 000000000..7504c1999
--- /dev/null
+++ b/_sass/2015/helpers/margins.sass
@@ -0,0 +1,43 @@
+/*
+ * .top/.bottom -- margin helpers
+ */
+
+.top-collapse-0
+  margin-top: 0
+.top-collapse-1
+  margin-top: -1em
+.top-collapse-2
+  margin-top: -2em
+.top-collapse-4
+  margin-top: -4em
+
+.top-space-0
+  margin-top: 0
+.top-space-1
+  margin-top: 1em
+.top-space-2
+  margin-top: 2em
+.top-space-4
+  margin-top: 2em
+  @media (min-width: 769px)
+    margin-top: 4em
+
+.bottom-collapse-0
+  margin-bottom: 0
+.bottom-collapse-1
+  margin-bottom: -1em
+.bottom-collapse-2
+  margin-bottom: -2em
+.bottom-collapse-4
+  margin-bottom: -4em
+
+.bottom-space-0
+  margin-bottom: 0
+.bottom-space-1
+  margin-bottom: 1em
+.bottom-space-2
+  margin-bottom: 2em
+.bottom-space-4
+  margin-bottom: 2em
+  @media (min-width: 769px)
+    margin-bottom: 4em
diff --git a/_sass/2015/style.sass b/_sass/2015/style.sass
new file mode 100644
index 000000000..e1a919afe
--- /dev/null
+++ b/_sass/2015/style.sass
@@ -0,0 +1,46 @@
+// base colors
+$text:        #555
+$black:       #151515
+$bg:          #fff
+$wash:        #f4f6f8
+
+// grays
+$gray:        #939aa1
+$lightgray:   #c0d3da
+$hairline:    #eef3fa
+
+// accents
+$accent:      #1ea3ff
+$accent2:     #f53
+
+// metrics
+$page-width:  620px
+
+@import url('//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css')
+@import url('//cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css')
+
+@import 'base/utils'
+@import 'base/typography'
+@import 'base/normalize'
+
+@import 'elements/body'
+@import 'elements/table'
+@import 'elements/code'
+
+@import 'components/about-the-site'
+@import 'components/big-button'
+@import 'components/brief-intro'
+@import 'components/full-image'
+@import 'components/hint'
+@import 'components/hljs'
+@import 'components/next-article'
+@import 'components/post-headline'
+@import 'components/post-icon'
+@import 'components/post-index'
+@import 'components/post-list'
+@import 'components/site-header'
+@import 'components/social-list'
+
+@import 'helpers/general'
+@import 'helpers/margins'
+@import 'helpers/blink'
diff --git a/assets/2015/style.sass b/assets/2015/style.sass
new file mode 100644
index 000000000..76e5efe81
--- /dev/null
+++ b/assets/2015/style.sass
@@ -0,0 +1,4 @@
+---
+type: other
+---
+@import '2015/style.sass'