diff --git a/theme/static/css/pygments.css b/theme/static/css/pygments.css
new file mode 100644
index 0000000..ffc1611
--- /dev/null
+++ b/theme/static/css/pygments.css
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+
+/* See available classes at https://bitbucket.org/birkenfeld/pygments-main/src/default/pygments/token.py */
+
+.hll { background-color: #ffd800; display: block;}
+.w { color: #bbbbbb; }
+/* .esc (Escape) */
+.err { color: #a61717; background-color: #e3d2d2; }
+/* .x (Other) */
+
+/* Keyword */
+.k { font-weight: bold; }
+.kc { font-weight: bold; }
+.kd { font-weight: bold; }
+.kn { font-weight: bold; }
+.kp { font-weight: bold; }
+.kr { font-weight: bold; }
+.kt { color: #445588; font-weight: bold; }
+
+/* Name */
+.n { color: #333333; }
+.na { color: teal; }
+.nb { color: #0086b3; }
+.bp { color: #1d3e81 }
+.nc { color: #445588; font-weight: bold; }
+.no { color: teal; }
+.nd { color: #3c5d5d; font-weight: bold }
+.ni { color: purple; }
+.ne { color: #990000; font-weight: bold; }
+.nf { color: #990000; font-weight: bold; }
+/* .py (Name.Property) */
+.nl { color: #990000; font-weight: bold }
+.nn { color: #555555; }
+/* .nx (Name.Other) */
+.nt { color: navy; }
+.nv { color: teal; }
+.vc { color: teal; }
+.vg { color: teal; }
+.vi { color: teal; }
+
+/* Literal */
+/* .l (Literal) */
+/* .ld (Literal.Date) */
+
+/* String */
+.s { color: #dd1144; }
+.sb { color: #dd1144; }
+.sc { color: #dd1144; }
+.sd { color: #dd1144; }
+.s2 { color: #dd1144; }
+.se { color: #dd1144; }
+.sh { color: #dd1144; }
+.si { color: #dd1144; }
+.sx { color: #dd1144; }
+.sr { color: #009926; }
+.s1 { color: #dd1144; }
+.ss { color: #990073; }
+
+/* Number */
+.m { color: #009999; }
+/* .mb (Number.Bin) */
+.mf { color: #009999; }
+.mh { color: #009999; }
+.mi { color: #009999; }
+.il { color: #009999; }
+.mo { color: #009999; }
+
+/* Operator */
+.o { font-weight: bold; }
+.ow { font-weight: bold; }
+
+/* .p (Punctuation) */
+
+/* Comment */
+.c { color: #999988; font-style: italic; }
+.cm { color: #999988; font-style: italic; }
+.cp { color: #999999; font-weight: bold; font-style: italic; }
+.c1 { color: #999988; font-style: italic; }
+.cs { color: #999999; font-weight: bold; font-style: italic; }
+
+/* Generic */
+/* .g (Generic) */
+.gd { color: #000000; background-color: #ffdddd; }
+.gd .x { color: #000000; background-color: #ffaaaa; }
+.ge { font-style: italic; }
+.gr { color: #aa0000; }
+.gh { color: #999999; }
+.gi { color: #000000; background-color: #ddffdd; }
+.gi .x { color: #000000; background-color: #aaffaa; }
+.go { color: #888888; }
+.gp { color: #555555; }
+.gs { font-weight: bold; }
+.gu { color: #800080; font-weight: bold; }
+.gt { color: #aa0000; }
diff --git a/theme/static/css/style.scss b/theme/static/css/style.scss
new file mode 100644
index 0000000..21212cb
--- /dev/null
+++ b/theme/static/css/style.scss
@@ -0,0 +1,374 @@
+@charset "UTF-8";
+
+$black: #000000;
+$white: #ffffff;
+$light-grey: #eeeeee;
+$med-grey: #5f5f5f;
+$dark-grey: #202020;
+$bg-grey: #FAFAFA;
+
+$code-border: #c7c7c7;
+$code-background: #f6f6f6;
+$code-linebg: #dddddd;
+
+$accent: #0e94ec;
+$danger: red;
+
+$sans: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+$mono: monospace;
+
+$border_color: #c2c2c2;
+$pag_label_size: 60px;
+$logo_size: 150px;
+
+$content_size: 640px;
+$horiz_pad: 40px;
+
+$main_font_size: 1rem;
+$nav_font_size: 1rem;
+$subtitle_font_size: 0.9rem;
+$code_font_size: 1rem;
+$article_meta_font_size: 0.8rem;
+$pagination_font_size: 0.9rem;
+$footer_font_size: 0.7rem;
+
+//The minimum size the screen can be without scaling the main content
+$min_screen: floor((($content_size + $horiz_pad * 2) * 1.33));
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: $bg-grey;
+  color: $dark-grey;
+  font-family: $sans;
+  font-size: $main_font_size;
+  min-width: 300px;
+}
+
+a {
+  color: $black;
+  text-decoration: none;
+}
+
+a[href]:not(.nohover) {
+  &:hover{
+    color: $accent;
+  }
+}
+
+hr {
+  background-color: $border_color;
+  height: 1px;
+  border: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+aside {
+  div#user_meta {
+    padding: $horiz_pad 20px $horiz_pad 20px;
+    text-align: center;
+
+    img#logo {
+        width: $logo_size;
+        height: $logo_size;
+        border-radius: 50%;
+        border: 5px solid $black;
+        background-color: $black;
+        box-shadow: 0px 0px 1px $black;
+    }
+
+    h2 {
+      margin: 15px 0 5px 0;
+    }
+
+    p {
+      margin: 0px;
+      font-size: $subtitle_font_size;
+    }
+
+    i {
+      width: 30px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    div.social {
+      margin-top:15px;
+
+      a {
+        display: inline-block;
+        height: 30px;
+      }
+    }
+
+    ul {
+      margin: 0px;
+      padding-left: 0px;
+      list-style-type: none;
+
+      li {
+        line-height: 2em;
+
+        a {
+          i {
+              padding-left: 5px;
+          }
+        }
+      }
+    }
+  }
+}
+
+main {
+  position: relative;
+  width: 100%;
+  margin: auto;
+
+  header {
+    padding: 0px $horiz_pad 0px $horiz_pad;
+    border-top: $border_color 1px solid;
+    border-bottom: $border_color 1px solid;
+    text-align: center;
+    color: $med-grey;
+
+    p {
+      font-weight: bold;
+      font-size: $nav_font_size;
+      text-transform: uppercase;
+    }
+
+    p#header {
+      color: $black;
+    }
+
+    p:not(#header){
+      a {
+        color: $med-grey;
+        &:hover{
+          color: $accent;
+        }
+      }
+    }
+  }
+
+  article {
+    padding: 10px $horiz_pad 10px $horiz_pad;
+    max-width: $content_size;
+    margin: auto;
+
+    div.article_title {
+    }
+
+    div.article_text {
+      line-height: 1.375em;
+      a {
+        text-decoration: underline;
+      }
+
+      @mixin codeformat {
+        color: black;
+        font-size: $code_font_size;
+        font-family: $mono;
+      }
+
+      code {
+        @include codeformat;
+        padding: 1px 3px;
+        background: $light-grey;
+      }
+
+      pre {
+        @include codeformat;
+        line-height: 1.25;
+        margin-bottom: 0px;
+        margin-top: 0px;
+        padding-top: 5px;
+        padding-bottom: 10px;
+      }
+
+      div.highlight {
+        overflow: auto;
+      }
+
+      div.highlight pre {
+        display: inline-block;
+        padding-left: 10px;
+        overflow-x: auto;
+        border: 1px solid $code-border;
+        border-left: 3px solid $accent;
+        background: $code-background;
+      }
+
+      /* Line numbers are enabled */
+      table.highlighttable {
+        table-layout: fixed;
+        width: 100%;
+        border: 1px solid $code-border;
+        border-collapse: collapse;
+
+        pre {
+          border: none;
+        }
+
+        td {
+          padding: 0px;
+        }
+
+        td.linenos {
+          width: 30px;
+          overflow: hidden;
+          text-align: right;
+          border-left: 3px solid $accent;
+          border-right: 1px solid $code-border;
+          background: $code-linebg;
+          vertical-align:top;
+
+          div.linenodiv pre {
+            padding-right: 4px;
+            float: right;
+          }
+        }
+      }
+
+      div.admonition {
+
+        border-width: 1px 1px 1px 7px;
+        border-radius: 10px;
+        border-style: solid;
+        border-color: $code-border;
+        border-left-color: $dark-grey;
+        background-color: $code-background;
+
+        &.update, &.hint, &.important, &.note, &.tip {
+          border-left-color: $accent;
+        }
+
+        &.warning, &.attention, &.caution, &.danger {
+          border-left-color: $danger;
+        }
+
+        p {
+          margin: 0px;
+          padding: 10px 15px;
+        }
+
+        p.admonition-title{
+          text-transform: uppercase;
+          font-weight: bold;
+          padding: 5px 15px;
+          border-bottom: 1px solid $code-border;
+        }
+      }
+
+      blockquote {
+        margin: 22px 2px 22px 2px;
+        padding-left: $horiz_pad;
+        color: $med-grey;
+        font-style: italic;
+      }
+    }
+
+    div.article_meta {
+      font-size: $article_meta_font_size;
+      color: $med-grey;
+    }
+
+    div#article_comments{
+      padding-top: 10px;
+      padding-bottom: 10px;
+
+      i {
+        padding-right: 10px;
+      }
+    }
+  }
+
+  footer {
+    border-top: $border_color 1px solid;
+    padding: 30px $horiz_pad 30px $horiz_pad;
+
+    div#paginator {
+      font-weight: bold;
+      font-size: $pagination_font_size;
+      text-transform: uppercase;
+      overflow: auto;
+      text-align: center;
+
+      div{
+        display: inline-block;
+      }
+
+      span {
+        width: $pag_label_size;
+      }
+
+      span#left {
+        float: left;
+        text-align: left;
+      }
+
+      span#right {
+        float: right;
+        text-align: right;
+      }
+    }
+  }
+
+  div#ending_message {
+    border-top: $border_color 1px solid;
+    padding: 0 $horiz_pad 0 $horiz_pad;
+    color: $med-grey;
+    font-size: $footer_font_size;
+  }
+}
+
+@media screen and (min-width: $min_screen) {
+  aside {
+    width: 25%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    h2 {
+      margin: 10px 0 0 0;
+    }
+
+    div#user_meta {
+      max-width: 192px;
+      text-align: right;
+      margin: 0 20px 0 auto;
+    }
+  }
+
+  main {
+    position: absolute;
+    top: 0;
+    left: 25%;
+    width: 75%;
+    margin-left: -1px;
+    border-left: $border_color 1px solid;
+    overflow-x: hidden;
+    overflow-y: hidden;
+
+    header {
+      padding: 10px $horiz_pad 10px $horiz_pad;
+      border-top: 0;
+      text-align: left;
+    }
+
+    article {
+      width: $content_size;
+      margin: 0;
+    }
+
+    footer{
+      div#paginator {
+        width: $content_size;
+      }
+    }
+  }
+}
diff --git a/theme/static/js/email.js b/theme/static/js/email.js
new file mode 100644
index 0000000..90b736e
--- /dev/null
+++ b/theme/static/js/email.js
@@ -0,0 +1,21 @@
+// Unmangle email addresses on page load
+
+function unmangleEmail(){
+  var e = document.querySelectorAll(".email");
+  for (var i = 0; i < e.length; i++) {
+    var email = e[i].getAttribute("data-email")
+    var title = e[i].getAttribute("data-title")
+    if (email){
+      e[i].href = email.split("").reverse().join("");
+      e[i].removeAttribute("data-email");
+      e[i].removeAttribute("data-title");
+      e[i].removeAttribute("class");
+      if (title){
+        e[i].setAttribute("title", title);
+      }
+      else{
+        e[i].removeAttribute("title");
+      }
+    }
+  }
+}
diff --git a/theme/static/js/lw-timeago/README.md b/theme/static/js/lw-timeago/README.md
new file mode 100644
index 0000000..7d9a9eb
--- /dev/null
+++ b/theme/static/js/lw-timeago/README.md
@@ -0,0 +1,60 @@
+lw-timeago
+==========
+
+A lightweight implementation of the [Timeago jQuery plugin](http://timeago.yarp.com/), allowing fuzzy timestamps to be dynamically generated and displayed.
+
+Example
+-------
+
+#### Original
+```html
+<time datetime="2012-02-11T22:05:00-05:00">Feb 11, 2012</time>
+```
+
+#### Outputs
+```html
+<time title="Feb 11, 2012" datetime="2012-02-11T22:05:00-05:00">3 years ago</time>
+<time title="2/11/2012, 10:05:00 PM" datetime="2012-02-11T22:05:00-05:00">3 years ago on Feb 11, 2012</time>
+```
+
+Configuration
+-------------
+In the `config` section of the script there are a few options that can be configured.
+- `whitelist`: Only process `<time>` tags with this attribute. Setting it to `null` disables whitelisting (all `<time>` tags are processed).
+- `keepDate`: If `true`, don't replace the date in the `<time>` tags, prepend the fuzzy time to it (see the second example above).
+
+Additionally, the text can all be customized.
+
+Usage
+-----
+Step 2 can be skipped if `whitelist` is set to `null` in the config.
+
+1. Markup times in the HTML source with `<time>` tags, making sure they have a `datetime` attribute. The datetime attribute *MUST* be ISO 8601 formatted.
+2. For all `<time>` tags that should be converted to fuzzy times, add `data-timeago` attributes to them.
+3. Include the `lw-timeago.js` file in the html head (`<script src="lw-timeago.js" type="text/javascript"></script>`).
+4. Call the `lw_timeago()` function when the page loads (`<script type="text/javascript">window.addEventListener("load", lw_timeago);</script>`).
+
+License
+-------
+```
+Copyright (c) 2008-2015, Ryan McGeary
+Copyright (c) 2015 Carey Metcalfe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```
diff --git a/theme/static/js/lw-timeago/lw-timeago.js b/theme/static/js/lw-timeago/lw-timeago.js
new file mode 100644
index 0000000..04a5c12
--- /dev/null
+++ b/theme/static/js/lw-timeago/lw-timeago.js
@@ -0,0 +1,91 @@
+var lw_timeago = function() {
+
+  var config = {
+    whitelist: "data-timeago", // Set to null to disable whitelisting
+
+    keepDate: true, // If true, appends the original date after the fuzzy one
+
+    suffixAgo: "ago",
+    suffixFromNow: "from now",
+    on: "on",
+
+    seconds: "less than a minute",
+    minute: "about a minute",
+    minutes: "%d minutes",
+    hour: "about an hour",
+    hours: "%d hours",
+    day: "about a day",
+    days: "%d days",
+    month: "about a month",
+    months: "%d months",
+    year: "about a year",
+    years: "%d years",
+  }
+
+  function inWords(distanceMillis) {
+    // Produce a string representing the milliseconds in a human-readable way
+
+    var suffix = distanceMillis < 0 ? config.suffixFromNow : config.suffixAgo;
+    var seconds = Math.abs(distanceMillis) / 1000;
+    var minutes = seconds / 60;
+    var hours = minutes / 60;
+    var days = hours / 24;
+    var years = days / 365;
+
+    function substitute(string, number) {
+      return string.replace(/%d/i, number);
+    }
+
+    var words =
+      seconds < 45 && substitute(config.seconds, Math.round(seconds)) ||
+      seconds < 90 && substitute(config.minute, 1) ||
+      minutes < 45 && substitute(config.minutes, Math.round(minutes)) ||
+      minutes < 90 && substitute(config.hour, 1) ||
+      hours < 24 && substitute(config.hours, Math.round(hours)) ||
+      hours < 42 && substitute(config.day, 1) ||
+      days < 30 && substitute(config.days, Math.round(days)) ||
+      days < 45 && substitute(config.month, 1) ||
+      days < 365 && substitute(config.months, Math.round(days / 30)) ||
+      years < 1.5 && substitute(config.year, 1) ||
+      substitute(config.years, Math.round(years));
+
+    return words + " " + suffix;
+  }
+
+  function diff(timestamp) {
+    // Get the number of milliseconds distance from the current time
+    return Date.now() - timestamp;
+  }
+
+  function doReplace(){
+    // Go over all <time> elements, grab the datetime attribute, then calculate
+    // and display a fuzzy representation of it.
+
+    var times = document.getElementsByTagName("time")
+    for (var i = 0; i < times.length; i++){
+
+      if (config.whitelist && !times[i].hasAttribute(config.whitelist))
+        break;
+
+      var datetime = times[i].getAttribute("datetime");
+      if (!datetime)
+        break;
+
+      var parsed = new Date(datetime);
+      if (!parsed)
+        break;
+
+      var words = inWords(diff(parsed.getTime()));
+      var title = times[i].innerHTML;
+      if (config.keepDate){
+        words += " " + config.on + " " + times[i].innerHTML;
+        title = parsed.toLocaleString()
+      }
+
+      times[i].title = title;
+      times[i].innerHTML = words;
+    }
+  }
+
+  return doReplace;
+}();
diff --git a/theme/static/js/scroll.js b/theme/static/js/scroll.js
new file mode 100644
index 0000000..6ec5f38
--- /dev/null
+++ b/theme/static/js/scroll.js
@@ -0,0 +1,8 @@
+// Scroll past header on smaller screens
+
+function skipHeader(){
+  if (window.location.pathname != '/' && window.location.pathname != '/index.html'){
+    window.scroll(0, document.getElementById('main').offsetTop);
+  }
+}
+