diff --git a/_sass/_base.scss b/_sass/_base.scss
index d23be8b..e84da7a 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,6 +1,5 @@
-/**
- * Reset some basic elements
- */
+@charset "UTF-8";
+
 body, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, hr,
 dl, dd, ol, ul, figure {
@@ -8,36 +7,25 @@ dl, dd, ol, ul, figure {
   padding: 0;
 }
 
+html, body {
+  height: auto;
+  min-height: 100%;
+}
 
+img {
+  max-width: 100%;
+}
 
-/** Variables **********************************************/
-$base-font-family:              Helvetica, sans-serif;
-$base-line-height:              1.5em;
-$horizontal-spacing-unit:       50px;
-$vertical-spacing-unit:         40px;
-$nav-height:                    56px;
+em img {
+  max-width: 100%;
+  margin-left: 0;
+}
 
-/* portfolio tinkering */
-$img_spacing: 5px;
-$img_height: 275px;
-$caption_font_size: 12px;
-$caption_color: #aaa;
-
-/* COLORS  */
-$red:           #FF3636;
-$orange:        #F29105;
-$blue:          #2698BA;
-$green:         #11D68B;
-$lime_green:    #B7D12A;
-$purple:        #B509AC;
-
-
-$grey-color-dark:   #333;   /* footer */
-$grey-color-light:  #ddd;  /* navigation bar border */
-$text-color:        #666;
-
-/* Set theme color *************************/
-$theme-color:   $purple;
+body {
+          box-sizing: border-box;
+     -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
 
 
 /************************************************************/
@@ -51,7 +39,6 @@ body {
     line-height: $base-line-height;
     font-weight: 100;
     color: $text-color;
-    background-color: $background-color;
     -webkit-text-size-adjust: 100%;
 }
 
diff --git a/_sass/_basscss.scss b/_sass/_basscss.scss
new file mode 100644
index 0000000..c9e1584
--- /dev/null
+++ b/_sass/_basscss.scss
@@ -0,0 +1,25 @@
+/*!
+
+  BASSCSS
+
+  Next-level CSS toolkit - basscss.com
+
+  Made with love by Jxnblk - ©2014 Brent Jackson
+  MIT License http://opensource.org/licenses/MIT
+
+*/
+
+@import 'basscss/base-buttons';
+@import 'basscss/base-forms';
+@import 'basscss/base-reset';
+@import 'basscss/base-typography';
+
+@import 'basscss/buttons-blue';
+
+@import 'basscss/syntax-highlighting';
+@import 'basscss/color-base';
+@import 'basscss/colors';
+
+@import 'basscss/utility-headings';
+@import 'basscss/utility-typography';
+@import 'basscss/utility-white-space';
diff --git a/_sass/_blockquotes.scss b/_sass/_blockquotes.scss
new file mode 100644
index 0000000..e7291ba
--- /dev/null
+++ b/_sass/_blockquotes.scss
@@ -0,0 +1,16 @@
+blockquote {
+  border-left: 5px solid #7a7a7a;
+  font-style: italic;
+  margin-left: $space-1;
+  padding: $space-1;
+}
+
+blockquote footer {
+  background-color: #fff;
+  border-color: transparent;
+  color: #7a7a7a;
+  font-size: .85rem;
+  font-style: normal;
+  text-align: left;
+  padding: 0;
+}
diff --git a/_sass/_clearfix.scss b/_sass/_clearfix.scss
new file mode 100644
index 0000000..b770844
--- /dev/null
+++ b/_sass/_clearfix.scss
@@ -0,0 +1,8 @@
+.clearfix:before, .clearfix:after {
+  content: ' ';
+  display: table;
+}
+
+.clearfix:after {
+  clear: both;
+}
diff --git a/_sass/_code.scss b/_sass/_code.scss
new file mode 100644
index 0000000..b7b274b
--- /dev/null
+++ b/_sass/_code.scss
@@ -0,0 +1,70 @@
+pre,
+pre code {
+  background-color: transparent;
+  border-radius: $pre-border-radius;
+}
+
+pre,
+code {
+  font-family: $monospace-font-family;
+}
+
+code {
+  color: #7a7a7a;
+}
+
+pre {
+  padding: 1.125em;
+  line-height: 1.11;
+  overflow-x: scroll;
+  margin-bottom: 0.88em;
+  background-color: $pre-background-color;
+}
+
+.highlight .p {
+  font-size: 1.125rem;
+  line-height: 1;
+}
+
+pre {
+    counter-reset: line-numbering;
+    white-space: pre;
+    overflow-x: auto;
+    word-break: inherit;
+    word-wrap: inherit;
+}
+
+pre a {
+    background-image: none;
+}
+
+pre a::before {
+  content: counter(line-numbering);
+  counter-increment: line-numbering;
+  padding-right: 1em; /* space after numbers */
+  width: 25px;
+  text-align: right;
+  opacity: 0.7;
+  display: inline-block;
+  color: $light-gray;
+  margin-right: 16px;
+  font-size: 13px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+pre a:first-of-type::before {
+  padding-top: 10px;
+}
+
+pre a:last-of-type::before {
+  padding-bottom: 10px;
+}
+
+pre a:only-of-type::before {
+  padding: 10px;
+}
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
new file mode 100644
index 0000000..b4abe90
--- /dev/null
+++ b/_sass/_footer.scss
@@ -0,0 +1,35 @@
+.site {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-wrap {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
+
+footer {
+  background-color: $grey-color-dark;
+  border-top: $footer-border-top;
+  color: $footer-color;
+  font-size: $footer-font-size;
+  font-weight: $footer-font-weight;
+  padding: $footer-padding;
+  position: fixed;
+    left: 0px;
+    bottom: 0px;
+  width: 100%;
+
+  a { color: #fff; }
+  a:hover { color: $theme-color; }
+}
diff --git a/_sass/_gists.scss b/_sass/_gists.scss
new file mode 100644
index 0000000..bcbd97f
--- /dev/null
+++ b/_sass/_gists.scss
@@ -0,0 +1,8 @@
+.gist,
+.gist .highlight .p {
+  font-size: .75rem;
+}
+
+.gist .lines {
+  width: 100%;
+}
diff --git a/_sass/_header.scss b/_sass/_header.scss
new file mode 100644
index 0000000..abc1abc
--- /dev/null
+++ b/_sass/_header.scss
@@ -0,0 +1,63 @@
+.site-header {
+    border-bottom: 1px solid $grey-color-light;
+    background-color: #fff;
+    opacity: 0.95;
+    position:fixed;
+    left:0px;
+    top:0px;
+    height:56px;
+    width:100%;
+    z-index: 50;
+}
+
+.site-title {
+    font-size: 20px;
+    line-height: $nav-height;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+}
+.site-nav {
+    float: right;
+    line-height: $nav-height;
+    .page-link{
+        line-height: $base-line-height;
+        // Gaps between nav items, but not on the first one
+        &:not(:first-child) {
+            margin-left: 10px;
+        }
+    }
+    @include media-query($on-palm) {
+        position: fixed;
+        top: 0px;
+        right: 10px;
+        text-align: right;
+        &:hover .trigger {
+            display: block;
+            padding-bottom: 5px;
+        }
+        .page-link {
+            display: line;
+        }
+    }
+}
+
+.header-bar{
+    left: 0px;
+    top: 0px;
+    position: relative;
+    font-size: 20px;
+    display: block;
+    opacity: 0.75;
+    width: 100%;
+    text-align: center;
+    padding-top: 25px;
+    line-height: 3em;
+    z-index: 25;
+    h1{
+        color: $theme-color;
+        font-size:75px;
+    }
+    h2{
+        font-size:25px;
+    }
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index f0b60ee..598818b 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -1,71 +1,3 @@
-
-/*****************************************************************************
- * Header
- *****************************************************************************/
-.site-header {
-    border-bottom: 1px solid $grey-color-light;
-    background-color: #fff;
-    opacity: 0.95;
-    position:fixed;
-    left:0px;
-    top:0px;
-    height:56px;
-    width:100%;
-    z-index: 50;
-}
-
-.site-title {
-    font-size: 20px;
-    line-height: $nav-height;
-    letter-spacing: -1px;
-    margin-bottom: 0;
-}
-.site-nav {
-    float: right;
-    line-height: $nav-height;
-    .page-link{
-        line-height: $base-line-height;
-        // Gaps between nav items, but not on the first one
-        &:not(:first-child) {
-            margin-left: 10px;
-        }
-    }
-    @include media-query($on-palm) {
-        position: fixed;
-        top: 0px;
-        right: 10px;
-        text-align: right;
-        &:hover .trigger {
-            display: block;
-            padding-bottom: 5px;
-        }
-        .page-link {
-            display: line;
-        }
-    }
-}
-
-.header-bar{
-    left: 0px;
-    top: 0px;
-    position: relative;
-    font-size: 20px;
-    display: block;
-    opacity: 0.75;
-    width: 100%;
-    text-align: center;
-    padding-top: 25px;
-    line-height: 3em;
-    z-index: 25;
-    h1{
-        color: $theme-color;
-        font-size:75px;
-    }
-    h2{
-        font-size:25px;
-    }
-}
-
 /*****************************************************************************
  * Profile
  *****************************************************************************/
@@ -103,6 +35,7 @@
         td {
             padding: 5px 0;
             vertical-align: top;
+            border: none;
         }
     }
 }
@@ -116,25 +49,6 @@
     padding-top: 20px;
 }
 
-/*****************************************************************************
- * Footer
- *****************************************************************************/
-.site-footer {
-    border-top: 1px solid $grey-color-dark;
-    background-color: $grey-color-dark;
-    color: #aaa;
-    font-size: 72%;
-    padding: 2px;
-    position: fixed;
-        left: 0px;
-        bottom: 0px;
-    width: 100%;
-
-    p { margin-bottom: 0; }
-    a { color: #fff; }
-    a:hover { color: $theme-color; }
-}
-
 /*****************************************************************************
  * Pagination
  *****************************************************************************/
diff --git a/_sass/_links.scss b/_sass/_links.scss
new file mode 100644
index 0000000..9c50696
--- /dev/null
+++ b/_sass/_links.scss
@@ -0,0 +1,53 @@
+a {
+  color: $link-color;
+  background-image: linear-gradient(to top,
+    rgba(0,0,0,0) 13%,
+    rgba($link-color,.8) 13%,
+    rgba($link-color,.8) 18%,
+    rgba(0,0,0,0) 17%
+  );
+  text-shadow: white 1px 0px 0px, white -1px 0px 0px;
+}
+
+a:hover,
+a:focus,
+a:active {
+  border: 0;
+  color: $link-hover-color;
+  text-decoration: none;
+  background-image: linear-gradient(to top,
+    rgba(0,0,0,0) 13%,
+    rgba($link-hover-color,.8) 13%,
+    rgba($link-hover-color,.8) 17%,
+    rgba(0,0,0,0) 17%
+  );
+  text-shadow: white 1px 0px 0px, white -1px 0px 0px;
+}
+
+// Correct issues with buttons
+button,
+.button {
+  text-shadow: none;
+  background-image: none;
+}
+
+.button:hover,
+.button:focus,
+.button:active {
+  color: white;
+  text-shadow: none;
+  background-image: none;
+}
+
+.anchorjs-link {
+    text-shadow: none;
+    background-image: none;
+}
+.anchorjs-link:hover,
+.anchorjs-link:focus,
+.anchorjs-link:active{
+    border: 0;
+    color: $link-hover-color;
+    text-shadow: none;
+    background-image: none;
+}
diff --git a/_sass/_measure.scss b/_sass/_measure.scss
new file mode 100644
index 0000000..f509ccb
--- /dev/null
+++ b/_sass/_measure.scss
@@ -0,0 +1,4 @@
+.measure {
+  margin: 0 auto;
+  max-width: $measure-width;
+}
diff --git a/_sass/_media-queries.scss b/_sass/_media-queries.scss
new file mode 100644
index 0000000..83ff04c
--- /dev/null
+++ b/_sass/_media-queries.scss
@@ -0,0 +1,64 @@
+@media screen and (min-width: $viewport-small) {
+  html {
+    font-size: 16px;
+  }
+
+  h1,
+  .h1 {
+    font-size: $h1;
+  }
+
+  .site-header {
+    text-align: left;
+  }
+
+  .site-nav {
+    margin-top: 0;
+  }
+
+  .site-header a {
+    font-size: $h4;
+  }
+
+  .site-header .site-title {
+    font-size: $h3;
+    float: left;
+  }
+
+  .site-header .site-nav {
+    float: right;
+    margin-top: .25rem;
+  }
+
+  blockquote {
+    margin-left: $space-3;
+    padding: $space-3;
+  }
+
+  .social-icons-left {
+    text-align: left;
+  }
+
+  .social-icons-right {
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: $viewport-medium) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media screen and (min-width: $viewport-large) {
+  html {
+    font-size: 20px;
+  }
+}
+
+@media screen and (min-width: $viewport-large + 14) {
+  em img {
+    max-width: $measure-width + 14;
+    margin-left: -7em;
+  }
+}
diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss
new file mode 100644
index 0000000..1919713
--- /dev/null
+++ b/_sass/_pagination.scss
@@ -0,0 +1,52 @@
+.pagination {
+  font-size: 1rem;
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
+  font-weight: 300;
+  text-align: center;
+}
+
+.pagination a, .pagination .disabled {
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  background: #fafafa;
+  border-radius: 0.1875em;
+  border: 1px solid #f3f3f3;
+  color: #333333;
+  padding: 1em 1.5em;
+}
+
+.pagination .disabled, .pagination .pagination-meta {
+  opacity: 0.5;
+}
+
+.pagination .pagination-meta {
+  overflow: hidden;
+}
+
+.pagination a:hover, .pagination a:focus {
+  background: white;
+  color: #477dca;
+}
+
+.pagination a:active {
+  background: #f7f7f7;
+}
+
+.pagination .button {
+  font-size: 1rem;
+  font-weight: 300;
+  letter-spacing: 1px;
+}
+
+.button-disabled {
+  opacity: 0.55;
+  background-color: #999;
+}
+
+.button-disabled:hover,
+.button-disabled:active,
+.button-disabled:focus {
+  cursor: not-allowed;
+  background-color: #999;
+}
diff --git a/_sass/_positions.scss b/_sass/_positions.scss
new file mode 100644
index 0000000..3449fac
--- /dev/null
+++ b/_sass/_positions.scss
@@ -0,0 +1,7 @@
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
diff --git a/_sass/_posts.scss b/_sass/_posts.scss
new file mode 100644
index 0000000..91f5a06
--- /dev/null
+++ b/_sass/_posts.scss
@@ -0,0 +1,48 @@
+
+.posts {
+  margin: 0;
+}
+
+.posts .post {
+  margin-bottom: 0.75em;
+  border-bottom: thin solid #f3f3f3;
+}
+
+.posts .post:last-child {
+  border-bottom: none;
+  margin-bottom: .375em;
+  padding-bottom: 0;
+}
+
+.post-link .post-title {
+  margin-top: 0;
+  font-weight: 600;
+  color: #333;
+}
+
+.post-footer {
+  @extend .italic;
+
+  margin-top: .75rem;
+  text-align: center;
+}
+
+.post-footer .avatar {
+  margin: 2rem 0;
+  width: 100px;
+  border-radius: 50%;
+}
+
+.meta,
+.post-meta {
+  width: auto;
+  font-weight: 300;
+  margin: 0;
+  padding: .25em 0;
+  color: #7a7a7a;
+  font-style: italic;
+}
+
+.related-post-title {
+  border-bottom: thin solid #f3f3f3;
+}
diff --git a/_sass/_social-icons.scss b/_sass/_social-icons.scss
new file mode 100644
index 0000000..b491807
--- /dev/null
+++ b/_sass/_social-icons.scss
@@ -0,0 +1,25 @@
+.social-icons-left, .social-icons-right {
+  text-align: center;
+  float: none;
+}
+
+.social-icons {
+  font-size: 1.25rem;
+  padding: 0.5em 0 0 0;
+  width: 100%;
+}
+
+.social-icons a.fa {
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 0.2em;
+}
+
+.social-icons a.fa:hover {
+  opacity: 1;
+}
+
+.social-icons iframe[title=Flattr] {
+  position: relative;
+  top: 0.1em;
+}
diff --git a/_sass/_tables.scss b/_sass/_tables.scss
new file mode 100644
index 0000000..ea0bd42
--- /dev/null
+++ b/_sass/_tables.scss
@@ -0,0 +1,45 @@
+/*
+  Table styles copied from Bootstrap
+  Copyright (c) 2013 Twitter, Inc
+*/
+
+table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1.5;
+  font-size: 1.125rem;
+  // Cells
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: 12px;
+        line-height: 1.2;
+        vertical-align: top;
+        border-top: 1px solid #333;
+      }
+    }
+  }
+  // Bottom align for column headings
+  > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #333;
+  }
+  // Remove top border from thead by default
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+  // Account for multiple tbody instances
+  > tbody + tbody {
+    border-top: 2px solid #333;
+  }
+}
diff --git a/_sass/_typography.scss b/_sass/_typography.scss
new file mode 100644
index 0000000..9dce6d8
--- /dev/null
+++ b/_sass/_typography.scss
@@ -0,0 +1,24 @@
+html {
+  font-size: $base-font-size;
+}
+
+abbr {
+  border-bottom: $abbr-border-bottom;
+  cursor: help;
+}
+
+p {
+  color: #333;
+  line-height: 1.5;
+}
+
+small,
+.small {
+  font-size: 0.707rem;
+}
+
+sup {
+  position: relative;
+  vertical-align: middle;
+  top: -0.9ex;
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..d4dbde9
--- /dev/null
+++ b/_sass/_variables.scss
@@ -0,0 +1,192 @@
+
+/******************************************************************************/
+
+// Typography
+$base-font-size: 14px !default;
+$bold-font-weight: bold !default;
+$font-family: 'Merriweather', 'PT Serif', Georgia, 'Times New Roman', serif !default;
+$line-height: 1.5 !default;
+$heading-font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif !default;
+$heading-font-weight: 900 !default;
+$heading-line-height: 1.25 !default;
+$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
+$h1: 2.998rem !default;
+$h2: 1.5rem !default;
+$h3: 1.25rem !default;
+$h4: 1rem !default;
+$h5: .875rem !default;
+$h6: .75rem !default;
+$h00: 4rem !default;
+$h0: 3rem !default;
+$h00-responsive: 8vw !default;
+$h0-responsive: 6vw !default;
+$h1-responsive: 4vw !default;
+$h00-responsive-max: 7.68rem !default;
+$h0-responsive-max: 5.76rem !default;
+$h1-responsive-max: 3.84rem !default;
+$abbr-border-bottom: 1px black dotted;
+
+// Page width
+$measure-width: 42rem !default;
+
+// Viewport widths
+$viewport-small: 32em;
+$viewport-medium: 48em;
+$viewport-large: 64em;
+
+// Colors
+$red: #FF3636 !default;
+// $red: #f95020 !default;
+$orange: #F29105 !default;
+// $orange: #ffcc22 !default;
+$blue: #2698BA !default;
+// $blue: #0076df !default;
+$dark-blue: #00369f !default;
+$green: #00ab37 !default;
+// $green: #11D68B !default;
+// $green: #00cf26 !default;
+$dark-green: #009f06 !default;
+$light-green: #ddffdd !default;
+$lime_green: #B7D12A !default;
+$purple: #B509AC !default;
+// $purple: #f92080 !default;
+$yellow: #efcc00 !default;
+$light-pink: #ffdddd !default;
+
+$dark-gray: #333 !default;
+$mid-gray: #777 !default;
+$light-gray: #ccc !default;
+$lighter-gray: #eee !default;
+
+$grey-color: #828282;
+$grey-color-light: lighten($grey-color, 40%);
+$grey-color-dark: darken($grey-color, 25%);
+
+$darken-1: rgba(#000,.0625) !default;
+$darken-2: rgba(#000,.125) !default;
+$darken-3: rgba(#000,.25) !default;
+$darken-4: rgba(#000,.5) !default;
+
+// Theme color
+$theme-color:   $purple;
+
+// Links
+$link-color: $theme-color;
+$link-hover-color: darken($theme-color, 40%);
+
+// Breakpoints
+$breakpoint-md: '(min-width: 52em)';
+$breakpoint-xl: '(min-width: 96em)';
+
+// Whitespace
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+
+// Buttons
+$button-font-size: inherit !default;
+$button-font-weight: normal !default;
+$button-line-height: 1.125rem !default;
+$button-padding-y: .5rem !default;
+$button-padding-x: 1rem !default;
+$button-font-family: $heading-font-family;
+
+// Forms
+$form-field-font-size: 1rem !default;
+$form-field-height: 2.25rem !default;
+$form-field-padding-y: .5rem !default;
+$form-field-padding-x: .5rem !default;
+
+// Borders
+$border-color: $light-gray !default;
+$border-width: 1px !default;
+$border-radius: 3px !default;
+
+// Forms
+$form-field-font-size: 1rem;
+$form-field-height: 2.25rem;
+$form-field-padding-y: .5rem;
+$form-field-padding-x: .5rem;
+
+// Code
+$pre-border-radius: 0;
+$pre-background-color: #fafafa;
+$hljs-comment: $mid-gray;
+$hljs-keyword: $dark-blue;
+$hljs-name: $dark-gray;
+$hljs-number: $dark-green;
+$hljs-string: $red;
+$hljs-title: $red;
+$hljs-type: $dark-blue;
+$hljs-tag: $dark-blue;
+$hljs-attribute: $dark-green;
+$hljs-regexp: $dark-green;
+$hljs-symbol: $purple;
+$hljs-built-in: $dark-blue;
+$hljs-preprocessor: $mid-gray;
+$hljs-deletion: $light-pink;
+$hljs-addition: $light-green;
+$hljs-change: $dark-blue;
+$hljs-chunk: $light-gray;
+
+// Header
+$nav-height: 56px;
+
+// Footer
+$footer-border-top: thin solid $grey-color-dark;
+$footer-padding: $space-1;
+$footer-color: $light-gray;
+$footer-bg-color: $grey-color-dark;
+$footer-font-weight: 300;
+$footer-font-size: .75rem;
+
+// Spacing
+$spacing-unit:     30px;
+$on-palm:          600px;
+$on-laptop:        800px;
+
+/******************************************************************************/
+
+// Theme
+$base-font-family:              Helvetica, sans-serif;
+$base-line-height:              1.5em;
+$horizontal-spacing-unit:       50px;
+$vertical-spacing-unit:         40px;
+$nav-height:                    56px;
+
+/* portfolio tinkering */
+$img_spacing: 5px;
+$img_height: 275px;
+$caption_font_size: 12px;
+$caption_color: #aaa;
+
+/* COLORS  */
+$red:           #FF3636;
+$orange:        #F29105;
+$blue:          #2698BA;
+$green:         #11D68B;
+$lime_green:    #B7D12A;
+$purple:        #B509AC;
+
+
+$grey-color-dark:   #333;   /* footer */
+$grey-color-light:  #ddd;  /* navigation bar border */
+$text-color:        #666;
+
+/* Set theme color *************************/
+$theme-color:   $purple;
+
+
+$base-font-family: Helvetica, Arial, sans-serif;
+$base-font-size:   16px;
+$small-font-size:  $base-font-size * 0.875;
+$base-line-height: 1.5;
+
+$spacing-unit:     30px;
+
+$background-color: #ffffff;
+$brand-color:      #2a7ae2;
+
+$on-palm:          600px;
+$on-laptop:        800px;
diff --git a/_sass/basscss/_base-buttons.scss b/_sass/basscss/_base-buttons.scss
new file mode 100644
index 0000000..48af66c
--- /dev/null
+++ b/_sass/basscss/_base-buttons.scss
@@ -0,0 +1,28 @@
+/* Basscss Base Buttons */
+
+button,
+.button {
+  font-family: $button-font-family;
+  font-size: $button-font-size;
+  font-weight: $button-font-weight;
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  line-height: $button-line-height;
+  padding: $button-padding-y $button-padding-x;
+  margin: 0;
+  height: auto;
+  border: 1px solid transparent;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
+
+::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.button:hover {
+  text-decoration: none;
+}
diff --git a/_sass/basscss/_base-forms.scss b/_sass/basscss/_base-forms.scss
new file mode 100644
index 0000000..1a69ded
--- /dev/null
+++ b/_sass/basscss/_base-forms.scss
@@ -0,0 +1,57 @@
+/* Basscss Base Forms */
+
+input,
+select,
+textarea,
+fieldset {
+  font-size: $form-field-font-size;
+  margin-top: 0;
+  margin-bottom: $space-1;
+}
+
+input[type=text],
+input[type=datetime],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=time],
+input[type=url],
+input[type=week] {
+  box-sizing: border-box;
+  height: $form-field-height;
+  padding: $form-field-padding-y $form-field-padding-x;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
+
+select {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: $form-field-padding-y $form-field-padding-x;
+}
+
+select:not([multiple]) {
+  height: $form-field-height;
+  vertical-align: middle;
+}
+
+textarea {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: $form-field-padding-y $form-field-padding-x;
+}
+
+.fieldset-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border: 0;
+}
+
+.fieldset-reset legend {
+  padding: 0;
+}
diff --git a/_sass/basscss/_base-reset.scss b/_sass/basscss/_base-reset.scss
new file mode 100644
index 0000000..9c509a5
--- /dev/null
+++ b/_sass/basscss/_base-reset.scss
@@ -0,0 +1,20 @@
+body,
+button {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+}
+
+img {
+  max-width: 100%;
+}
+
+svg {
+  max-height: 100%;
+}
diff --git a/_sass/basscss/_base-typography.scss b/_sass/basscss/_base-typography.scss
new file mode 100644
index 0000000..4fdd735
--- /dev/null
+++ b/_sass/basscss/_base-typography.scss
@@ -0,0 +1,101 @@
+/* Basscss Base Typography */
+
+body {
+  font-family: $font-family;
+  line-height: $line-height;
+  font-size: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-weight: $heading-font-weight;
+  line-height: $heading-line-height;
+  margin-top: 1em;
+  margin-bottom: .5em;
+}
+
+p,
+dl,
+ol,
+ul {
+  font-size: $h4;
+  margin-top: 0;
+  margin-bottom: $space-2;
+}
+
+ol,
+ul {
+  padding-left: $space-3;
+}
+
+pre,
+code,
+samp {
+  font-family: $monospace-font-family;
+  font-size: inherit;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: $space-2;
+  overflow-x: scroll;
+}
+
+hr {
+  margin-top: $space-3;
+  margin-bottom: $space-3;
+}
+
+blockquote {
+  margin-top: $space-3;
+  margin-bottom: $space-3;
+  margin-left: 0;
+  padding-left: $space-2;
+  padding-right: $space-2;
+}
+
+blockquote,
+blockquote p {
+  font-size: $h3;
+  font-style: italic;
+}
+
+h1,
+.h1 {
+  font-size: $h1;
+}
+
+h2,
+.h2 {
+  font-size: $h2;
+}
+
+h3,
+.h3 {
+  font-size: $h3;
+}
+
+h4,
+.h4 {
+  font-size: $h4;
+}
+
+h5,
+.h5 {
+  font-size: $h5;
+}
+
+h6,
+.h6 {
+  font-size: $h6;
+}
+
+.list-reset {
+  list-style: none;
+  padding-left: 0;
+}
diff --git a/_sass/basscss/_buttons-blue.scss b/_sass/basscss/_buttons-blue.scss
new file mode 100644
index 0000000..c2373a9
--- /dev/null
+++ b/_sass/basscss/_buttons-blue.scss
@@ -0,0 +1,27 @@
+.button-blue {
+  color: white;
+  background-color: $blue;
+  border-radius: $border-radius;
+  transition-duration: .1s;
+  transition-timing-function: ease-out;
+  transition-property: box-shadow, background-color;
+}
+
+.button-blue:hover {
+  opacity: .875;
+}
+
+.button-blue:active,
+.button-blue.is-active {
+  box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
+}
+
+.button-blue:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
+}
+
+.button-blue:disabled,
+.button-blue.is-disabled {
+  opacity: .5;
+}
diff --git a/_sass/basscss/_color-base.scss b/_sass/basscss/_color-base.scss
new file mode 100644
index 0000000..486b02e
--- /dev/null
+++ b/_sass/basscss/_color-base.scss
@@ -0,0 +1,28 @@
+/* Basscss Color Base */
+
+body {
+  color: $dark-gray;
+  background-color: white;
+}
+
+a {
+  color: $blue;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+pre,
+code {
+  background-color: $lighter-gray;
+  border-radius: $border-radius;
+}
+
+hr {
+  border: 0;
+  border-bottom-style: solid;
+  border-bottom-width: $border-width;
+  border-bottom-color: $border-color;
+}
diff --git a/_sass/basscss/_colors.scss b/_sass/basscss/_colors.scss
new file mode 100644
index 0000000..bd7d44b
--- /dev/null
+++ b/_sass/basscss/_colors.scss
@@ -0,0 +1,97 @@
+/* Basscss Colors */
+
+.dark-gray {
+  color: $dark-gray;
+}
+
+.white {
+  color: white;
+}
+
+.blue {
+  color: $blue;
+}
+
+.mid-gray {
+  color: $mid-gray;
+}
+
+.light-gray {
+  color: $light-gray;
+}
+
+.lighter-gray {
+  color: $lighter-gray;
+}
+
+.red {
+  color: $red;
+}
+
+.green {
+  color: $green;
+}
+
+.yellow {
+  color: $yellow;
+}
+
+.orange {
+  color: $orange;
+}
+
+.bg-dark-gray {
+  background-color: $dark-gray;
+}
+
+.bg-white {
+  background-color: white;
+}
+
+.bg-blue {
+  background-color: $blue;
+}
+
+.bg-mid-gray {
+  background-color: $mid-gray;
+}
+
+.bg-light-gray {
+  background-color: $light-gray;
+}
+
+.bg-lighter-gray {
+  background-color: $lighter-gray;
+}
+
+.bg-red {
+  background-color: $red;
+}
+
+.bg-green {
+  background-color: $green;
+}
+
+.bg-yellow {
+  background-color: $yellow;
+}
+
+.bg-orange {
+  background-color: $orange;
+}
+
+.bg-darken-1 {
+  background-color: $darken-1;
+}
+
+.bg-darken-2 {
+  background-color: $darken-2;
+}
+
+.bg-darken-3 {
+  background-color: $darken-3;
+}
+
+.bg-darken-4 {
+  background-color: $darken-4;
+}
diff --git a/_sass/basscss/_syntax-highlighting.scss b/_sass/basscss/_syntax-highlighting.scss
new file mode 100644
index 0000000..d32db05
--- /dev/null
+++ b/_sass/basscss/_syntax-highlighting.scss
@@ -0,0 +1,119 @@
+.highlight {
+  -webkit-text-size-adjust: none;
+}
+
+.highlight .c,
+.highlight .cs,
+.highlight .cm,
+.highlight .cp,
+.highlight .c1 {
+  color: $hljs-comment;
+  font-style: italic;
+}
+
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kr,
+.highlight .kt,
+.highlight .kp {
+  color: $hljs-keyword;
+}
+
+.highlight .na,
+.highlight .nb,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .ne,
+.highlight .nf,
+.highlight .nl,
+.highlight .nn,
+.highlight .nx {
+  color: $hljs-name;
+}
+
+.highlight .mi,
+.highlight .il {
+  color: $hljs-number;
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s2,
+.highlight .s3,
+.highlight .sh,
+.highlight .si,
+.highlight .sx,
+.highlight .sr,
+.highlight .ss,
+.highlight .s1 {
+  color: $hljs-string;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: $hljs-title;
+  font-weight: bold;
+}
+
+.highlight .k {
+  font-weight: normal;
+}
+
+.highlight .nc,
+.highlight .no {
+  color: $hljs-type;
+}
+
+.highlight .o {
+  color: $hljs-tag;
+  font-weight: normal;
+}
+
+.highlight .nb {
+  color: $hljs-attribute;
+}
+
+.highlight .sr {
+  color: $hljs-regexp;
+}
+
+.highlight .ss {
+  color: $hljs-symbol;
+}
+
+.hljs-built_in {
+  color: $hljs-built-in;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: $hljs-preprocessor;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: $hljs-deletion;
+}
+
+.hljs-addition {
+  background: $hljs-addition;
+}
+
+.diff .hljs-change {
+  background: $hljs-change;
+}
+
+.hljs-chunk {
+  color: $hljs-chunk;
+}
diff --git a/_sass/basscss/_utility-headings.scss b/_sass/basscss/_utility-headings.scss
new file mode 100644
index 0000000..b9fd7f5
--- /dev/null
+++ b/_sass/basscss/_utility-headings.scss
@@ -0,0 +1,37 @@
+/* Basscss Utility Headings */
+
+.h00 {
+  font-size: $h00;
+}
+
+.h0 {
+  font-size: $h0;
+}
+
+@media #{$breakpoint-md} {
+  .h00-responsive {
+    font-size: $h00-responsive;
+  }
+
+  .h0-responsive {
+    font-size: $h0-responsive;
+  }
+
+  .h1-responsive {
+    font-size: $h1-responsive;
+  }
+}
+
+@media #{$breakpoint-xl} {
+  .h00-responsive {
+    font-size: $h00-responsive-max;
+  }
+
+  .h0-responsive {
+    font-size: $h0-responsive-max;
+  }
+
+  .h1-responsive {
+    font-size: $h1-responsive-max;
+  }
+}
diff --git a/_sass/basscss/_utility-typography.scss b/_sass/basscss/_utility-typography.scss
new file mode 100644
index 0000000..14b1ab4
--- /dev/null
+++ b/_sass/basscss/_utility-typography.scss
@@ -0,0 +1,38 @@
+/* Basscss Utility Typography */
+
+.bold {
+  font-weight: $bold-font-weight;
+}
+
+.regular {
+  font-weight: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.caps {
+  text-transform: uppercase;
+  letter-spacing: .2em;
+}
+
+.left-align {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right-align {
+  text-align: right;
+}
+
+.justify {
+  text-align: justify;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/_sass/basscss/_utility-white-space.scss b/_sass/basscss/_utility-white-space.scss
new file mode 100644
index 0000000..d289db3
--- /dev/null
+++ b/_sass/basscss/_utility-white-space.scss
@@ -0,0 +1,182 @@
+/* Basscss Utility White Space */
+
+.m0 {
+  margin: 0;
+}
+
+.mt0 {
+  margin-top: 0;
+}
+
+.mr0 {
+  margin-right: 0;
+}
+
+.mb0 {
+  margin-bottom: 0;
+}
+
+.ml0 {
+  margin-left: 0;
+}
+
+.m1 {
+  margin: $space-1;
+}
+
+.mt1 {
+  margin-top: $space-1;
+}
+
+.mr1 {
+  margin-right: $space-1;
+}
+
+.mb1 {
+  margin-bottom: $space-1;
+}
+
+.ml1 {
+  margin-left: $space-1;
+}
+
+.m2 {
+  margin: $space-2;
+}
+
+.mt2 {
+  margin-top: $space-2;
+}
+
+.mr2 {
+  margin-right: $space-2;
+}
+
+.mb2 {
+  margin-bottom: $space-2;
+}
+
+.ml2 {
+  margin-left: $space-2;
+}
+
+.m3 {
+  margin: $space-3;
+}
+
+.mt3 {
+  margin-top: $space-3;
+}
+
+.mr3 {
+  margin-right: $space-3;
+}
+
+.mb3 {
+  margin-bottom: $space-3;
+}
+
+.ml3 {
+  margin-left: $space-3;
+}
+
+.m4 {
+  margin: $space-4;
+}
+
+.mt4 {
+  margin-top: $space-4;
+}
+
+.mr4 {
+  margin-right: $space-4;
+}
+
+.mb4 {
+  margin-bottom: $space-4;
+}
+
+.ml4 {
+  margin-left: $space-4;
+}
+
+.mxn1 {
+  margin-left: -$space-1;
+  margin-right: -$space-1;
+}
+
+.mxn2 {
+  margin-left: -$space-2;
+  margin-right: -$space-2;
+}
+
+.mxn3 {
+  margin-left: -$space-3;
+  margin-right: -$space-3;
+}
+
+.mxn4 {
+  margin-left: -$space-4;
+  margin-right: -$space-4;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p1 {
+  padding: $space-1;
+}
+
+.py1 {
+  padding-top: $space-1;
+  padding-bottom: $space-1;
+}
+
+.px1 {
+  padding-left: $space-1;
+  padding-right: $space-1;
+}
+
+.p2 {
+  padding: $space-2;
+}
+
+.py2 {
+  padding-top: $space-2;
+  padding-bottom: $space-2;
+}
+
+.px2 {
+  padding-left: $space-2;
+  padding-right: $space-2;
+}
+
+.p3 {
+  padding: $space-3;
+}
+
+.py3 {
+  padding-top: $space-3;
+  padding-bottom: $space-3;
+}
+
+.px3 {
+  padding-left: $space-3;
+  padding-right: $space-3;
+}
+
+.p4 {
+  padding: $space-4;
+}
+
+.py4 {
+  padding-top: $space-4;
+  padding-bottom: $space-4;
+}
+
+.px4 {
+  padding-left: $space-4;
+  padding-right: $space-4;
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index f03d1c3..a91961b 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -3,29 +3,6 @@
 ---
 @charset "utf-8";
 
-
-
-// Our variables
-$base-font-family: Helvetica, Arial, sans-serif;
-$base-font-size:   16px;
-$small-font-size:  $base-font-size * 0.875;
-$base-line-height: 1.5;
-
-$spacing-unit:     30px;
-
-$text-color:       #111;
-$background-color: #fdfdfd;
-$brand-color:      #2a7ae2;
-
-$grey-color:       #828282;
-$grey-color-light: lighten($grey-color, 40%);
-$grey-color-dark:  darken($grey-color, 25%);
-
-$on-palm:          600px;
-$on-laptop:        800px;
-
-
-
 // Using media queries with like this:
 // @include media-query($palm) {
 //     .wrapper {
@@ -39,11 +16,25 @@ $on-laptop:        800px;
     }
 }
 
+@import 'variables';
 
+@import 'basscss';
 
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import
-        "base",
-        "layout",
-        "syntax-highlighting"
-;
+@import 'base';
+@import 'header';
+@import 'layout';
+@import 'footer';
+@import 'pagination';
+@import 'posts';
+@import 'positions';
+
+@import 'blockquotes';
+@import 'clearfix';
+@import 'code';
+@import 'gists';
+// @import 'links';
+@import 'measure';
+@import 'media-queries';
+@import 'social-icons';
+@import 'tables';
+@import 'typography';