diff --git a/_includes/favicons.html b/_includes/favicons.html
deleted file mode 100644
index 51935ef..0000000
--- a/_includes/favicons.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<link rel="apple-touch-icon" sizes="57x57" href="{{ site.logo | replace: "300", "57" }}">
-<link rel="apple-touch-icon" sizes="60x60" href="{{ site.logo | replace: "300", "60" }}">
-<link rel="apple-touch-icon" sizes="72x72" href="{{ site.logo | replace: "300", "72" }}">
-<link rel="apple-touch-icon" sizes="76x76" href="{{ site.logo | replace: "300", "76" }}">
-<link rel="apple-touch-icon" sizes="114x114" href="{{ site.logo | replace: "300", "114" }}">
-<link rel="apple-touch-icon" sizes="120x120" href="{{ site.logo | replace: "300", "120" }}">
-<link rel="apple-touch-icon" sizes="144x144" href="{{ site.logo | replace: "300", "144" }}">
-<link rel="apple-touch-icon" sizes="152x152" href="{{ site.logo | replace: "300", "152" }}">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ site.logo | replace: "300", "180" }}">
-<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "32" }}" sizes="32x32">
-<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "194" }}" sizes="194x194">
-<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "96" }}" sizes="96x96">
-<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "192" }}" sizes="192x192">
-<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "16" }}" sizes="16x16">
-<link rel="shortcut icon" href="{{ site.logo }}">
-<meta name="msapplication-TileColor" content="{{ site.color }}">
-<meta name="msapplication-TileImage" content="{{ site.logo | replace: "300", "144" }}">
-<meta name="theme-color" content="{{ site.color }}">
diff --git a/_includes/footer.html b/_includes/footer.html
index 6ba3f62..830f665 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,7 +2,7 @@
 
 	<div class="container">
 
-		<small class="small">&copy; {{ site.time | date: '%Y' }} — {{ site.title }}</small>
+		<small class="small">&copy; {{ site.time | date: '%Y' }}&nbsp;–&nbsp;{{ site.title }}</small>
 
 	</div>
 
diff --git a/_includes/header.html b/_includes/header.html
index fa4be57..d30dfd0 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,16 +1,32 @@
 <header class="header">
 
-	<a href="{{ page.url }}" title="{{ page.title }}">
-
-			<img class="avatar" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }}  72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
-
-	</a>
-
-	{% include nav.html %}
-
 	<div class="container">
 
-		<h1>{{ page.title }}</h1>
+		{% if site.logo %}
+		  <a class="logo" href="{{ site.url }}" title="{{ site.title }}">
+		    <img class="image" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }}  72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
+		  </a>
+		{% endif %}
+
+		<button class="button">Menu</button>
+
+		<nav class="nav  nav--main">
+		  {% if data.nav %}
+
+		    {% for item in data.nav %}
+		      <a class="item" href="{{ item.url }}" title="{{ item.name }}">{{ item.name }}</a>
+		    {% endfor %}
+
+		  {% else %}
+
+		    {% for page in site.pages %}
+					{% if page.title %}
+		      	<a class="item" href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a>
+					{% endif %}
+		    {% endfor %}
+
+		  {% endif %}
+		</nav>
 
 	</div>
 
diff --git a/_includes/nav.html b/_includes/nav.html
deleted file mode 100644
index 442bf6a..0000000
--- a/_includes/nav.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<nav class="nav">
-  <button class="button  button--nav">Menu</button>
-  {% if data.nav %}
-    {% for item in data.nav %}
-      <a href="{{ item.url }}" title="{{ item.name }}">{{ item.name }}</a>
-    {% endfor %}
-  {% else %}
-    {% for page in site.pages %}
-      {% if page.title %}
-        <a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a>
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-</nav>
diff --git a/_includes/pagination.html b/_includes/pagination.html
index e424cd3..819dd61 100644
--- a/_includes/pagination.html
+++ b/_includes/pagination.html
@@ -1,17 +1,21 @@
-<aside class="container">
+<aside class="aside">
 
-  {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
-  {% else %}
-    <span class="pagination  pagination--previous">&larr; Previous</span>
-  {% endif %}
+  <nav class="paginator  container">
 
-  <span class="pagination  pagination--divider">&bull;</span>
+    {% if paginator.previous_page %}
+      <a href="{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
+    {% else %}
+      <span class="pagination  pagination--previous">&larr; Previous</span>
+    {% endif %}
 
-  {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
-  {% else %}
-    <span class="pagination  pagination--next">Next &rarr;</span>
-  {% endif %}
+    <span class="pagination  pagination--divider">&bull;</span>
+
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
+    {% else %}
+      <span class="pagination  pagination--next">Next &rarr;</span>
+    {% endif %}
+
+  </nav>
 
 </aside>
diff --git a/_includes/posts.html b/_includes/posts.html
index 565d913..8bc4e6c 100644
--- a/_includes/posts.html
+++ b/_includes/posts.html
@@ -1,9 +1,9 @@
 	<ul class="posts">
 		{% for item in paginator.posts %}
 
-			<li class="post">
+			<li class="post  container">
 
-				<article class="container">
+				<article class="article  typeset">
 
 					<h2>
 						<a href="{{ item.url }}" title="{{ item.title }}">{{ item.title }}</a>
diff --git a/_includes/scripts.js b/_includes/scripts.js
deleted file mode 100644
index daff981..0000000
--- a/_includes/scripts.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// Data attribute switch
-var toggleState	= function (elem, one, two) {
-  var elem	= document.querySelector(elem);
-  elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
-};
-
-// Mobile navigation toggle selector
-var buttonMenu = document.querySelector('.button--nav');
-  if (typeof(buttonMenu) != 'undefined' && buttonMenu != null) {
-  	buttonMenu.onclick = function (e) {
-  		toggleState('.nav', 'open', 'closed');
-  		e.preventDefault();
-  	};
-  };
diff --git a/_layouts/default.html b/_layouts/default.html
index 4ee769f..16ccf79 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -15,8 +15,13 @@
 	</head>
 	<body>
 
+		{% include header.html %}
+
 		{{ content }}
 
+		{% include footer.html %}
+
+		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Neuton" rel="stylesheet">
 		<script src="/js/scripts.js" type="text/javascript"></script>
 	</body>
 </html>
diff --git a/_layouts/front.html b/_layouts/front.html
index 66e0bc6..145509e 100644
--- a/_layouts/front.html
+++ b/_layouts/front.html
@@ -2,11 +2,11 @@
 layout: default
 ---
 
-<main class="container">
+<main class="main  container">
 
-	{% include header.html %}
+	<article class="article  typeset">
 
-	<article class="content">
+		<h1>{{ page.title }}</h1>
 
 		{{ content }}
 
@@ -16,6 +16,4 @@ layout: default
 
 	{% include pagination.html %}
 
-	{% include footer.html %}
-
 </main>
diff --git a/_layouts/page.html b/_layouts/page.html
index d6a38f1..4b18656 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -2,16 +2,14 @@
 layout: default
 ---
 
-<main class="container">
+<main class="main  container">
 
-	{% include header.html %}
+	<article class="article  typeset">
 
-	<article class="content">
+		<h1>{{ page.title }}</h1>
 
 		{{ content }}
 
 	</article>
 
-	{% include footer.html %}
-
 </main>
diff --git a/_layouts/post.html b/_layouts/post.html
index cf04fe9..5b49853 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,21 +2,19 @@
 layout: default
 ---
 
-<main class="container">
+<main class="main  container">
 
-	{% include header.html %}
+	<article class="article  typeset">
 
-	<article class="content">
+		<h1>{{ page.title }}</h1>
 
 		<small class="small">
 				{% assign words = content | number_of_words %}
-				<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>&nbsp;&nbsp;–&nbsp;&nbsp;<span class="time  time--reading">{{ words | divided_by:180 }} minute read</span>
+				<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>&nbsp;–&nbsp;<span class="time  time--reading">{{ words | divided_by:180 }} minute read</span>
 		</small>
 
 		{{ content }}
 
 	</article>
 
-	{% include footer.html %}
-
 </main>
diff --git a/_sass/_sassline-base.scss b/_sass/_sassline-base.scss
new file mode 100755
index 0000000..7962dd3
--- /dev/null
+++ b/_sass/_sassline-base.scss
@@ -0,0 +1,7 @@
+// Import Sassline base SCSS files in order so variables are read correctly.
+@import "sassline-base/reset";
+@import "sassline-base/variables";
+@import "sassline-base/modular-scale";
+@import "sassline-base/mixins";
+@import "sassline-base/typography";
+@import "sassline-base/layouts";
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
deleted file mode 100755
index d203834..0000000
--- a/_sass/base/_base.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Bitters 1.3.1
-// http://bitters.bourbon.io
-// Copyright 2013-2015 thoughtbot, inc.
-// MIT License
-
-@import "variables";
-
-@import "buttons";
-@import "forms";
-@import "layout";
-@import "lists";
-@import "media";
-@import "tables";
-@import "typography";
diff --git a/_sass/base/_buttons.scss b/_sass/base/_buttons.scss
deleted file mode 100755
index 6ac7894..0000000
--- a/_sass/base/_buttons.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-#{$all-buttons} {
-  appearance: none;
-  background-color: $action-color;
-  border: 0;
-  border-radius: $base-border-radius;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  -webkit-font-smoothing: antialiased;
-  font-weight: 600;
-  line-height: 1;
-  padding: $small-spacing $base-spacing;
-  text-decoration: none;
-  transition: background-color $base-duration $base-timing;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-
-  &:hover,
-  &:focus {
-    background-color: shade($action-color, 20%);
-    color: #fff;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-
-    &:hover {
-      background-color: $action-color;
-    }
-  }
-}
diff --git a/_sass/base/_forms.scss b/_sass/base/_forms.scss
deleted file mode 100755
index da099b0..0000000
--- a/_sass/base/_forms.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-fieldset {
-  background-color: transparent;
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  font-weight: 600;
-  margin-bottom: $small-spacing / 2;
-  padding: 0;
-}
-
-label {
-  display: block;
-  font-weight: 600;
-  margin-bottom: $small-spacing / 2;
-}
-
-input,
-select,
-textarea {
-  display: block;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-}
-
-#{$all-text-inputs},
-select[multiple] {
-  background-color: $base-background-color;
-  border: $base-border;
-  border-radius: $base-border-radius;
-  box-shadow: $form-box-shadow;
-  box-sizing: border-box;
-  margin-bottom: $small-spacing;
-  padding: $base-spacing / 3;
-  transition: border-color $base-duration $base-timing;
-  width: 100%;
-
-  &:hover {
-    border-color: shade($base-border-color, 20%);
-  }
-
-  &:focus {
-    border-color: $action-color;
-    box-shadow: $form-box-shadow-focus;
-    outline: none;
-  }
-
-  &:disabled {
-    background-color: shade($base-background-color, 5%);
-    cursor: not-allowed;
-
-    &:hover {
-      border: $base-border;
-    }
-  }
-}
-
-textarea {
-  resize: vertical;
-}
-
-[type="search"] {
-  appearance: none;
-}
-
-[type="checkbox"],
-[type="radio"] {
-  display: inline;
-  margin-right: $small-spacing / 2;
-}
-
-[type="file"] {
-  margin-bottom: $small-spacing;
-  width: 100%;
-}
-
-select {
-  margin-bottom: $small-spacing;
-  max-width: 100%;
-  width: auto;
-}
diff --git a/_sass/base/_layout.scss b/_sass/base/_layout.scss
deleted file mode 100644
index d729512..0000000
--- a/_sass/base/_layout.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
diff --git a/_sass/base/_lists.scss b/_sass/base/_lists.scss
deleted file mode 100755
index 06a7c0a..0000000
--- a/_sass/base/_lists.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-ul,
-ol {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-dl {
-  margin: 0;
-}
-
-dt {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd {
-  margin: 0;
-}
diff --git a/_sass/base/_media.scss b/_sass/base/_media.scss
deleted file mode 100644
index dfa22ea..0000000
--- a/_sass/base/_media.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-figure {
-  margin: 0;
-}
-
-img,
-picture {
-  margin: 0;
-  max-width: 100%;
-}
diff --git a/_sass/base/_tables.scss b/_sass/base/_tables.scss
deleted file mode 100755
index 9863984..0000000
--- a/_sass/base/_tables.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-table {
-  border-collapse: collapse;
-  margin: $small-spacing 0;
-  table-layout: fixed;
-  width: 100%;
-}
-
-th {
-  border-bottom: 1px solid shade($base-border-color, 25%);
-  font-weight: 600;
-  padding: $small-spacing 0;
-  text-align: left;
-}
-
-td {
-  border-bottom: $base-border;
-  padding: $small-spacing 0;
-}
-
-tr,
-td,
-th {
-  vertical-align: middle;
-}
diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss
deleted file mode 100755
index 50df5c0..0000000
--- a/_sass/base/_typography.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-body {
-  color: $base-font-color;
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  line-height: $base-line-height;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $heading-font-family;
-  font-size: modular-scale(1);
-  line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
-}
-
-p {
-  margin: 0 0 $small-spacing;
-}
-
-a {
-  color: $action-color;
-  text-decoration: none;
-  transition: color $base-duration $base-timing;
-
-  &:active,
-  &:focus,
-  &:hover {
-    color: shade($action-color, 25%);
-  }
-}
-
-hr {
-  border-bottom: $base-border;
-  border-left: 0;
-  border-right: 0;
-  border-top: 0;
-  margin: $base-spacing 0;
-}
diff --git a/_sass/base/_variables.scss b/_sass/base/_variables.scss
deleted file mode 100755
index d40f9ec..0000000
--- a/_sass/base/_variables.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-// Breakpoints
-$medium-screen: 600px;
-$large-screen: 900px;
-
-// Typography
-$base-font-family: $font-stack-system;
-$heading-font-family: $base-font-family;
-
-// Font Sizes
-$base-font-size: 1em;
-
-// Line height
-$base-line-height: 1.5;
-$heading-line-height: 1.2;
-
-// Other Sizes
-$base-border-radius: 3px;
-$base-spacing: $base-line-height * 1em;
-$small-spacing: $base-spacing / 2;
-$base-z-index: 0;
-
-// Colors
-$blue: #1565c0;
-$dark-gray: #333;
-$medium-gray: #999;
-$light-gray: #ddd;
-
-// Font Colors
-$base-font-color: $dark-gray;
-$action-color: $blue;
-
-// Border
-$base-border-color: $light-gray;
-$base-border: 1px solid $base-border-color;
-
-// Background Colors
-$base-background-color: #fff;
-$secondary-background-color: tint($base-border-color, 75%);
-
-// Forms
-$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
-$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
-
-// Animations
-$base-duration: 150ms;
-$base-timing: ease;
diff --git a/_sass/bourbon/_bourbon.scss b/_sass/bourbon/_bourbon.scss
deleted file mode 100644
index 25308b7..0000000
--- a/_sass/bourbon/_bourbon.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// Bourbon 5.0.0-beta.6
-// http://bourbon.io
-// Copyright 2011 thoughtbot, inc.
-// MIT License
-
-@import "bourbon/helpers/buttons-list";
-@import "bourbon/helpers/scales";
-@import "bourbon/helpers/text-inputs-list";
-
-@import "bourbon/settings/settings";
-
-@import "bourbon/validators/contains";
-@import "bourbon/validators/contains-falsy";
-@import "bourbon/validators/is-color";
-@import "bourbon/validators/is-length";
-@import "bourbon/validators/is-light";
-@import "bourbon/validators/is-number";
-@import "bourbon/validators/is-size";
-
-@import "bourbon/utilities/assign-inputs";
-@import "bourbon/utilities/collapse-directionals";
-@import "bourbon/utilities/directional-values";
-@import "bourbon/utilities/font-source-declaration";
-@import "bourbon/utilities/retrieve-bourbon-setting";
-@import "bourbon/utilities/unpack";
-
-@import "bourbon/library/border-color";
-@import "bourbon/library/border-radius";
-@import "bourbon/library/border-style";
-@import "bourbon/library/border-width";
-@import "bourbon/library/buttons";
-@import "bourbon/library/clearfix";
-@import "bourbon/library/contrast-switch";
-@import "bourbon/library/ellipsis";
-@import "bourbon/library/font-face";
-@import "bourbon/library/font-stacks";
-@import "bourbon/library/hide-text";
-@import "bourbon/library/hide-visually";
-@import "bourbon/library/margin";
-@import "bourbon/library/modular-scale";
-@import "bourbon/library/padding";
-@import "bourbon/library/position";
-@import "bourbon/library/prefixer";
-@import "bourbon/library/shade";
-@import "bourbon/library/size";
-@import "bourbon/library/strip-unit";
-@import "bourbon/library/text-inputs";
-@import "bourbon/library/timing-functions";
-@import "bourbon/library/tint";
-@import "bourbon/library/triangle";
-@import "bourbon/library/value-prefixer";
-@import "bourbon/library/word-wrap";
diff --git a/_sass/bourbon/bourbon/helpers/_buttons-list.scss b/_sass/bourbon/bourbon/helpers/_buttons-list.scss
deleted file mode 100644
index 2e845f7..0000000
--- a/_sass/bourbon/bourbon/helpers/_buttons-list.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@charset "UTF-8";
-
-/// A list of all HTML button elements.
-///
-/// @type list
-///
-/// @access private
-
-$_buttons-list: (
-  "button",
-  "[type='button']",
-  "[type='reset']",
-  "[type='submit']",
-);
diff --git a/_sass/bourbon/bourbon/helpers/_scales.scss b/_sass/bourbon/bourbon/helpers/_scales.scss
deleted file mode 100644
index de1efa0..0000000
--- a/_sass/bourbon/bourbon/helpers/_scales.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-
-////
-/// Pre-defined scales for use with the `modular-scale` function.
-///
-/// @type number (unitless)
-///
-/// @see {function} modular-scale
-////
-
-$minor-second:     1.067;
-$major-second:     1.125;
-$minor-third:      1.2;
-$major-third:      1.25;
-$perfect-fourth:   1.333;
-$augmented-fourth: 1.414;
-$perfect-fifth:    1.5;
-$minor-sixth:      1.6;
-$golden:           1.618;
-$major-sixth:      1.667;
-$minor-seventh:    1.778;
-$major-seventh:    1.875;
-$octave:           2;
-$major-tenth:      2.5;
-$major-eleventh:   2.667;
-$major-twelfth:    3;
-$double-octave:    4;
diff --git a/_sass/bourbon/bourbon/helpers/_text-inputs-list.scss b/_sass/bourbon/bourbon/helpers/_text-inputs-list.scss
deleted file mode 100644
index 479326a..0000000
--- a/_sass/bourbon/bourbon/helpers/_text-inputs-list.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@charset "UTF-8";
-
-/// A list of all _text-based_ HTML inputs.
-///
-/// @type list
-///
-/// @access private
-
-$_text-inputs-list: (
-  "[type='color']",
-  "[type='date']",
-  "[type='datetime']",
-  "[type='datetime-local']",
-  "[type='email']",
-  "[type='month']",
-  "[type='number']",
-  "[type='password']",
-  "[type='search']",
-  "[type='tel']",
-  "[type='text']",
-  "[type='time']",
-  "[type='url']",
-  "[type='week']",
-  "input:not([type])",
-  "textarea",
-);
diff --git a/_sass/bourbon/bourbon/library/_border-color.scss b/_sass/bourbon/bourbon/library/_border-color.scss
deleted file mode 100644
index a4224e4..0000000
--- a/_sass/bourbon/bourbon/library/_border-color.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-color` on specific sides of a
-/// box. Use a `null` value to “skip” a side.
-///
-/// @argument {arglist} $values
-///   List of colors, defined as CSS shorthand.
-///
-/// @example scss
-///   .element {
-///     @include border-color(#a60b55 #76cd9c null #e8ae1a);
-///   }
-///
-/// @example css
-///   .element {
-///     border-left-color: #e8ae1a;
-///     border-right-color: #76cd9c;
-///     border-top-color: #a60b55;
-///   }
-///
-/// @require {mixin} _directional-property
-
-@mixin border-color($values...) {
-  @include _directional-property(border, color, $values...);
-}
diff --git a/_sass/bourbon/bourbon/library/_border-radius.scss b/_sass/bourbon/bourbon/library/_border-radius.scss
deleted file mode 100644
index 8639e92..0000000
--- a/_sass/bourbon/bourbon/library/_border-radius.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a shorthand syntax to add `border-radius` to both the top-left and
-/// top-right of an element.
-///
-/// @argument {number (with unit)} $radii
-///
-/// @example scss
-///   .element {
-///     @include border-top-radius(4px);
-///   }
-///
-/// @example css
-///   .element {
-///     border-top-left-radius: 4px;
-///     border-top-right-radius: 4px;
-///   }
-
-@mixin border-top-radius($radii) {
-  border-top-left-radius: $radii;
-  border-top-right-radius: $radii;
-}
-
-/// Provides a shorthand syntax to add `border-radius` to both the top-right and
-/// bottom-right of an element.
-///
-/// @argument {number (with unit)} $radii
-///
-/// @example scss
-///   .element {
-///     @include border-right-radius(3px);
-///   }
-///
-/// @example css
-///   .element {
-///     border-bottom-right-radius: 3px;
-///     border-top-right-radius: 3px;
-///   }
-
-@mixin border-right-radius($radii) {
-  border-bottom-right-radius: $radii;
-  border-top-right-radius: $radii;
-}
-
-/// Provides a shorthand syntax to add `border-radius` to both the bottom-left
-/// and bottom-right of an element.
-///
-/// @argument {number (with unit)} $radii
-///
-/// @example scss
-///   .element {
-///     @include border-bottom-radius(2px);
-///   }
-///
-/// @example css
-///   .element {
-///     border-bottom-left-radius: 2px;
-///     border-bottom-right-radius: 2px;
-///   }
-
-@mixin border-bottom-radius($radii) {
-  border-bottom-left-radius: $radii;
-  border-bottom-right-radius: $radii;
-}
-
-/// Provides a shorthand syntax to add `border-radius` to both the top-left
-/// and bottom-left of an element.
-///
-/// @argument {number (with unit)} $radii
-///
-/// @example scss
-///   .element {
-///     @include border-left-radius(1px);
-///   }
-///
-/// @example css
-///   .element {
-///     border-bottom-left-radius: 1px;
-///     border-top-left-radius: 1px;
-///   }
-
-@mixin border-left-radius($radii) {
-  border-bottom-left-radius: $radii;
-  border-top-left-radius: $radii;
-}
diff --git a/_sass/bourbon/bourbon/library/_border-style.scss b/_sass/bourbon/bourbon/library/_border-style.scss
deleted file mode 100644
index ee07efb..0000000
--- a/_sass/bourbon/bourbon/library/_border-style.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-style` on specific sides of a
-/// box. Use a `null` value to “skip” a side.
-///
-/// @argument {arglist} $values
-///   List of border styles, defined as CSS shorthand.
-///
-/// @example scss
-///   .element {
-///     @include border-style(dashed null solid);
-///   }
-///
-/// @example css
-///   .element {
-///     border-bottom-style: solid;
-///     border-top-style: dashed;
-///   }
-///
-/// @require {mixin} _directional-property
-
-@mixin border-style($values...) {
-  @include _directional-property(border, style, $values...);
-}
diff --git a/_sass/bourbon/bourbon/library/_border-width.scss b/_sass/bourbon/bourbon/library/_border-width.scss
deleted file mode 100644
index f3d4261..0000000
--- a/_sass/bourbon/bourbon/library/_border-width.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-width` on specific sides of a
-/// box. Use a `null` value to “skip” a side.
-///
-/// @argument {arglist} $values
-///   List of border widths, defined as CSS shorthand.
-///
-/// @example scss
-///   .element {
-///     @include border-width(1em null 20px);
-///   }
-///
-/// @example css
-///   .element {
-///     border-bottom-width: 20px;
-///     border-top-width: 1em;
-///   }
-///
-/// @require {mixin} _directional-property
-
-@mixin border-width($values...) {
-  @include _directional-property(border, width, $values...);
-}
diff --git a/_sass/bourbon/bourbon/library/_buttons.scss b/_sass/bourbon/bourbon/library/_buttons.scss
deleted file mode 100644
index 3f7e468..0000000
--- a/_sass/bourbon/bourbon/library/_buttons.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@charset "UTF-8";
-
-////
-/// @type list
-///
-/// @require {function} _assign-inputs
-///
-/// @require {variable} $_buttons-list
-////
-
-/// A list of all HTML button elements. Please note that you must interpolate
-/// the variable (`#{}`) to use it as a selector.
-///
-/// @example scss
-///   #{$all-buttons} {
-///     background-color: #f00;
-///   }
-///
-/// @example css
-///   button,
-///   [type='button'],
-///   [type='reset'],
-///   [type='submit'] {
-///     background-color: #f00;
-///   }
-
-$all-buttons: _assign-inputs($_buttons-list);
-
-/// A list of all HTML button elements with the `:active` pseudo-class applied.
-/// Please note that you must interpolate the variable (`#{}`) to use it as a
-/// selector.
-///
-/// @example scss
-///   #{$all-buttons-active} {
-///     background-color: #00f;
-///   }
-///
-/// @example css
-///   button:active,
-///   [type='button']:active,
-///   [type='reset']:active,
-///   [type='submit']:active {
-///     background-color: #00f;
-///   }
-
-$all-buttons-active: _assign-inputs($_buttons-list, active);
-
-/// A list of all HTML button elements with the `:focus` pseudo-class applied.
-/// Please note that you must interpolate the variable (`#{}`) to use it as a
-/// selector.
-///
-/// @example scss
-///   #{$all-buttons-focus} {
-///     background-color: #0f0;
-///   }
-///
-/// @example css
-///   button:focus,
-///   [type='button']:focus,
-///   [type='reset']:focus,
-///   [type='submit']:focus {
-///     background-color: #0f0;
-///   }
-
-$all-buttons-focus: _assign-inputs($_buttons-list, focus);
-
-/// A list of all HTML button elements with the `:hover` pseudo-class applied.
-/// Please note that you must interpolate the variable (`#{}`) to use it as a
-/// selector.
-///
-/// @example scss
-///   #{$all-buttons-hover} {
-///     background-color: #0f0;
-///   }
-///
-/// @example css
-///   button:hover,
-///   [type='button']:hover,
-///   [type='reset']:hover,
-///   [type='submit']:hover {
-///     background-color: #0f0;
-///   }
-
-$all-buttons-hover: _assign-inputs($_buttons-list, hover);
diff --git a/_sass/bourbon/bourbon/library/_clearfix.scss b/_sass/bourbon/bourbon/library/_clearfix.scss
deleted file mode 100644
index e68efc4..0000000
--- a/_sass/bourbon/bourbon/library/_clearfix.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@charset "UTF-8";
-
-/// Provides an easy way to include a clearfix for containing floats.
-///
-/// @link http://goo.gl/yP5hiZ
-///
-/// @example scss
-///   .element {
-///     @include clearfix;
-///   }
-///
-/// @example css
-///   .element::after {
-///     clear: both;
-///     content: "";
-///     display: block;
-///   }
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: "";
-    display: block;
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_contrast-switch.scss b/_sass/bourbon/bourbon/library/_contrast-switch.scss
deleted file mode 100644
index a79995c..0000000
--- a/_sass/bourbon/bourbon/library/_contrast-switch.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-
-/// Switches between two colors based on the lightness of a another color. Great
-/// for building button styles.
-///
-/// @argument {color} $base-color
-///   The color to evaluate lightness against.
-///
-/// @argument {color} $dark-color [#000]
-///   The color to be output when `$base-color` is light.
-///
-/// @argument {color} $light-color [#fff]
-///   The color to be output when `$base-color` is dark.
-///
-/// @return {color}
-///
-/// @example scss
-///   .first-element {
-///     color: contrast-switch(#bae6e6);
-///   }
-///
-///   .second-element {
-///     $button-color: #2d72d9;
-///     background-color: $button-color;
-///     color: contrast-switch($button-color, #222, #eee);
-///   }
-///
-/// @example css
-///   .first-element {
-///     color: #000;
-///   }
-///
-///   .second-element {
-///     background-color: #2d72d9;
-///     color: #eee;
-///   }
-///
-/// @require {function} _is-light
-///
-/// @since 5.0.0
-
-@function contrast-switch(
-    $base-color,
-    $dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
-    $light-color: _retrieve-bourbon-setting("contrast-switch-light-color")
-  ) {
-
-  @if not _is-color($base-color) {
-    @error "`#{$base-color}` is not a valid color for the `$base-color` " +
-           "argument in the `contrast-switch` function.";
-  } @else if not _is-color($dark-color) {
-    @error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
-           "argument in the `contrast-switch` function.";
-  } @else if not _is-color($light-color) {
-    @error "`#{$light-color}` is not a valid color for the `$light-color` " +
-           "argument in the `contrast-switch` function.";
-  } @else {
-    @return if(_is-light($base-color), $dark-color, $light-color);
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_ellipsis.scss b/_sass/bourbon/bourbon/library/_ellipsis.scss
deleted file mode 100644
index bce32e5..0000000
--- a/_sass/bourbon/bourbon/library/_ellipsis.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@charset "UTF-8";
-
-/// Truncates text and adds an ellipsis to represent overflow.
-///
-/// @argument {number} $width [100%]
-///   The `max-width` for the string to respect before being truncated.
-///
-/// @argument {string} $display [inline-block]
-///   Sets the display-value of the element.
-///
-/// @example scss
-///   .element {
-///     @include ellipsis;
-///   }
-///
-/// @example css
-///   .element {
-///     display: inline-block;
-///     max-width: 100%;
-///     overflow: hidden;
-///     text-overflow: ellipsis;
-///     white-space: nowrap;
-///     word-wrap: normal;
-///   }
-
-@mixin ellipsis(
-    $width: 100%,
-    $display: inline-block
-  ) {
-
-  display: $display;
-  max-width: $width;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-}
diff --git a/_sass/bourbon/bourbon/library/_font-face.scss b/_sass/bourbon/bourbon/library/_font-face.scss
deleted file mode 100644
index 9223e7e..0000000
--- a/_sass/bourbon/bourbon/library/_font-face.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@charset "UTF-8";
-
-/// Generates an `@font-face` declaration. You can choose the specific file
-/// formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
-/// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
-/// which you can enable per use, or globally in the `$bourbon()` settings.
-///
-/// @argument {string} $font-family
-///
-/// @argument {string} $file-path
-///
-/// @argument {string} $asset-pipeline [false]
-///   Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
-///   in `app/assets/fonts/`).
-///
-/// @argument {string | list} $file-formats [("ttf", "woff2", "woff")]
-///   Pass a list of file formats to support,
-///   for example ("eot", "ttf", "svg", "woff2", "woff").
-///
-/// @content
-///   Any additional CSS properties that are included in the `@include`
-///   directive will be output within the `@font-face` declaration, e.g. you can
-///   pass in `font-weight`, `font-style` and/or `unicode-range`.
-///
-/// @example scss
-///   @include font-face(
-///       "source-sans-pro",
-///       "fonts/source-sans-pro-regular",
-///       ("woff2", "woff")
-///     ) {
-///     font-style: normal;
-///     font-weight: 400;
-///   }
-///
-/// @example css
-///   @font-face {
-///     font-family: "source-sans-pro";
-///     src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
-///          url("fonts/source-sans-pro-regular.woff") format("woff");
-///     font-style: normal;
-///     font-weight: 400;
-///   }
-///
-/// @require {function} _font-source-declaration
-///
-/// @require {function} _retrieve-bourbon-setting
-
-@mixin font-face(
-    $font-family,
-    $file-path,
-    $file-formats: _retrieve-bourbon-setting("global-font-file-formats"),
-    $asset-pipeline: _retrieve-bourbon-setting("rails-asset-pipeline")
-  ) {
-
-  @font-face {
-    font-family: $font-family;
-    src: _font-source-declaration(
-      $font-family,
-      $file-path,
-      $asset-pipeline,
-      $file-formats
-    );
-    @content;
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_font-stacks.scss b/_sass/bourbon/bourbon/library/_font-stacks.scss
deleted file mode 100644
index f9cbe1e..0000000
--- a/_sass/bourbon/bourbon/library/_font-stacks.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-
-////
-/// @type list
-///
-/// @link goo.gl/Cxb26i
-////
-
-$font-stack-helvetica: (
-  "Helvetica Neue",
-  "Helvetica",
-  "Arial",
-  sans-serif,
-);
-
-$font-stack-lucida-grande: (
-  "Lucida Grande",
-  "Lucida Sans Unicode",
-  "Geneva",
-  "Verdana",
-  sans-serif,
-);
-
-$font-stack-verdana: (
-  "Verdana",
-  "Geneva",
-  sans-serif,
-);
-
-$font-stack-system: (
-  -apple-system,
-  BlinkMacSystemFont,
-  "Segoe UI",
-  "Roboto",
-  "Oxygen",
-  "Ubuntu",
-  "Cantarell",
-  "Fira Sans",
-  "Droid Sans",
-  "Helvetica Neue",
-  sans-serif,
-);
-
-$font-stack-garamond: (
-  "Garamond",
-  "Baskerville",
-  "Baskerville Old Face",
-  "Hoefler Text",
-  "Times New Roman",
-  serif,
-);
-
-$font-stack-georgia: (
-  "Georgia",
-  "Times",
-  "Times New Roman",
-  serif,
-);
-
-$font-stack-hoefler-text: (
-  "Hoefler Text",
-  "Baskerville Old Face",
-  "Garamond",
-  "Times New Roman",
-  serif,
-);
-
-$font-stack-consolas: (
-  "Consolas",
-  "monaco",
-  monospace,
-);
-
-$font-stack-courier-new: (
-  "Courier New",
-  "Courier",
-  "Lucida Sans Typewriter",
-  "Lucida Typewriter",
-  monospace,
-);
-
-$font-stack-monaco: (
-  "monaco",
-  "Consolas",
-  "Lucida Console",
-  monospace,
-);
diff --git a/_sass/bourbon/bourbon/library/_hide-text.scss b/_sass/bourbon/bourbon/library/_hide-text.scss
deleted file mode 100644
index c340b70..0000000
--- a/_sass/bourbon/bourbon/library/_hide-text.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@charset "UTF-8";
-
-/// Hides the text in an element, commonly used to show an image instead. Some
-/// elements will need block-level styles applied.
-///
-/// @link http://goo.gl/EvLRIu
-///
-/// @example scss
-///   .element {
-///     @include hide-text;
-///   }
-///
-/// @example css
-///   .element {
-///     overflow: hidden;
-///     text-indent: 101%;
-///     white-space: nowrap;
-///   }
-
-@mixin hide-text {
-  overflow: hidden;
-  text-indent: 101%;
-  white-space: nowrap;
-}
diff --git a/_sass/bourbon/bourbon/library/_hide-visually.scss b/_sass/bourbon/bourbon/library/_hide-visually.scss
deleted file mode 100644
index caf7205..0000000
--- a/_sass/bourbon/bourbon/library/_hide-visually.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@charset "UTF-8";
-
-/// Hides an element visually while still allowing the content to be accessible
-/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
-/// the affects of the hiding, which is handy for showing the element on focus,
-/// for example.
-///
-/// @link http://goo.gl/Vf1TGn
-///
-/// @argument {string} $toggle [hide]
-///   Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
-///
-/// @example scss
-///   .element {
-///     @include hide-visually;
-///
-///     &:active,
-///     &:focus {
-///       @include hide-visually(unhide);
-///     }
-///   }
-///
-/// @example css
-///   .element {
-///     border: 0;
-///     clip: rect(1px, 1px, 1px, 1px);
-///     clip-path: circle(1% at 1% 1%);
-///     height: 1px;
-///     overflow: hidden;
-///     padding: 0;
-///     position: absolute;
-///     width: 1px;
-///   }
-///
-///   .hide-visually:active,
-///   .hide-visually:focus {
-///     clip: auto;
-///     clip-path: none;
-///     height: auto;
-///     overflow: visible;
-///     position: static;
-///     width: auto;
-///   }
-///
-/// @since 5.0.0
-
-@mixin hide-visually($toggle: hide) {
-  @if $toggle == "hide" {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: circle(1% at 1% 1%);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  } @else if $toggle == "unhide" {
-    clip: auto;
-    clip-path: none;
-    height: auto;
-    overflow: visible;
-    position: static;
-    width: auto;
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_margin.scss b/_sass/bourbon/bourbon/library/_margin.scss
deleted file mode 100644
index 5ea778e..0000000
--- a/_sass/bourbon/bourbon/library/_margin.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for targeting `margin` on specific sides of a
-/// box. Use a `null` value to “skip” a side.
-///
-/// @argument {arglist} $values
-///   List of margin values, defined as CSS shorthand.
-///
-/// @example scss
-///   .element-one {
-///     @include margin(null auto);
-///   }
-///
-///   .element-two {
-///     @include margin(10px 3em 20vh null);
-///   }
-///
-/// @example css
-///   .element-one {
-///     margin-left: auto;
-///     margin-right: auto;
-///   }
-///
-///   .element-two {
-///     margin-bottom: 20vh;
-///     margin-right: 3em;
-///     margin-top: 10px;
-///   }
-///
-/// @require {mixin} _directional-property
-
-@mixin margin($values...) {
-  @include _directional-property(margin, false, $values...);
-}
diff --git a/_sass/bourbon/bourbon/library/_modular-scale.scss b/_sass/bourbon/bourbon/library/_modular-scale.scss
deleted file mode 100644
index a4d6ebd..0000000
--- a/_sass/bourbon/bourbon/library/_modular-scale.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@charset "UTF-8";
-
-/// Increments up or down a defined scale and returns an adjusted value. This
-/// helps establish consistent measurements and spacial relationships throughout
-/// your project. We provide a list of commonly used scales as
-/// [pre-defined variables][scales].
-///
-/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/settings/_scales.scss
-///
-/// @argument {number (unitless)} $increment
-///   How many steps to increment up or down the scale.
-///
-/// @argument {number (with unit) | list} $value [1em]
-///   The base value the scale starts at.
-///
-/// @argument {number (unitless)} $ratio [1.25]
-///   The ratio the scale is built on.
-///
-/// @return {number (with unit)}
-///
-/// @example scss
-///   .first-element {
-///     font-size: modular-scale(2);
-///   }
-///
-///   .second-element {
-///     margin-right: modular-scale(3, 2em);
-///   }
-///
-///   .third-element {
-///     font-size: modular-scale(3, 1em 1.6em, $major-seventh);
-///   }
-///
-///   // Globally change the base ratio
-///   $bourbon: (
-///     "modular-scale-ratio": 1.2,
-///   );
-///
-///   .fourth-element {
-///     font-size: modular-scale(3);
-///   }
-///
-/// @example css
-///   .first-element {
-///     font-size: 1.5625em;
-///   }
-///
-///   .second-element {
-///     margin-right: 3.90625em;
-///   }
-///
-///   .third-element {
-///     font-size: 3em;
-///   }
-///
-///   .fourth-element {
-///     font-size: 1.728em;
-///   }
-///
-/// @require {function} _retrieve-bourbon-setting
-
-@function modular-scale(
-    $increment,
-    $value: _retrieve-bourbon-setting("modular-scale-base"),
-    $ratio: _retrieve-bourbon-setting("modular-scale-ratio")
-  ) {
-
-  $v1: nth($value, 1);
-  $v2: nth($value, length($value));
-  $value: $v1;
-
-  // scale $v2 to just above $v1
-  @while $v2 > $v1 {
-    $v2: ($v2 / $ratio); // will be off-by-1
-  }
-  @while $v2 < $v1 {
-    $v2: ($v2 * $ratio); // will fix off-by-1
-  }
-
-  // check AFTER scaling $v2 to prevent double-counting corner-case
-  $double-stranded: $v2 > $v1;
-
-  @if $increment > 0 {
-    @for $i from 1 through $increment {
-      @if $double-stranded and ($v1 * $ratio) > $v2 {
-        $value: $v2;
-        $v2: ($v2 * $ratio);
-      } @else {
-        $v1: ($v1 * $ratio);
-        $value: $v1;
-      }
-    }
-  }
-
-  @if $increment < 0 {
-    // adjust $v2 to just below $v1
-    @if $double-stranded {
-      $v2: ($v2 / $ratio);
-    }
-
-    @for $i from $increment through -1 {
-      @if $double-stranded and ($v1 / $ratio) < $v2 {
-        $value: $v2;
-        $v2: ($v2 / $ratio);
-      } @else {
-        $v1: ($v1 / $ratio);
-        $value: $v1;
-      }
-    }
-  }
-
-  @return $value;
-}
diff --git a/_sass/bourbon/bourbon/library/_padding.scss b/_sass/bourbon/bourbon/library/_padding.scss
deleted file mode 100644
index b2f328b..0000000
--- a/_sass/bourbon/bourbon/library/_padding.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for targeting `padding` on specific sides of a
-/// box. Use a `null` value to “skip” a side.
-///
-/// @argument {arglist} $values
-///   List of padding values, defined as CSS shorthand.
-///
-/// @example scss
-///   .element-one {
-///     @include padding(null 1rem);
-///   }
-///
-///   .element-two {
-///     @include padding(10vh null 10px 5%);
-///   }
-///
-/// @example css
-///   .element-one {
-///     padding-left: 1rem;
-///     padding-right: 1rem;
-///   }
-///
-///   .element-two {
-///     padding-bottom: 10px;
-///     padding-left: 5%;
-///     padding-top: 10vh;
-///   }
-///
-/// @require {mixin} _directional-property
-
-@mixin padding($values...) {
-  @include _directional-property(padding, false, $values...);
-}
diff --git a/_sass/bourbon/bourbon/library/_position.scss b/_sass/bourbon/bourbon/library/_position.scss
deleted file mode 100644
index 7bb1beb..0000000
--- a/_sass/bourbon/bourbon/library/_position.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@charset "UTF-8";
-
-/// Provides a quick method for setting an element’s position. Use a `null`
-/// value to “skip” a side.
-///
-/// @argument {string} $position [relative]
-///   A CSS position value.
-///
-/// @argument {arglist} $coordinates [null]
-///   List of lengths, defined as CSS shorthand.
-///
-/// @example scss
-///   .element {
-///     @include position(absolute, 0 null null 10em);
-///   }
-///
-/// @example css
-///   .element {
-///     left: 10em;
-///     position: absolute;
-///     top: 0;
-///   }
-///
-/// @require {function} _is-length
-///
-/// @require {function} _unpack
-
-@mixin position(
-    $position: relative,
-    $coordinates: null
-  ) {
-
-  @if type-of($position) == list {
-    $coordinates: $position;
-    $position: relative;
-  }
-
-  $coordinates: _unpack($coordinates);
-
-  $offsets: (
-    top:    nth($coordinates, 1),
-    right:  nth($coordinates, 2),
-    bottom: nth($coordinates, 3),
-    left:   nth($coordinates, 4),
-  );
-
-  position: $position;
-
-  @each $offset, $value in $offsets {
-    @if _is-length($value) {
-      #{$offset}: $value;
-    }
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_prefixer.scss b/_sass/bourbon/bourbon/library/_prefixer.scss
deleted file mode 100644
index 8d88165..0000000
--- a/_sass/bourbon/bourbon/library/_prefixer.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@charset "UTF-8";
-
-/// Generates vendor prefixes.
-///
-/// @argument {string} $property
-///   Property to prefix.
-///
-/// @argument {string} $value
-///   Value to use.
-///
-/// @argument {list} $prefixes
-///   Vendor prefixes to output.
-///
-/// @example scss
-///   .element {
-///     @include prefixer(appearance, none, ("webkit", "moz"));
-///   }
-///
-/// @example css
-///   .element {
-///     -webkit-appearance: none;
-///     -moz-appearance: none;
-///     appearance: none;
-///   }
-///
-/// @author Hugo Giraudel
-
-@mixin prefixer(
-    $property,
-    $value,
-    $prefixes: ()
-  ) {
-
-  @each $prefix in $prefixes {
-    #{"-" + $prefix + "-" + $property}: $value;
-  }
-  #{$property}: $value;
-}
diff --git a/_sass/bourbon/bourbon/library/_shade.scss b/_sass/bourbon/bourbon/library/_shade.scss
deleted file mode 100644
index cc0a4d8..0000000
--- a/_sass/bourbon/bourbon/library/_shade.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-/// Mixes a color with black.
-///
-/// @argument {color} $color
-///
-/// @argument {number (percentage)} $percent
-///   The amount of black to be mixed in.
-///
-/// @return {color}
-///
-/// @example scss
-///   .element {
-///     background-color: shade(#ffbb52, 60%);
-///   }
-///
-/// @example css
-///   .element {
-///     background-color: #664a20;
-///   }
-
-@function shade(
-    $color,
-    $percent
-  ) {
-
-  @if not _is-color($color) {
-    @error "`#{$color}` is not a valid color for the `$color` argument in " +
-           "the `shade` mixin.";
-  } @else {
-    @return mix(#000, $color, $percent);
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_size.scss b/_sass/bourbon/bourbon/library/_size.scss
deleted file mode 100644
index da4f21d..0000000
--- a/_sass/bourbon/bourbon/library/_size.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@charset "UTF-8";
-
-/// Sets the `width` and `height` of the element in one statement.
-///
-/// @argument {number (with unit) | string} $width
-///
-/// @argument {number (with unit) | string} $height [$width]
-///
-/// @example scss
-///   .first-element {
-///     @include size(2em);
-///   }
-///
-///   .second-element {
-///     @include size(auto, 10em);
-///   }
-///
-/// @example css
-///   .first-element {
-///     width: 2em;
-///     height: 2em;
-///   }
-///
-///   .second-element {
-///     width: auto;
-///     height: 10em;
-///   }
-///
-/// @require {function} _is-size
-
-@mixin size(
-    $width,
-    $height: $width
-  ) {
-
-  @if _is-size($height) {
-    height: $height;
-  } @else {
-    @error "`#{$height}` is not a valid length for the `$height` argument " +
-           "in the `size` mixin.";
-  }
-
-  @if _is-size($width) {
-    width: $width;
-  } @else {
-    @error "`#{$width}` is not a valid length for the `$width` argument " +
-           "in the `size` mixin.";
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_strip-unit.scss b/_sass/bourbon/bourbon/library/_strip-unit.scss
deleted file mode 100644
index 7c4b6b5..0000000
--- a/_sass/bourbon/bourbon/library/_strip-unit.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@charset "UTF-8";
-
-/// Strips the unit from a number.
-///
-/// @argument {number} $value
-///
-/// @return {number (unitless)}
-///
-/// @example scss
-///   $dimension: strip-unit(10em);
-///
-/// @example css
-///   $dimension: 10;
-
-@function strip-unit($value) {
-  @return ($value / ($value * 0 + 1));
-}
diff --git a/_sass/bourbon/bourbon/library/_text-inputs.scss b/_sass/bourbon/bourbon/library/_text-inputs.scss
deleted file mode 100644
index 3d441e0..0000000
--- a/_sass/bourbon/bourbon/library/_text-inputs.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-@charset "UTF-8";
-
-////
-/// @type list
-///
-/// @require {function} _assign-inputs
-///
-/// @require {variable} $_text-inputs-list
-////
-
-/// A list of all _text-based_ HTML inputs. Please note that you must
-/// interpolate the variable (`#{}`) to use it as a selector.
-///
-/// @example scss
-///   #{$all-text-inputs} {
-///     border: 1px solid #ccc;
-///   }
-///
-/// @example css
-///   [type='color'],
-///   [type='date'],
-///   [type='datetime'],
-///   [type='datetime-local'],
-///   [type='email'],
-///   [type='month'],
-///   [type='number'],
-///   [type='password'],
-///   [type='search'],
-///   [type='tel'],
-///   [type='text'],
-///   [type='time'],
-///   [type='url'],
-///   [type='week'],
-///   input:not([type]),
-///   textarea {
-///     border: 1px solid #ccc;
-///   }
-
-$all-text-inputs: _assign-inputs($_text-inputs-list);
-
-/// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
-/// applied. Please note that you must interpolate the variable (`#{}`) to use
-/// it as a selector.
-///
-/// @example scss
-///   #{$all-text-inputs-active} {
-///     border: 1px solid #aaa;
-///   }
-///
-/// @example css
-///   [type='color']:active,
-///   [type='date']:active,
-///   [type='datetime']:active,
-///   [type='datetime-local']:active,
-///   [type='email']:active,
-///   [type='month']:active,
-///   [type='number']:active,
-///   [type='password']:active,
-///   [type='search']:active,
-///   [type='tel']:active,
-///   [type='text']:active,
-///   [type='time']:active,
-///   [type='url']:active,
-///   [type='week']:active,
-///   input:not([type]):active,
-///   textarea:active {
-///     border: 1px solid #aaa;
-///   }
-
-$all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
-
-/// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
-/// applied. Please note that you must interpolate the variable (`#{}`) to use
-/// it as a selector.
-///
-/// @example scss
-///   #{$all-text-inputs-focus} {
-///     border: 1px solid #1565c0;
-///   }
-///
-/// @example css
-///   [type='color']:focus,
-///   [type='date']:focus,
-///   [type='datetime']:focus,
-///   [type='datetime-local']:focus,
-///   [type='email']:focus,
-///   [type='month']:focus,
-///   [type='number']:focus,
-///   [type='password']:focus,
-///   [type='search']:focus,
-///   [type='tel']:focus,
-///   [type='text']:focus,
-///   [type='time']:focus,
-///   [type='url']:focus,
-///   [type='week']:focus,
-///   input:not([type]):focus,
-///   textarea:focus {
-///     border: 1px solid #1565c0;
-///   }
-
-$all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
-
-/// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
-/// applied. Please note that you must interpolate the variable (`#{}`) to use
-/// it as a selector.
-///
-/// @example scss
-///   #{$all-text-inputs-hover} {
-///     border: 1px solid #aaa;
-///   }
-///
-/// @example css
-///   [type='color']:hover,
-///   [type='date']:hover,
-///   [type='datetime']:hover,
-///   [type='datetime-local']:hover,
-///   [type='email']:hover,
-///   [type='month']:hover,
-///   [type='number']:hover,
-///   [type='password']:hover,
-///   [type='search']:hover,
-///   [type='tel']:hover,
-///   [type='text']:hover,
-///   [type='time']:hover,
-///   [type='url']:hover,
-///   [type='week']:hover,
-///   input:not([type]):hover,
-///   textarea:hover {
-///     border: 1px solid #aaa;
-///   }
-
-$all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
-
-/// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
-/// applied. Please note that you must interpolate the variable (`#{}`) to use
-/// it as a selector.
-///
-/// @example scss
-///   #{$all-text-inputs-invalid} {
-///     border: 1px solid #00f;
-///   }
-///
-/// @example css
-///   [type='color']:invalid,
-///   [type='date']:invalid,
-///   [type='datetime']:invalid,
-///   [type='datetime-local']:invalid,
-///   [type='email']:invalid,
-///   [type='month']:invalid,
-///   [type='number']:invalid,
-///   [type='password']:invalid,
-///   [type='search']:invalid,
-///   [type='tel']:invalid,
-///   [type='text']:invalid,
-///   [type='time']:invalid,
-///   [type='url']:invalid,
-///   [type='week']:invalid,
-///   input:not([type]):invalid,
-///   textarea:invalid {
-///     border: 1px solid #00f;
-///   }
-
-$all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);
diff --git a/_sass/bourbon/bourbon/library/_timing-functions.scss b/_sass/bourbon/bourbon/library/_timing-functions.scss
deleted file mode 100644
index b5c70b7..0000000
--- a/_sass/bourbon/bourbon/library/_timing-functions.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@charset "UTF-8";
-
-// scss-lint:disable SpaceAfterComma, UnnecessaryMantissa, TrailingZero
-
-////
-/// CSS cubic-bezier timing functions.
-///
-/// @link http://goo.gl/p8u6SK
-///
-/// @type string
-////
-
-$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
-$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
-$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
-$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
-$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
-$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
-$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
-$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
-
-$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
-$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
-$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
-$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
-$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
-$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
-$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
-$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
-
-$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
-$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
-$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
-$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
-$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
-$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
-$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/_sass/bourbon/bourbon/library/_tint.scss b/_sass/bourbon/bourbon/library/_tint.scss
deleted file mode 100644
index 0152c59..0000000
--- a/_sass/bourbon/bourbon/library/_tint.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-/// Mixes a color with white.
-///
-/// @argument {color} $color
-///
-/// @argument {number (percentage)} $percent
-///   The amount of white to be mixed in.
-///
-/// @return {color}
-///
-/// @example scss
-///   .element {
-///     background-color: tint(#6ecaa6, 40%);
-///   }
-///
-/// @example css
-///   .element {
-///     background-color: #a8dfc9;
-///   }
-
-@function tint(
-    $color,
-    $percent
-  ) {
-
-  @if not _is-color($color) {
-    @error "`#{$color}` is not a valid color for the `$color` argument in " +
-           "the `tint` mixin.";
-  } @else {
-    @return mix(#fff, $color, $percent);
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_triangle.scss b/_sass/bourbon/bourbon/library/_triangle.scss
deleted file mode 100644
index 2bc86a2..0000000
--- a/_sass/bourbon/bourbon/library/_triangle.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@charset "UTF-8";
-
-/// Generates a triangle pointing in a specified direction.
-///
-/// @argument {string} $direction [up]
-///   The direction the triangle should point. Accepts `up`, `up-right`,
-///   `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
-///
-/// @argument {color} $color [currentColor]
-///   Color of the triangle.
-///
-/// @argument {number (with unit)} $width [1rem]
-///   Width of the triangle.
-///
-/// @argument {number (with unit)} $height [($width / 2)]
-///   Height of the triangle.
-///
-/// @example scss
-///   .element {
-///     &::before {
-///       @include triangle(up, #b25c9c, 2rem);
-///       content: "";
-///     }
-///   }
-///
-/// @example css
-///   .element::before {
-///     border-style: solid;
-///     height: 0;
-///     width: 0;
-///     border-color: transparent transparent #b25c9c transparent;
-///     border-width: 0 1rem 1rem;
-///     content: "";
-///   }
-
-@mixin triangle(
-    $direction: up,
-    $color: currentColor,
-    $width: 1rem,
-    $height: ($width / 2)
-  ) {
-  @if not index(
-      "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
-      $direction
-    ) {
-    @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
-           "`down`, `down-left`, `left` or `up-left`.";
-  } @else if not _is-color($color) {
-    @error "`#{$color}` is not a valid color for the `$color` argument in " +
-           "the `triangle` mixin.";
-  } @else {
-    border-style: solid;
-    height: 0;
-    width: 0;
-
-    @if $direction == "up" {
-      border-color: transparent transparent $color;
-      border-width: 0 ($width / 2) $height;
-    } @else if $direction == "up-right" {
-      border-color: transparent $color transparent transparent;
-      border-width: 0 $width $width 0;
-    } @else if $direction == "right" {
-      border-color: transparent transparent transparent $color;
-      border-width: ($height / 2) 0 ($height / 2) $width;
-    } @else if $direction == "down-right" {
-      border-color: transparent transparent $color;
-      border-width: 0 0 $width $width;
-    } @else if $direction == "down" {
-      border-color: $color transparent transparent;
-      border-width: $height ($width / 2) 0;
-    } @else if $direction == "down-left" {
-      border-color: transparent transparent transparent $color;
-      border-width: $width 0 0 $width;
-    } @else if $direction == "left" {
-      border-color: transparent $color transparent transparent;
-      border-width: ($height / 2) $width ($height / 2) 0;
-    } @else if $direction == "up-left" {
-      border-color: $color transparent transparent;
-      border-width: $width $width 0 0;
-    }
-  }
-}
diff --git a/_sass/bourbon/bourbon/library/_value-prefixer.scss b/_sass/bourbon/bourbon/library/_value-prefixer.scss
deleted file mode 100644
index da70275..0000000
--- a/_sass/bourbon/bourbon/library/_value-prefixer.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@charset "UTF-8";
-
-/// Generates vendor prefixes for values.
-///
-/// @argument {string} $property
-///   Property to use.
-///
-/// @argument {string} $value
-///   Value to prefix.
-///
-/// @argument {list} $prefixes
-///   Vendor prefixes to output.
-///
-/// @example scss
-///   .element {
-///     @include value-prefixer(cursor, grab, ("webkit", "moz"));
-///   }
-///
-/// @example css
-///   .element {
-///     cursor: -webkit-grab;
-///     cursor: -moz-grab;
-///     cursor: grab;
-///   }
-///
-/// @author Matthew Tobiasz
-
-@mixin value-prefixer(
-    $property,
-    $value,
-    $prefixes: ()
-  ) {
-
-  @each $prefix in $prefixes {
-    #{$property}: #{"-" + $prefix + "-" + $value};
-  }
-  #{$property}: $value;
-}
diff --git a/_sass/bourbon/bourbon/library/_word-wrap.scss b/_sass/bourbon/bourbon/library/_word-wrap.scss
deleted file mode 100644
index 5cfbc90..0000000
--- a/_sass/bourbon/bourbon/library/_word-wrap.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-
-/// Provides an easy way to change the `word-wrap` property.
-///
-/// @argument {string} $wrap [break-word]
-///   Value for the `word-break` property.
-///
-/// @example scss
-///   .wrapper {
-///     @include word-wrap(break-word);
-///   }
-///
-/// @example css
-///   .wrapper {
-///     overflow-wrap: break-word;
-///     word-break: break-all;
-///     word-wrap: break-word;
-///   }
-
-@mixin word-wrap($wrap: break-word) {
-  overflow-wrap: $wrap;
-  word-wrap: $wrap;
-
-  @if $wrap == break-word {
-    word-break: break-all;
-  } @else {
-    word-break: $wrap;
-  }
-}
diff --git a/_sass/bourbon/bourbon/settings/_settings.scss b/_sass/bourbon/bourbon/settings/_settings.scss
deleted file mode 100644
index c8b153b..0000000
--- a/_sass/bourbon/bourbon/settings/_settings.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@charset "UTF-8";
-
-/// Default Bourbon configuration settings.
-///
-/// @type map
-///
-/// @property {color} contrast-switch-dark-color [#000]
-///   Global dark color for the `contrast-switch` function.
-///
-/// @property {color} contrast-switch-light-color [#fff]
-///   Global light color for the `contrast-switch` function.
-///
-/// @property {list} global-font-file-formats [("ttf", "woff2", "woff")]
-///   Global font file formats for the `font-face` mixin.
-///
-/// @property {number (with unit)} modular-scale-base [1em]
-///   Global base value for the `modular-scale` function.
-///
-/// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)]
-///   Global base ratio for the `modular-scale` function.
-///
-/// @property {boolean} rails-asset-pipeline [false]
-///   Enable or disable the `$asset-pipeline` variable for all functions that
-///   accept it.
-///
-/// @access private
-
-$_bourbon-defaults: (
-  "contrast-switch-dark-color": #000,
-  "contrast-switch-light-color": #fff,
-  "global-font-file-formats": ("ttf", "woff2", "woff"),
-  "modular-scale-base": 1em,
-  "modular-scale-ratio": $major-third,
-  "rails-asset-pipeline": false,
-);
-
-/// User overrides of Bourbon configuration settings.
-///
-/// @type map
-///
-/// @example scss
-///   $bourbon: (
-///     "contrast-switch-dark-color": #000,
-///     "contrast-switch-light-color": #fff,
-///     "global-font-file-formats": ("ttf", "woff2", "woff"),
-///     "modular-scale-base": 1em,
-///     "modular-scale-ratio": $major-third,
-///     "rails-asset-pipeline": false,
-///   );
-
-$bourbon: () !default;
diff --git a/_sass/bourbon/bourbon/utilities/_assign-inputs.scss b/_sass/bourbon/bourbon/utilities/_assign-inputs.scss
deleted file mode 100644
index 2d4479c..0000000
--- a/_sass/bourbon/bourbon/utilities/_assign-inputs.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-
-/// Append pseudo-classes to a selector(s).
-///
-/// @argument {list | string} $inputs
-///   A selector, or list of selectors, to apply the pseudo-class to.
-///
-/// @argument {pseudo-class} $pseudo [null]
-///   The pseudo-class to be appended.
-///
-/// @return {list}
-///
-/// @access private
-
-@function _assign-inputs(
-    $inputs,
-    $pseudo: null
-  ) {
-
-  $list: ();
-
-  @each $input in $inputs {
-    $input: unquote($input);
-    $input: if($pseudo, $input + ":" + $pseudo, $input);
-    $list: append($list, $input, comma);
-  }
-
-  @return $list;
-}
diff --git a/_sass/bourbon/bourbon/utilities/_collapse-directionals.scss b/_sass/bourbon/bourbon/utilities/_collapse-directionals.scss
deleted file mode 100644
index 99d2f5e..0000000
--- a/_sass/bourbon/bourbon/utilities/_collapse-directionals.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@charset "UTF-8";
-
-// scss-lint:disable ElsePlacement
-
-/// Directional-property mixins are shorthands for writing properties like
-/// the following.
-///
-/// @ignore You can also use `false` instead of `null`.
-///
-/// @argument {list} $values
-///   List of directional values.
-///
-/// @example scss - Usage
-///   .element {
-///     @include border-style(dotted null);
-///     @include margin(null 0 10px);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     border-bottom-style: dotted;
-///     border-top-style: dotted;
-///     margin-bottom: 10px;
-///     margin-left: 0;
-///     margin-right: 0;
-///   }
-///
-/// @return {list}
-///
-/// @access private
-
-@function _collapse-directionals($values) {
-  $output: null;
-
-  $a: nth($values, 1);
-  $b: if(length($values) < 2, $a, nth($values, 2));
-  $c: if(length($values) < 3, $a, nth($values, 3));
-  $d: if(length($values) < 2, $a, nth($values, if(length($values) < 4, 2, 4)));
-
-  @if $a == 0 { $a: 0; }
-  @if $b == 0 { $b: 0; }
-  @if $c == 0 { $c: 0; }
-  @if $d == 0 { $d: 0; }
-
-  @if $a == $b and $a == $c and $a == $d { $output: $a;          }
-  @else if $a == $c and $b == $d         { $output: $a $b;       }
-  @else if $b == $d                      { $output: $a $b $c;    }
-  @else                                  { $output: $a $b $c $d; }
-
-  @return $output;
-}
diff --git a/_sass/bourbon/bourbon/utilities/_directional-values.scss b/_sass/bourbon/bourbon/utilities/_directional-values.scss
deleted file mode 100644
index f484f55..0000000
--- a/_sass/bourbon/bourbon/utilities/_directional-values.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@charset "UTF-8";
-
-// scss-lint:disable SpaceAroundOperator
-
-/// Output directional properties, for instance `margin`.
-///
-/// @argument {string} $pre
-///   Prefix to use.
-///
-/// @argument {string} $suf
-///   Suffix to use.
-///
-/// @argument {list} $values
-///   List of values.
-///
-/// @require {function} _collapse-directionals
-///
-/// @require {function} _contains-falsy
-///
-/// @access private
-
-@mixin _directional-property(
-    $pre,
-    $suf,
-    $values
-  ) {
-
-  $top:    $pre + "-top"    + if($suf, "-#{$suf}", "");
-  $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
-  $left:   $pre + "-left"   + if($suf, "-#{$suf}", "");
-  $right:  $pre + "-right"  + if($suf, "-#{$suf}", "");
-  $all:    $pre +             if($suf, "-#{$suf}", "");
-
-  $values: _collapse-directionals($values);
-
-  @if _contains-falsy($values) {
-    @if nth($values, 1) { #{$top}: nth($values, 1); }
-
-    @if length($values) == 1 {
-      @if nth($values, 1) { #{$right}: nth($values, 1); }
-    } @else {
-      @if nth($values, 2) { #{$right}: nth($values, 2); }
-    }
-
-    @if length($values) == 2 {
-      @if nth($values, 1) { #{$bottom}: nth($values, 1); }
-      @if nth($values, 2) { #{$left}: nth($values, 2); }
-    } @else if length($values) == 3 {
-      @if nth($values, 3) { #{$bottom}: nth($values, 3); }
-      @if nth($values, 2) { #{$left}: nth($values, 2); }
-    } @else if length($values) == 4 {
-      @if nth($values, 3) { #{$bottom}: nth($values, 3); }
-      @if nth($values, 4) { #{$left}: nth($values, 4); }
-    }
-  } @else {
-    #{$all}: $values;
-  }
-}
diff --git a/_sass/bourbon/bourbon/utilities/_font-source-declaration.scss b/_sass/bourbon/bourbon/utilities/_font-source-declaration.scss
deleted file mode 100644
index 92c537f..0000000
--- a/_sass/bourbon/bourbon/utilities/_font-source-declaration.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@charset "UTF-8";
-
-/// Builds the `src` list for an `@font-face` declaration.
-///
-/// @link http://goo.gl/Ru1bKP
-///
-/// @argument {string} $font-family
-///
-/// @argument {string} $file-path
-///
-/// @argument {boolean} $asset-pipeline
-///
-/// @argument {list} $file-formats
-///
-/// @return {list}
-///
-/// @require {function} _contains
-///
-/// @access private
-
-@function _font-source-declaration(
-    $font-family,
-    $file-path,
-    $asset-pipeline,
-    $file-formats
-  ) {
-
-  $src: ();
-
-  $formats-map: (
-    eot:   "#{$file-path}.eot?#iefix" format("embedded-opentype"),
-    woff2: "#{$file-path}.woff2" format("woff2"),
-    woff:  "#{$file-path}.woff" format("woff"),
-    ttf:   "#{$file-path}.ttf" format("truetype"),
-    svg:   "#{$file-path}.svg##{$font-family}" format("svg"),
-  );
-
-  @each $key, $values in $formats-map {
-    @if _contains($file-formats, $key) {
-      $file-path: nth($values, 1);
-      $font-format: nth($values, 2);
-
-      @if $asset-pipeline == true {
-        $src: append($src, font-url($file-path) $font-format, comma);
-      } @else {
-        $src: append($src, url($file-path) $font-format, comma);
-      }
-    }
-  }
-
-  @return $src;
-}
diff --git a/_sass/bourbon/bourbon/utilities/_retrieve-bourbon-setting.scss b/_sass/bourbon/bourbon/utilities/_retrieve-bourbon-setting.scss
deleted file mode 100644
index 95b9ea2..0000000
--- a/_sass/bourbon/bourbon/utilities/_retrieve-bourbon-setting.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@charset "UTF-8";
-
-/// Return a Bourbon setting.
-///
-/// @argument {string} $setting
-///
-/// @return {boolean | color | list | number | string}
-///
-/// @example scss
-///   _retrieve-bourbon-setting(rails-asset-pipeline)
-///
-/// @access private
-
-@function _retrieve-bourbon-setting($setting) {
-  @return map-get(map-merge($_bourbon-defaults, $bourbon), $setting);
-}
diff --git a/_sass/bourbon/bourbon/utilities/_unpack.scss b/_sass/bourbon/bourbon/utilities/_unpack.scss
deleted file mode 100644
index 0eddf58..0000000
--- a/_sass/bourbon/bourbon/utilities/_unpack.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-
-/// Converts shorthand to the 4-value syntax.
-///
-/// @argument {list} $shorthand
-///
-/// @example scss
-///   .element {
-///     margin: _unpack(1em 2em);
-///   }
-///
-/// @example css
-///   .element {
-///     margin: 1em 2em 1em 2em;
-///   }
-///
-/// @access private
-
-@function _unpack($shorthand) {
-  @if length($shorthand) == 1 {
-    @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
-  } @else if length($shorthand) == 2 {
-    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
-  } @else if length($shorthand) == 3 {
-    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
-  } @else {
-    @return $shorthand;
-  }
-}
diff --git a/_sass/bourbon/bourbon/validators/_contains-falsy.scss b/_sass/bourbon/bourbon/validators/_contains-falsy.scss
deleted file mode 100644
index d993007..0000000
--- a/_sass/bourbon/bourbon/validators/_contains-falsy.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@charset "UTF-8";
-
-/// Checks if a list does not contains a value.
-///
-/// @argument {list} $list
-///   The list to check against.
-///
-/// @return {boolean}
-///
-/// @access private
-
-@function _contains-falsy($list) {
-  @each $item in $list {
-    @if not $item {
-      @return true;
-    }
-  }
-
-  @return false;
-}
diff --git a/_sass/bourbon/bourbon/validators/_contains.scss b/_sass/bourbon/bourbon/validators/_contains.scss
deleted file mode 100644
index a27bb96..0000000
--- a/_sass/bourbon/bourbon/validators/_contains.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-
-/// Checks if a list contains a value(s).
-///
-/// @argument {list} $list
-///   The list to check against.
-///
-/// @argument {list} $values
-///   A single value or list of values to check for.
-///
-/// @return {boolean}
-///
-/// @access private
-
-@function _contains(
-    $list,
-    $values...
-  ) {
-
-  @each $value in $values {
-    @if type-of(index($list, $value)) != "number" {
-      @return false;
-    }
-  }
-
-  @return true;
-}
diff --git a/_sass/bourbon/bourbon/validators/_is-color.scss b/_sass/bourbon/bourbon/validators/_is-color.scss
deleted file mode 100644
index fa40e74..0000000
--- a/_sass/bourbon/bourbon/validators/_is-color.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@charset "UTF-8";
-
-/// Checks for a valid CSS color.
-///
-/// @argument {string} $color
-///
-/// @return {boolean}
-///
-/// @access private
-
-@function _is-color($color) {
-  @return (type-of($color) == color) or ($color == "currentColor");
-}
diff --git a/_sass/bourbon/bourbon/validators/_is-length.scss b/_sass/bourbon/bourbon/validators/_is-length.scss
deleted file mode 100644
index aec94cf..0000000
--- a/_sass/bourbon/bourbon/validators/_is-length.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-/// Checks for a valid CSS length.
-///
-/// @argument {string} $value
-///
-/// @return {boolean}
-///
-/// @access private
-
-@function _is-length($value) {
-  @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
-       or index(auto inherit initial 0, $value)
-       or (type-of($value) == "number" and not(unitless($value))));
-}
diff --git a/_sass/bourbon/bourbon/validators/_is-light.scss b/_sass/bourbon/bourbon/validators/_is-light.scss
deleted file mode 100644
index ad41755..0000000
--- a/_sass/bourbon/bourbon/validators/_is-light.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@charset "UTF-8";
-
-/// Programatically determines whether a color is light or dark.
-///
-/// @link http://goo.gl/Dil4Y9
-///
-/// @argument {color (hex)} $hex-color
-///
-/// @return {boolean}
-///
-/// @example scss
-///   is-light($color)
-///
-/// @access private
-
-@function _is-light($hex-color) {
-  $-local-red: red(rgba($hex-color, 1));
-  $-local-green: green(rgba($hex-color, 1));
-  $-local-blue: blue(rgba($hex-color, 1));
-  $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
-
-  @return $-local-lightness > 0.6;
-}
diff --git a/_sass/bourbon/bourbon/validators/_is-number.scss b/_sass/bourbon/bourbon/validators/_is-number.scss
deleted file mode 100644
index 36fa086..0000000
--- a/_sass/bourbon/bourbon/validators/_is-number.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-/// Checks for a valid number.
-///
-/// @argument {number} $value
-///
-/// @require {function} _contains
-///
-/// @return {boolean}
-///
-/// @access private
-
-@function _is-number($value) {
-  @return _contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
-}
diff --git a/_sass/bourbon/bourbon/validators/_is-size.scss b/_sass/bourbon/bourbon/validators/_is-size.scss
deleted file mode 100644
index f68df1e..0000000
--- a/_sass/bourbon/bourbon/validators/_is-size.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@charset "UTF-8";
-
-/// Checks for a valid CSS size.
-///
-/// @argument {string} $value
-///
-/// @return {boolean}
-///
-/// @require {function} _contains
-///
-/// @require {function} _is-length
-///
-/// @access private
-
-@function _is-size($value) {
-  @return _is-length($value)
-          or _contains("fill" "fit-content" "min-content" "max-content", $value);
-}
diff --git a/_sass/neat/_neat-helpers.scss b/_sass/neat/_neat-helpers.scss
deleted file mode 100644
index 9c182d2..0000000
--- a/_sass/neat/_neat-helpers.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Functions
-@import "functions/private";
-@import "functions/new-breakpoint";
-
-// Settings
-@import "settings/grid";
-@import "settings/visual-grid";
-@import "settings/disable-warnings";
diff --git a/_sass/neat/_neat.scss b/_sass/neat/_neat.scss
deleted file mode 100644
index eef5b9f..0000000
--- a/_sass/neat/_neat.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Neat 1.7.4
-// http://neat.bourbon.io
-// Copyright 2012-2015 thoughtbot, inc.
-// MIT License
-
-// Helpers
-@import "neat-helpers";
-
-// Grid
-@import "grid/private";
-@import "grid/box-sizing";
-@import "grid/omega";
-@import "grid/outer-container";
-@import "grid/span-columns";
-@import "grid/row";
-@import "grid/shift";
-@import "grid/pad";
-@import "grid/fill-parent";
-@import "grid/media";
-@import "grid/to-deprecate";
-@import "grid/visual-grid";
-@import "grid/display-context";
-@import "grid/direction-context";
diff --git a/_sass/neat/functions/_new-breakpoint.scss b/_sass/neat/functions/_new-breakpoint.scss
deleted file mode 100644
index 41ab955..0000000
--- a/_sass/neat/functions/_new-breakpoint.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@charset "UTF-8";
-
-/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
-///
-/// @param {List} $query
-///   A list of media query features and values. Each `$feature` should have a corresponding `$value`.
-///
-///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
-///
-///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
-///
-/// @param {Number (unitless)} $total-columns [$grid-columns]
-///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
-///
-/// @example scss - Usage
-///   $mobile: new-breakpoint(max-width 480px 4);
-///
-///   .element {
-///     @include media($mobile) {
-///       @include span-columns(4);
-///     }
-///   }
-///
-/// @example css - CSS Output
-///   @media screen and (max-width: 480px) {
-///     .element {
-///       display: block;
-///       float: left;
-///       margin-right: 7.42297%;
-///       width: 100%;
-///     }
-///     .element:last-child {
-///       margin-right: 0;
-///     }
-///   }
-
-@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
-  @if length($query) == 1 {
-    $query: $default-feature nth($query, 1) $total-columns;
-  } @else if is-even(length($query)) {
-    $query: append($query, $total-columns);
-  }
-
-  @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
-    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
-  }
-
-  @return $query;
-}
diff --git a/_sass/neat/functions/_private.scss b/_sass/neat/functions/_private.scss
deleted file mode 100644
index 872d4dc..0000000
--- a/_sass/neat/functions/_private.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-// Not function for Libsass compatibility
-// https://github.com/sass/libsass/issues/368
-@function is-not($value) {
-  @return if($value, false, true);
-}
-
-// Checks if a number is even
-@function is-even($int) {
-  @return $int % 2 == 0;
-}
-
-// Checks if an element belongs to a list or not
-@function belongs-to($tested-item, $list) {
-  @return is-not(not-belongs-to($tested-item, $list));
-}
-
-@function not-belongs-to($tested-item, $list) {
-  @return is-not(index($list, $tested-item));
-}
-
-// Contains display value
-@function contains-display-value($query) {
-  @return belongs-to(table, $query)
-       or belongs-to(block, $query)
-       or belongs-to(inline-block, $query)
-       or belongs-to(inline, $query);
-}
-
-// Parses the first argument of span-columns()
-@function container-span($span: $span) {
-  @if length($span) == 3 {
-    $container-columns: nth($span, 3);
-    @return $container-columns;
-  } @else if length($span) == 2 {
-    $container-columns: nth($span, 2);
-    @return $container-columns;
-  }
-
-  @return $grid-columns;
-}
-
-@function container-shift($shift: $shift) {
-  $parent-columns: $grid-columns !default !global;
-
-  @if length($shift) == 3 {
-    $container-columns: nth($shift, 3);
-    @return $container-columns;
-  } @else if length($shift) == 2 {
-    $container-columns: nth($shift, 2);
-    @return $container-columns;
-  }
-
-  @return $parent-columns;
-}
-
-// Generates a striped background
-@function gradient-stops($grid-columns, $color: $visual-grid-color) {
-  $transparent: transparent;
-
-  $column-width: flex-grid(1, $grid-columns);
-  $gutter-width: flex-gutter($grid-columns);
-  $column-offset: $column-width;
-
-  $values: ($transparent 0, $color 0);
-
-  @for $i from 1 to $grid-columns*2 {
-    @if is-even($i) {
-      $values: append($values, $transparent $column-offset, comma);
-      $values: append($values, $color $column-offset, comma);
-      $column-offset: $column-offset + $column-width;
-    } @else {
-      $values: append($values, $color $column-offset, comma);
-      $values: append($values, $transparent $column-offset, comma);
-      $column-offset: $column-offset + $gutter-width;
-    }
-  }
-
-  @return $values;
-}
-
-// Layout direction
-@function get-direction($layout, $default) {
-  $direction: null;
-
-  @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
-    $direction: direction-from-layout($layout);
-  } @else {
-    $direction: direction-from-layout($default);
-  }
-
-  @return $direction;
-}
-
-@function direction-from-layout($layout) {
-  $direction: null;
-
-  @if to-upper-case($layout) == "LTR" {
-    $direction: right;
-  } @else {
-    $direction: left;
-  }
-
-  @return $direction;
-}
-
-@function get-opposite-direction($direction) {
-  $opposite-direction: left;
-
-  @if $direction == "left" {
-    $opposite-direction: right;
-  }
-
-  @return $opposite-direction;
-}
diff --git a/_sass/neat/grid/_box-sizing.scss b/_sass/neat/grid/_box-sizing.scss
deleted file mode 100644
index b6d3fec..0000000
--- a/_sass/neat/grid/_box-sizing.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-@if $border-box-sizing == true {
-  html { // http://bit.ly/1qk2tVR
-    box-sizing: border-box;
-  }
-
-  * {
-    &,
-    &::after,
-    &::before {
-      box-sizing: inherit;
-    }
-  }
-}
diff --git a/_sass/neat/grid/_direction-context.scss b/_sass/neat/grid/_direction-context.scss
deleted file mode 100644
index 7b0d46e..0000000
--- a/_sass/neat/grid/_direction-context.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-/// Changes the direction property used by other mixins called in the code block argument.
-///
-/// @param {String} $direction [left-to-right]
-///   Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
-///
-/// @example scss - Usage
-///   @include direction-context(right-to-left) {
-///    .right-to-left-block {
-///      @include span-columns(6);
-///     }
-///   }
-///
-/// @example css - CSS Output
-///   .right-to-left-block {
-///     float: right;
-///      ...
-///   }
-
-@mixin direction-context($direction: left-to-right) {
-  $scope-direction: $layout-direction;
-
-  @if to-lower-case($direction) == "left-to-right" {
-    $layout-direction: LTR !global;
-  } @else if to-lower-case($direction) == "right-to-left" {
-    $layout-direction: RTL !global;
-  }
-
-  @content;
-
-  $layout-direction: $scope-direction !global;
-}
diff --git a/_sass/neat/grid/_display-context.scss b/_sass/neat/grid/_display-context.scss
deleted file mode 100644
index ed9b063..0000000
--- a/_sass/neat/grid/_display-context.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@charset "UTF-8";
-
-/// Changes the display property used by other mixins called in the code block argument.
-///
-/// @param {String} $display [block]
-///   Display value to be used within the block. Can be `table` or `block`.
-///
-/// @example scss
-///   @include display-context(table) {
-///    .display-table {
-///      @include span-columns(6);
-///     }
-///   }
-///
-/// @example css
-///   .display-table {
-///      display: table-cell;
-///      ...
-///   }
-
-@mixin display-context($display: block) {
-  $scope-display: $container-display-table;
-  $container-display-table: $display == table !global;
-
-  @content;
-
-  $container-display-table: $scope-display !global;
-}
diff --git a/_sass/neat/grid/_fill-parent.scss b/_sass/neat/grid/_fill-parent.scss
deleted file mode 100644
index 415f0b1..0000000
--- a/_sass/neat/grid/_fill-parent.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@charset "UTF-8";
-
-/// Forces the element to fill its parent container.
-///
-/// @example scss - Usage
-///   .element {
-///     @include fill-parent;
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     width: 100%;
-///     box-sizing: border-box;
-///   }
-
-@mixin fill-parent() {
-  width: 100%;
-
-  @if $border-box-sizing == false {
-    box-sizing: border-box;
-  }
-}
diff --git a/_sass/neat/grid/_media.scss b/_sass/neat/grid/_media.scss
deleted file mode 100644
index bd516e9..0000000
--- a/_sass/neat/grid/_media.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@charset "UTF-8";
-
-/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).
-///
-/// @param {List} $query
-///   A list of media query features and values, where each `$feature` should have a corresponding `$value`.
-///   For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
-///
-///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
-///
-///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).
-///
-///
-/// @param {Number (unitless)} $total-columns [$grid-columns]
-///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
-///
-/// @example scss - Usage
-///   .responsive-element {
-///      @include media(769px) {
-///        @include span-columns(6);
-///      }
-///   }
-///
-///  .new-context-element {
-///    @include media(min-width 320px max-width 480px, 6) {
-///      @include span-columns(6);
-///    }
-///  }
-///
-/// @example css - CSS Output
-///  @media screen and (min-width: 769px) {
-///    .responsive-element {
-///      display: block;
-///      float: left;
-///      margin-right: 2.35765%;
-///      width: 48.82117%;
-///    }
-///
-///    .responsive-element:last-child {
-///      margin-right: 0;
-///    }
-///  }
-///
-///  @media screen and (min-width: 320px) and (max-width: 480px) {
-///    .new-context-element {
-///      display: block;
-///      float: left;
-///      margin-right: 4.82916%;
-///      width: 100%;
-///    }
-///
-///    .new-context-element:last-child {
-///      margin-right: 0;
-///    }
-///  }
-
-@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {
-  @if length($query) == 1 {
-    @media screen and ($default-feature: nth($query, 1)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: $total-columns !global;
-      @content;
-      $grid-columns: $default-grid-columns !global;
-    }
-  } @else {
-    $loop-to: length($query);
-    $media-query: "screen and ";
-    $default-grid-columns: $grid-columns;
-    $grid-columns: $total-columns !global;
-
-    @if is-not(is-even(length($query))) {
-      $grid-columns: nth($query, $loop-to) !global;
-      $loop-to: $loop-to - 1;
-    }
-
-    $i: 1;
-    @while $i <= $loop-to {
-      $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
-
-      @if ($i + 1) != $loop-to {
-        $media-query: $media-query + "and ";
-      }
-
-      $i: $i + 2;
-    }
-
-    @media #{$media-query} {
-      @content;
-      $grid-columns: $default-grid-columns !global;
-    }
-  }
-}
diff --git a/_sass/neat/grid/_omega.scss b/_sass/neat/grid/_omega.scss
deleted file mode 100644
index 80f918a..0000000
--- a/_sass/neat/grid/_omega.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-
-/// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts.
-///
-/// @param {List} $query [block]
-///   List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`).
-///
-///   When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature.
-///
-///   **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead.
-///
-/// @example scss - Usage
-///   .element {
-///     @include omega;
-///   }
-///
-///   .nth-element {
-///     @include omega(4n);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     margin-right: 0;
-///   }
-///
-///   .nth-element:nth-child(4n) {
-///     margin-right: 0;
-///   }
-///
-///   .nth-element:nth-child(4n+1) {
-///     clear: left;
-///   }
-
-@mixin omega($query: block, $direction: default) {
-  $table: belongs-to(table, $query);
-  $auto: belongs-to(auto, $query);
-
-  @if $direction != default {
-    @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.");
-  } @else {
-    $direction: get-direction($layout-direction, $default-layout-direction);
-  }
-
-  @if $table {
-    @include -neat-warn("The omega mixin no longer removes padding in table layouts.");
-  }
-
-  @if length($query) == 1 {
-    @if $auto {
-      &:last-child {
-        margin-#{$direction}: 0;
-      }
-    }
-
-    @else if contains-display-value($query) and $table == false {
-      margin-#{$direction}: 0;
-    }
-
-    @else {
-      @include nth-child($query, $direction);
-    }
-  } @else if length($query) == 2 {
-    @if $auto {
-      &:last-child {
-        margin-#{$direction}: 0;
-      }
-    } @else {
-      @include nth-child(nth($query, 1), $direction);
-    }
-  } @else {
-    @include -neat-warn("Too many arguments passed to the omega() mixin.");
-  }
-}
-
-@mixin nth-child($query, $direction) {
-  $opposite-direction: get-opposite-direction($direction);
-
-  &:nth-child(#{$query}) {
-    margin-#{$direction}: 0;
-  }
-
-  @if type-of($query) == number and unit($query) == "n" {
-    &:nth-child(#{$query}+1) {
-      clear: $opposite-direction;
-    }
-  }
-}
diff --git a/_sass/neat/grid/_outer-container.scss b/_sass/neat/grid/_outer-container.scss
deleted file mode 100644
index 31b0c64..0000000
--- a/_sass/neat/grid/_outer-container.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@charset "UTF-8";
-
-/// Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its `max-width`.
-/// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
-///
-/// @param {Number [unit]} $local-max-width [$max-width]
-///   Max width to be applied to the element. Can be a percentage or a measure.
-///
-/// @example scss - Usage
-///   .element {
-///     @include outer-container(100%);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     *zoom: 1;
-///     max-width: 100%;
-///     margin-left: auto;
-///     margin-right: auto;
-///   }
-///
-///   .element:before, .element:after {
-///     content: " ";
-///     display: table;
-///   }
-///
-///   .element:after {
-///     clear: both;
-///   }
-
-@mixin outer-container($local-max-width: $max-width) {
-  @include clearfix;
-  max-width: $local-max-width;
-  margin: {
-    left: auto;
-    right: auto;
-  }
-}
diff --git a/_sass/neat/grid/_pad.scss b/_sass/neat/grid/_pad.scss
deleted file mode 100644
index d697e1b..0000000
--- a/_sass/neat/grid/_pad.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@charset "UTF-8";
-
-/// Adds padding to the element.
-///
-/// @param {List} $padding [flex-gutter()]
-///   A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value.
-///
-/// @example scss - Usage
-///   .element {
-///     @include pad(30px -20px 10px default);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     padding: 30px -20px 10px 2.35765%;
-///   }
-
-@mixin pad($padding: flex-gutter()) {
-  $padding-list: null;
-  @each $value in $padding {
-    $value: if($value == 'default', flex-gutter(), $value);
-    $padding-list: join($padding-list, $value);
-  }
-  padding: $padding-list;
-}
diff --git a/_sass/neat/grid/_private.scss b/_sass/neat/grid/_private.scss
deleted file mode 100644
index 4c4e18c..0000000
--- a/_sass/neat/grid/_private.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$parent-columns: $grid-columns !default;
-$fg-column: $column;
-$fg-gutter: $gutter;
-$fg-max-columns: $grid-columns;
-$container-display-table: false !default;
-$layout-direction: LTR !default;
-
-@function flex-grid($columns, $container-columns: $fg-max-columns) {
-  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
-  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
-  @return percentage($width / $container-width);
-}
-
-@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
-  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
-  @return percentage($gutter / $container-width);
-}
-
-@function grid-width($n) {
-  @return $n * $gw-column + ($n - 1) * $gw-gutter;
-}
-
-@function get-parent-columns($columns) {
-  @if $columns != $grid-columns {
-    $parent-columns: $columns !global;
-  } @else {
-    $parent-columns: $grid-columns !global;
-  }
-
-  @return $parent-columns;
-}
-
-@function is-display-table($container-is-display-table, $display) {
-  @return $container-is-display-table == true or $display == table;
-}
diff --git a/_sass/neat/grid/_row.scss b/_sass/neat/grid/_row.scss
deleted file mode 100644
index 4d913a9..0000000
--- a/_sass/neat/grid/_row.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@charset "UTF-8";
-
-/// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout.
-///
-/// @param {String} $display [default]
-///  Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`.
-///
-/// @param {String} $direction [$default-layout-direction]
-///  Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left).
-///
-/// @example scss - Usage
-///  .element {
-///    @include row();
-///  }
-///
-/// @example css - CSS Output
-///  .element {
-///    *zoom: 1;
-///    display: block;
-///  }
-///
-/// .element:before, .element:after {
-///   content: " ";
-///   display: table;
-/// }
-///
-/// .element:after {
-///   clear: both;
-/// }
-
-@mixin row($display: default, $direction: $default-layout-direction) {
-  @if $direction != $default-layout-direction {
-    @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin.");
-  }
-
-  $layout-direction: $direction !global;
-
-  @if $display != default {
-    @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin.");
-  }
-
-  @if $display == table {
-    display: table;
-    @include fill-parent;
-    table-layout: fixed;
-    $container-display-table: true !global;
-  } @else {
-    @include clearfix;
-    display: block;
-    $container-display-table: false !global;
-  }
-}
diff --git a/_sass/neat/grid/_shift.scss b/_sass/neat/grid/_shift.scss
deleted file mode 100644
index c0f24cd..0000000
--- a/_sass/neat/grid/_shift.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@charset "UTF-8";
-
-/// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction.
-///
-/// @param {Number (unitless)} $n-columns [1]
-///   Number of columns by which the element shifts.
-///
-/// @example scss - Usage
-///   .element {
-///     @include shift(-3);
-///   }
-///
-/// @example css - CSS output
-///   .element {
-///     margin-left: -25.58941%;
-///   }
-
-@mixin shift($n-columns: 1) {
-  @include shift-in-context($n-columns);
-}
-
-/// Translates an element horizontally by a number of columns, in a specific nesting context.
-///
-/// @param {List} $shift
-///   A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`).
-///
-///   The two values can be separated with any string such as `of`, `/`, etc.
-///
-/// @example scss - Usage
-///   .element {
-///     @include shift(-3 of 6);
-///   }
-///
-/// @example css - CSS output
-///   .element {
-///     margin-left: -52.41458%;
-///   }
-
-@mixin shift-in-context($shift: $columns of $container-columns) {
-  $n-columns: nth($shift, 1);
-  $parent-columns: container-shift($shift) !global;
-
-  $direction: get-direction($layout-direction, $default-layout-direction);
-  $opposite-direction: get-opposite-direction($direction);
-
-  margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
-
-  // Reset nesting context
-  $parent-columns: $grid-columns !global;
-}
diff --git a/_sass/neat/grid/_span-columns.scss b/_sass/neat/grid/_span-columns.scss
deleted file mode 100644
index a7f9b00..0000000
--- a/_sass/neat/grid/_span-columns.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@charset "UTF-8";
-
-/// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.
-///
-/// @param {List} $span
-///   A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional).
-///
-///   If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid.
-///
-///   The values can be separated with any string such as `of`, `/`, etc.
-///
-///   `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.
-///
-/// @param {String} $display [block]
-///   Sets the display property of the element. By default it sets the display property of the element to `block`.
-///
-///   If passed `block-collapse`, it also removes the margin gutter by adding it to the element width.
-///
-///   If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.
-///
-/// @example scss - Usage
-///   .element {
-///     @include span-columns(6);
-///
-///    .nested-element {
-///      @include span-columns(2 of 6);
-///    }
-///  }
-///
-/// @example css - CSS Output
-///   .element {
-///     display: block;
-///     float: left;
-///     margin-right: 2.35765%;
-///     width: 48.82117%;
-///   }
-///
-///   .element:last-child {
-///     margin-right: 0;
-///   }
-///
-///   .element .nested-element {
-///     display: block;
-///     float: left;
-///     margin-right: 4.82916%;
-///     width: 30.11389%;
-///   }
-///
-///   .element .nested-element:last-child {
-///     margin-right: 0;
-///   }
-
-@mixin span-columns($span: $columns of $container-columns, $display: block) {
-  $columns: nth($span, 1);
-  $container-columns: container-span($span);
-
-  $parent-columns: get-parent-columns($container-columns) !global;
-
-  $direction: get-direction($layout-direction, $default-layout-direction);
-  $opposite-direction: get-opposite-direction($direction);
-
-  $display-table: is-display-table($container-display-table, $display);
-
-  @if $display-table  {
-    display: table-cell;
-    width: percentage($columns / $container-columns);
-  } @else {
-    float: #{$opposite-direction};
-
-    @if $display != no-display {
-      display: block;
-    }
-
-    @if $display == collapse {
-      @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead.");
-    }
-
-    @if $display == collapse or $display == block-collapse {
-      width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
-
-      &:last-child {
-        width: flex-grid($columns, $container-columns);
-      }
-
-    } @else {
-      margin-#{$direction}: flex-gutter($container-columns);
-      width: flex-grid($columns, $container-columns);
-
-      &:last-child {
-        margin-#{$direction}: 0;
-      }
-    }
-  }
-}
diff --git a/_sass/neat/grid/_to-deprecate.scss b/_sass/neat/grid/_to-deprecate.scss
deleted file mode 100644
index aeea079..0000000
--- a/_sass/neat/grid/_to-deprecate.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-@charset "UTF-8";
-
-@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
-  @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.");
-
-  @if length($query) == 1 {
-    @media screen and ($default-feature: nth($query, 1)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: $total-columns;
-      @content;
-      $grid-columns: $default-grid-columns;
-    }
-  } @else if length($query) == 2 {
-    @media screen and (nth($query, 1): nth($query, 2)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: $total-columns;
-      @content;
-      $grid-columns: $default-grid-columns;
-    }
-  } @else if length($query) == 3 {
-    @media screen and (nth($query, 1): nth($query, 2)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: nth($query, 3);
-      @content;
-      $grid-columns: $default-grid-columns;
-    }
-  } @else if length($query) == 4 {
-    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: $total-columns;
-      @content;
-      $grid-columns: $default-grid-columns;
-    }
-  } @else if length($query) == 5 {
-    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
-      $default-grid-columns: $grid-columns;
-      $grid-columns: nth($query, 5);
-      @content;
-      $grid-columns: $default-grid-columns;
-    }
-  } @else {
-    @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details.");
-  }
-}
-
-@mixin nth-omega($nth, $display: block, $direction: default) {
-  @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead.");
-  @include omega($nth $display, $direction);
-}
-
-/// Resets the active display property to `block`. Particularly useful when changing the display property in a single row.
-///
-/// @example scss - Usage
-///   .element {
-///     @include row(table);
-///     // Context changed to table display
-///   }
-///
-///   @include reset-display;
-///   // Context is reset to block display
-
-@mixin reset-display {
-  $container-display-table: false !global;
-  @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin.");
-}
-
-/// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row.
-///
-/// @example scss - Usage
-///   .element {
-///     @include row($direction: RTL);
-///     // Context changed to right-to-left
-///   }
-///
-///   @include reset-layout-direction;
-///   // Context is reset to left-to-right
-
-@mixin reset-layout-direction {
-  $layout-direction: $default-layout-direction !global;
-  @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin.");
-}
-
-/// Resets both the active layout direction and the active display property.
-///
-/// @example scss - Usage
-///   .element {
-///     @include row(table, RTL);
-///     // Context changed to table table and right-to-left
-///   }
-///
-///   @include reset-all;
-///   // Context is reset to block display and left-to-right
-
-@mixin reset-all {
-  @include reset-display;
-  @include reset-layout-direction;
-}
diff --git a/_sass/neat/grid/_visual-grid.scss b/_sass/neat/grid/_visual-grid.scss
deleted file mode 100644
index 1192d82..0000000
--- a/_sass/neat/grid/_visual-grid.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@charset "UTF-8";
-
-@mixin grid-column-gradient($values...) {
-  background-image: -webkit-linear-gradient(left, $values);
-  background-image: -moz-linear-gradient(left, $values);
-  background-image: -ms-linear-gradient(left, $values);
-  background-image: -o-linear-gradient(left, $values);
-  background-image: unquote("linear-gradient(to left, #{$values})");
-}
-
-@if $visual-grid == true or $visual-grid == yes {
-  body:before {
-    @include grid-column-gradient(gradient-stops($grid-columns));
-    content: "";
-    display: inline-block;
-    height: 100%;
-    left: 0;
-    margin: 0 auto;
-    max-width: $max-width;
-    opacity: $visual-grid-opacity;
-    pointer-events: none;
-    position: fixed;
-    right: 0;
-    width: 100%;
-
-    @if $visual-grid-index == back {
-      z-index: -1;
-    }
-
-    @else if $visual-grid-index == front {
-      z-index: 9999;
-    }
-
-    @each $breakpoint in $visual-grid-breakpoints {
-      @if $breakpoint {
-        @include media($breakpoint) {
-          @include grid-column-gradient(gradient-stops($grid-columns));
-        }
-      }
-    }
-  }
-}
diff --git a/_sass/neat/settings/_disable-warnings.scss b/_sass/neat/settings/_disable-warnings.scss
deleted file mode 100644
index 3f9b92a..0000000
--- a/_sass/neat/settings/_disable-warnings.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@charset "UTF-8";
-
-/// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag.
-///
-/// @type Bool
-
-$disable-warnings: false !default;
-
-@mixin -neat-warn($message) {
-  @if $disable-warnings == false {
-    @warn "#{$message}";
-  }
-}
diff --git a/_sass/neat/settings/_grid.scss b/_sass/neat/settings/_grid.scss
deleted file mode 100644
index e2029d0..0000000
--- a/_sass/neat/settings/_grid.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@charset "UTF-8";
-
-/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with a `!global` flag.
-///
-/// @type Number (Unit)
-
-$column: modular-scale(3, 1em, $golden) !default;
-
-/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with the `!global` flag.
-///
-/// @type Number (Unit)
-
-$gutter: modular-scale(1, 1em, $golden) !default;
-
-/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag.
-///
-/// @type Number (Unitless)
-
-$grid-columns: 12 !default;
-
-/// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag.
-///
-/// @type Number (Unit)
-///
-$max-width: 1200px !default;
-
-/// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
-///
-/// @type Bool
-///
-/// @example css - CSS Output
-///   html {
-///     box-sizing: border-box; }
-///
-///   *, *::after, *::before {
-///     box-sizing: inherit;
-///   }
-
-$border-box-sizing: true !default;
-
-/// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag.
-///
-/// @type String
-
-$default-feature: min-width; // Default @media feature for the breakpoint() mixin
-
-///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag.
-///
-///@type String
-
-$default-layout-direction: LTR !default;
diff --git a/_sass/neat/settings/_visual-grid.scss b/_sass/neat/settings/_visual-grid.scss
deleted file mode 100644
index 9cd1815..0000000
--- a/_sass/neat/settings/_visual-grid.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-
-/// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag.
-///
-/// @type Bool
-
-$visual-grid: false !default;
-
-/// Sets the visual grid color. Set with `!global` flag.
-///
-/// @type Color
-
-$visual-grid-color: #eee !default;
-
-/// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag.
-///
-/// @type String
-
-$visual-grid-index: back !default;
-
-/// Sets the opacity property of the visual grid. Set with `!global` flag.
-///
-/// @type Number (unitless)
-
-$visual-grid-opacity: 0.4 !default;
-
-$visual-grid-breakpoints: () !default;
diff --git a/_sass/sassline-base/_layouts.scss b/_sass/sassline-base/_layouts.scss
new file mode 100755
index 0000000..05c2d9f
--- /dev/null
+++ b/_sass/sassline-base/_layouts.scss
@@ -0,0 +1,282 @@
+// Layouts
+// ---------------------------------------
+
+// Container.
+.section {
+  @include clearfix;
+
+  margin: 0 auto;
+  position: relative;
+  width: 94%;
+
+  @include breakpoint(break-3) {
+    @include maxwidth(3);
+  }
+
+  @include breakpoint(break-4) {
+    @include maxwidth(4);
+  }
+}
+
+// Single column (based on measure for typeset content).
+.single-measure {
+  @include measure(all);
+
+  margin: 0 auto;
+}
+
+// Base column styles.
+.column {
+  @include measure(0);
+
+  margin: 0 auto;
+  width: 100%;
+
+  @include breakpoint(break-1) {
+    float: left;
+    margin: initial;
+    max-width: initial;
+    padding-left: map-get($gutterwidths, small);
+    padding-right: map-get($gutterwidths, small);
+  }
+
+  @include breakpoint(break-3) {
+    padding-left: map-get($gutterwidths, medium);
+    padding-right: map-get($gutterwidths, medium);
+  }
+}
+
+// Two columns.
+.column--duo {
+
+  @include breakpoint(break-1) {
+    width: 50%;
+
+    &:nth-of-type(2n+3) {
+      clear: left;
+    }
+
+    &:nth-of-type(n+3) {
+      margin-top: 3rem;
+    }
+  }
+}
+
+// Three columns.
+.column--trio {
+
+  @include breakpoint(break-1) {
+    width: 33.333%;
+
+    &:nth-of-type(3n+4) {
+      clear: left;
+    }
+
+    &:nth-of-type(n+4) {
+      margin-top: 3rem;
+    }
+  }
+}
+
+// Four columns. Two at smaller breakpoints.
+.column--quad {
+
+  @include breakpoint(break-1) {
+    width: 50%;
+  }
+
+  @include breakpoint(break-2) {
+    width: 25%;
+  }
+}
+
+// Two column layout with a main text column and a sidebar.
+
+// Main column.
+.column--main {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium);
+  }
+}
+
+// Sidebar.
+.column--sidebar {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small, false);
+
+    padding-right: map-get($gutterwidths, medium);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small, false);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium, false);
+
+    padding-right: map-get($gutterwidths, large);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium, false);
+  }
+}
+
+// If sidebar on the right side.
+.column--main + .column--sidebar {
+  @include breakpoint(break-1) {
+    padding-left: map-get($gutterwidths, medium);
+    padding-right: map-get($gutterwidths, small);
+  }
+
+  @include breakpoint(break-3) {
+    padding-left: map-get($gutterwidths, large);
+    padding-right: map-get($gutterwidths, medium);
+  }
+}
+
+// Set the main text one level down in the modular scale for narrower columns.
+.column--trio,
+.column--quad,
+.column--sidebar {
+
+  @include breakpoint(break-3) {
+
+    p {
+      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 3);
+    }
+
+    li {
+      @include fontsize(eta, 3);
+    }
+  }
+
+  @include breakpoint(break-4) {
+
+    p {
+      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 4);
+    }
+
+    li {
+      @include fontsize(eta, 4);
+    }
+  }
+}
+
+// Main column on the right with inline sidenotes.
+// The sidenotes will move out the column into the sidebar position aligned to the baseline.
+.column--right {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small);
+    @include ideal-measure(1, small, false, margin-left);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small);
+    @include ideal-measure(2, small, false, margin-left);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium);
+    @include ideal-measure(3, medium, false, margin-left);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium);
+    @include ideal-measure(4, medium, false, margin-left);
+  }
+
+  .sidenote {
+
+    @include breakpoint(break-1) {
+      @include ideal-measure(1, small, false);
+
+      left: 0;
+      padding-left: map-get($gutterwidths, small);
+      padding-right: map-get($gutterwidths, medium);
+      position: absolute;
+    }
+
+    @include breakpoint(break-2) {
+      @include ideal-measure(2, small, false);
+    }
+
+    @include breakpoint(break-3) {
+      @include ideal-measure(3, medium, false);
+
+      padding-right: map-get($gutterwidths, large);
+    }
+
+    @include breakpoint(break-4) {
+      @include ideal-measure(4, medium, false);
+
+      padding-left: map-get($gutterwidths, medium);
+    }
+  }
+}
+
+// Main column on the left with inline sidenotes.
+.column--left {
+
+  @include breakpoint(break-1) {
+    @include ideal-measure(1, small);
+  }
+
+  @include breakpoint(break-2) {
+    @include ideal-measure(2, small);
+  }
+
+  @include breakpoint(break-3) {
+    @include ideal-measure(3, medium);
+  }
+
+  @include breakpoint(break-4) {
+    @include ideal-measure(4, medium);
+  }
+
+  .sidenote {
+
+    @include breakpoint(break-1) {
+      @include ideal-measure(1, small, false);
+      @include ideal-measure(1, small, true, left);
+
+      padding-left: map-get($gutterwidths, medium);
+      padding-right: map-get($gutterwidths, small);
+      position: absolute;
+    }
+
+    @include breakpoint(break-2) {
+      @include ideal-measure(2, small, false);
+      @include ideal-measure(2, small, true, left);
+    }
+
+    @include breakpoint(break-3) {
+      @include ideal-measure(3, medium, false);
+      @include ideal-measure(3, medium, true, left);
+
+      padding-left: map-get($gutterwidths, large);
+    }
+
+    @include breakpoint(break-4) {
+      @include ideal-measure(4, medium, false);
+      @include ideal-measure(4, medium, true, left);
+
+      padding-right: map-get($gutterwidths, medium);
+    }
+  }
+}
diff --git a/_sass/sassline-base/_mixins.scss b/_sass/sassline-base/_mixins.scss
new file mode 100755
index 0000000..49168e9
--- /dev/null
+++ b/_sass/sassline-base/_mixins.scss
@@ -0,0 +1,420 @@
+// SCSS mixins
+// ---------------------------------------
+
+// Global variables used in mixins.
+
+// Number of breakpoints.
+$breakpoints-limit: length($breakpoints);
+
+// List of rootsizes, breakpoints, and max-widths.
+$sizes: map-values($rootsizes);
+$points: map-values($breakpoints);
+$line-widths: map-values($measures);
+$max-widths: map-values($maxwidths);
+
+
+// Breakpoints. Either set one to one of the breakpoint variables, or use a custom value for minor breakpoints.
+// Defaults to min-width, but both min->max and max-width are available too.
+// Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
+@mixin breakpoint($break: 0, $max: 0) {
+  // Type of break variable
+  $value: type-of($break);
+
+  // If it is a string (i.e. a breakpoint variable).
+  @if $value == string {
+    // If using 'break-1', 'break-2' etc output the correct breakpoints from map.
+    @if map-has-key($breakpoints, $break) {
+      @media screen and (min-width: #{map-get($breakpoints, $break) / 16 * 1em} ) { @content; }
+    } @else {
+      @warn "#{$break} is not a set breakpoint variable";
+    }
+
+  // If it is a number, use this for the breakpoint.
+  } @else if $value == number {
+    // If using other numbers output value in ems either for min, min & max or max width breakpoints.
+    $query: "all" !default;
+    @if      $break != 0 and $max != 0 { $query: "(min-width: #{$break / 16 * 1em}) and (max-width: #{$max / 16 * 1em})"; }
+    @else if $break != 0 and $max == 0 { $query: "(min-width: #{$break / 16 * 1em})"; }
+    @else if $break == 0 and $max != 0 { $query: "(max-width: #{$max / 16 * 1em})"; }
+    @media #{$query} { @content; }
+
+  } @else {
+    @warn "#{$break} is not valid to use as a breakpoint";
+  }
+}
+
+// Root font-size in %, outputted in correct breakpoints.
+@mixin rootsize {
+  font-size: nth($sizes, 1) / 16 * 100%;
+
+  // Loop through breakpoints.
+  @for $i from 2 through $breakpoints-limit {
+    @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+      font-size: nth($sizes, $i) / 16 * 100%;
+    }
+  }
+}
+
+// Max-widths for typeset containers, outputted in correct breakpoints.
+@mixin maxwidth($breakpoint: 0) {
+  // Type of chosen variables.
+  $break-value: type-of($breakpoint);
+
+  // If specifying a breakpoint to use (and breakpoint exists).
+  @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
+
+    max-width: #{nth($max-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem;
+
+  } @else if $breakpoint == all {
+    max-width: #{nth($max-widths, 1) / nth($sizes, 1)}rem;
+
+    // Loop through breakpoints.
+    @for $i from 2 through $breakpoints-limit {
+      @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+        max-width: #{nth($max-widths, $i) / nth($sizes, $i)}rem;
+      }
+    }
+  }
+}
+
+// Set the measure for single columns, outputted in correct breakpoints.
+@mixin measure($breakpoint: 0) {
+  // Type of chosen variables.
+  $break-value: type-of($breakpoint);
+
+  // If specifying a breakpoint to use (and breakpoint exists).
+  @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
+
+    max-width: #{nth($line-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem;
+
+  } @else if $breakpoint == all {
+    max-width: #{nth($line-widths, 1) / nth($sizes, 1)}rem;
+
+    // Loop through breakpoints.
+    @for $i from 2 through $breakpoints-limit {
+      @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+        max-width: #{nth($line-widths, $i) / nth($sizes, $i)}rem;
+      }
+    }
+  }
+}
+
+// Calculate percentage width of container to get optimal measure for main text columns.
+// Defaults to all breakpoints.
+// Note: will not output for base breakpoint as this comes from the 'measure' mixin.
+@mixin ideal-measure($breakpoint: 0, $gutter: 0, $main: true, $output: max-width) {
+  // Type of chosen variables.
+  $break-value: type-of($breakpoint);
+
+  // If specifying a breakpoint to use (and breakpoint exists and is larger than 0).
+  @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint > 0 {
+
+    @if $gutter == small {
+      $gutter: map-get($gutterwidths, small) * 2 / 1rem;
+    } @else if $gutter == medium {
+      $gutter: map-get($gutterwidths, medium) * 2 / 1rem;
+    } @else if $gutter == large {
+      $gutter: map-get($gutterwidths, large) * 2 / 1rem;
+    } @else {
+      $gutter: 0;
+    }
+
+    $rootsize: map-get($rootsizes, rootsize-#{$breakpoint});
+    $ideal-measure: map-get($measures, measure-#{$breakpoint});
+    $gutter-size: ($gutter * $rootsize);
+    $container-width: map-get($maxwidths, width-#{$breakpoint});
+
+    $percentage: percentage(($ideal-measure + $gutter-size) / $container-width);
+
+    @if $percentage < 55 {
+      $percentage: 55%;
+    } @else if $percentage > 65 {
+      $percentage: 65%;
+    }
+
+    @if $main == false {
+      $percentage: 100 - $percentage;
+    }
+
+    #{$output}: $percentage;
+  }
+}
+
+// Value in scale in $modular-scale?
+// Used in following fontsize mixin.
+@function in-modular-scale($scale, $key) {
+  $map: map-get($modular-scale, $scale);
+  $output: map-has-key($map, $key);
+  @return $output;
+}
+
+// Font-size in rems. Either set per breakpoint or for all.
+// Use values as you would for pixels i.e. 16 or use values from the modular scale.
+@mixin fontsize($fontsize, $breakpoint: 0) {
+  // Type of chosen variables.
+  $font-value: type-of($fontsize);
+  $break-value: type-of($breakpoint);
+
+  // Check if value exists in scale.
+  $in-scale: in-modular-scale(scale-0, $fontsize);
+
+  // If specifying a breakpoint to use (and breakpoint exists).
+  @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
+
+    // If using a number for fontsize.
+    @if $font-value == number {
+      font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem;
+
+    // If using a variable from the scale for fontsize.
+    } @else if $in-scale == true {
+      $get-scale: map-get($modular-scale, scale-#{$breakpoint});
+      $get-size: map-get($get-scale, $fontsize);
+
+      font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem;
+
+    } @else {
+      @warn "#{$fontsize} is not a valid scale variable";
+    }
+
+  // If want to use value for all breakpoints.
+  } @else if $breakpoint == all {
+
+    // If using a number for fontsize.
+    @if $font-value == number {
+      font-size: #{$fontsize / nth($sizes, 1)}rem;
+
+      // Loop through breakpoints.
+      @for $i from 2 through $breakpoints-limit {
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          font-size: #{$fontsize / nth($sizes, $i)}rem;
+        }
+      }
+
+    // If using a variable from the scale for fontsize.
+    } @else if $in-scale == true {
+      $get-scale: map-get($modular-scale, scale-0);
+      $get-size: map-get($get-scale, $fontsize);
+      font-size: #{$get-size / nth($sizes, 1)}rem;
+
+      // Loop through breakpoints.
+      @for $i from 2 through $breakpoints-limit {
+        $get-scale: map-get($modular-scale, scale-#{$i - 1});
+        $get-size: map-get($get-scale, $fontsize);
+
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          font-size: #{$get-size / nth($sizes, $i)}rem;
+        }
+      }
+
+    } @else {
+      @warn "#{$fontsize} is not a valid scale variable";
+    }
+
+  } @else {
+    @warn "#{$breakpoint} is not valid to use as a breakpoint";
+  }
+}
+
+// Advanced baseline magic.
+// ! Read the README to help understand what is going on here.
+// Parts based on https://gist.github.com/razwan/10662500
+@mixin baseline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) {
+  // Type of chosen variables.
+  $font-value: type-of($fontsize);
+  $break-value: type-of($breakpoint);
+
+  // Cap height
+  $cap-height: map-get($font, cap-height);
+
+  // Check if value exists in scale.
+  $in-scale: in-modular-scale(scale-0, $fontsize);
+
+  // Set the line-height (if it isn’t set at 0).
+  @if $lineheight != 0 {
+    line-height: #{$lineheight}rem;
+  }
+
+  // If specifying a breakpoint to use (and breakpoint exists).
+  @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
+
+    // If using a number for fontsize.
+    @if $font-value == number {
+      $rootsize: nth($sizes, ($breakpoint + 1));
+      $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
+
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+    // If using a variable from the scale for fontsize.
+    } @else if $in-scale == true {
+      $get-scale: map-get($modular-scale, scale-#{$breakpoint});
+      $get-size: map-get($get-scale, $fontsize);
+      $rootsize: nth($sizes, ($breakpoint + 1));
+
+      $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
+
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+    } @else {
+      @warn "#{$fontsize} is not a valid scale variable";
+    }
+
+  // If want to use value for all breakpoints.
+  } @else if $breakpoint == all {
+
+    // If using a number for fontsize.
+    @if $font-value == number {
+      $rootsize: nth($sizes, 1);
+      $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
+
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+      // Loop through breakpoints.
+      @for $i from 2 through $breakpoints-limit {
+        $rootsize: nth($sizes, $i);
+        $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
+        $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
+
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          margin-bottom: #{$baseline-push}rem;
+          padding-top: #{$baseline-shift}rem;
+        }
+      }
+
+    // If using a variable from the scale for fontsize.
+    } @else if $in-scale == true {
+      $get-scale: map-get($modular-scale, scale-0);
+      $get-size: map-get($get-scale, $fontsize);
+      $rootsize: nth($sizes, 1);
+
+      $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
+
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+      // Loop through breakpoints.
+      @for $i from 2 through $breakpoints-limit {
+        $get-scale: map-get($modular-scale, scale-#{$i - 1});
+        $get-size: map-get($get-scale, $fontsize);
+        $rootsize: nth($sizes, $i);
+
+        $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
+        $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
+
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          margin-bottom: #{$baseline-push}rem;
+          padding-top: #{$baseline-shift}rem;
+        }
+      }
+
+    } @else {
+      @warn "#{$fontsize} is not a valid scale variable";
+    }
+
+  } @else {
+    @warn "#{$breakpoint} is not valid to use as a breakpoint";
+  }
+}
+
+// Set fontsize and baseline at once. Mix of fontsize and baseline mixin.
+@mixin sassline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) {
+  $font-value: type-of($fontsize);
+  $break-value: type-of($breakpoint);
+  $cap-height: map-get($font, cap-height);
+  $in-scale: in-modular-scale(scale-0, $fontsize);
+
+  line-height: #{$lineheight}rem;
+
+  @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
+
+    @if $font-value == number {
+      $rootsize: nth($sizes, ($breakpoint + 1));
+      $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
+      font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem;
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+    } @else if $in-scale == true {
+      $get-scale: map-get($modular-scale, scale-#{$breakpoint});
+      $get-size: map-get($get-scale, $fontsize);
+      $rootsize: nth($sizes, ($breakpoint + 1));
+      $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
+      font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem;
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+    } @else {
+      @warn "#{$fontsize} is not a valid scale variable";
+    }
+
+  } @else if $breakpoint == all {
+
+    @if $font-value == number {
+      $rootsize: nth($sizes, 1);
+      $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
+      font-size: #{$fontsize / nth($sizes, 1)}rem;
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+      @for $i from 2 through $breakpoints-limit {
+        $rootsize: nth($sizes, $i);
+        $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
+        $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          font-size: #{$fontsize / nth($sizes, $i)}rem;
+          margin-bottom: #{$baseline-push}rem;
+          padding-top: #{$baseline-shift}rem;
+        }
+      }
+
+    } @else if $in-scale == true {
+      $get-scale: map-get($modular-scale, scale-0);
+      $get-size: map-get($get-scale, $fontsize);
+      $rootsize: nth($sizes, 1);
+      $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
+      $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
+      font-size: #{$get-size / nth($sizes, 1)}rem;
+      margin-bottom: #{$baseline-push}rem;
+      padding-top: #{$baseline-shift}rem;
+
+      @for $i from 2 through $breakpoints-limit {
+        $get-scale: map-get($modular-scale, scale-#{$i - 1});
+        $get-size: map-get($get-scale, $fontsize);
+        $rootsize: nth($sizes, $i);
+        $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
+        $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          font-size: #{$get-size / nth($sizes, $i)}rem;
+          margin-bottom: #{$baseline-push}rem;
+          padding-top: #{$baseline-shift}rem;
+        }
+      }
+
+    } @else {
+      @warn "#{$fontsize} is not a valid scale variable";
+    }
+
+  } @else {
+    @warn "#{$breakpoint} is not valid to use as a breakpoint";
+  }
+}
+
+// Clearfix.
+@mixin clearfix {
+  &:before, &:after{
+    display: table;
+    content: "";
+  }
+  &:after{
+    clear: both;
+  }
+}
diff --git a/_sass/sassline-base/_modular-scale.scss b/_sass/sassline-base/_modular-scale.scss
new file mode 100755
index 0000000..35b1532
--- /dev/null
+++ b/_sass/sassline-base/_modular-scale.scss
@@ -0,0 +1,66 @@
+// Modular scale
+// ---------------------------------------
+
+// Setting responsive modular-scales. Use appropriate scales for viewport sizes.
+$modular-scale: (
+  // Major Third http://www.modularscale.com/?16,28&px&1.25&web&text
+  scale-0: (
+    alpha:   28.0,
+    beta:    25.0,
+    gamma:   22.4,
+    delta:   20.0,
+    epsilon: 17.9,
+    zeta:    16.0,
+    eta:     14.3,
+    theta:   12.8,
+    iota:    11.5
+  ),
+  // Major Third http://www.modularscale.com/?17,30&px&1.25&web&text
+  scale-1: (
+    alpha:   30.0,
+    beta:    26.6,
+    gamma:   24.0,
+    delta:   21.3,
+    epsilon: 19.2,
+    zeta:    17.0,
+    eta:     15.3,
+    theta:   13.6,
+    iota:    12.8
+  ),
+  // Major Third http://www.modularscale.com/?18,32&px&1.25&web&text
+  scale-2: (
+    alpha:   32.0,
+    beta:    28.1,
+    gamma:   25.6,
+    delta:   22.5,
+    epsilon: 20.5,
+    zeta:    18.0,
+    eta:     16.3,
+    theta:   14.4,
+    iota:    13.1
+  ),
+  // Perfect Fourth http://www.modularscale.com/?20,40&px&1.333&web&text
+  scale-3: (
+    alpha:   40.0,
+    beta:    35.5,
+    gamma:   30.0,
+    delta:   26.7,
+    epsilon: 22.5,
+    zeta:    20.0,
+    eta:     16.9,
+    theta:   15.0,
+    iota:    12.7
+  ),
+  // Aug. Fourth http://www.modularscale.com/?22,50&px&1.414&web&text
+  scale-4: (
+    alpha:   50.0,
+    beta:    43.9,
+    gamma:   35.3,
+    delta:   31.1,
+    epsilon: 25.0,
+    zeta:    22.0,
+    eta:     17.6,
+    theta:   15.6,
+    iota:    12.5
+  )
+);
diff --git a/_sass/sassline-base/_reset.scss b/_sass/sassline-base/_reset.scss
new file mode 100755
index 0000000..13b1cc7
--- /dev/null
+++ b/_sass/sassline-base/_reset.scss
@@ -0,0 +1,13 @@
+// Reset
+// ---------------------------------------
+
+// Reset all the things
+* { box-sizing: border-box; }
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
+html, body { height: 100%; }
+a img { border: none; }
+blockquote { quotes: none; }
+blockquote:before, blockquote:after { content: ''; content: none; }
+table { border-collapse: collapse; border-spacing: 0; }
+caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
diff --git a/_sass/sassline-base/_typography.scss b/_sass/sassline-base/_typography.scss
new file mode 100755
index 0000000..67c77b7
--- /dev/null
+++ b/_sass/sassline-base/_typography.scss
@@ -0,0 +1,363 @@
+// Typography
+// ---------------------------------------
+
+// Setting root sizes and base styles.
+html {
+  @include rootsize;
+
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+// Site-wide base styles.
+body {
+  @include fontsize(zeta, all);
+
+  font-family: unquote(map-get($bodytype, font-family));
+  font-style: normal;
+  font-weight: map-get($bodytype, regular);
+  line-height: 2rem;
+}
+
+// Links.
+a {
+  color: $linkColour;
+  text-decoration: none;
+  transition: color .1s, background-color .1s;
+
+  &:hover, &:active, &:focus {
+    color: $hoverColour;
+    text-decoration: none;
+  }
+}
+
+// Styles for typeset text.
+.typeset {
+
+  // Nice underlines for text links.
+  p a, li a {
+    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($linkColour,20%) 50%);
+    background-position: 0 93%;
+    background-repeat: repeat-x;
+    background-size: 100% 0.15rem;
+    text-shadow: 0.1rem 0 $backgroundColour,
+                 0.15rem 0 $backgroundColour,
+                -0.1rem 0 $backgroundColour,
+                -0.15rem 0 $backgroundColour;
+
+    &:hover, &:active, &:focus {
+      background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($hoverColour,20%) 50%);
+    }
+  }
+
+  // Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
+  p {
+    @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);
+
+    font-feature-settings: 'kern', 'onum', 'liga';
+  }
+
+  // Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
+  h1, h2, h3, h4, h5, h6 {
+    color: $headingColour;
+    font-family: unquote(map-get($headingtype, font-family));
+    font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
+    font-style: normal;
+    font-weight: map-get($headingtype, bold);
+  }
+
+  // Heading level 1.
+  h1, .alpha {
+    @include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all);
+  }
+
+  // Heading level 2.
+  h2, .beta {
+    @include sassline(beta, $headingtype, 3, 1, all);
+  }
+
+  // Heading level 3.
+  h3, .gamma {
+    @include sassline(gamma, $headingtype, 3, 1, all);
+  }
+
+  // Heading level 4.
+  h4, .delta {
+    @include sassline(delta, $headingtype, 2, 0, all);
+  }
+
+  // Heading level 5.
+  h5, .epsilon {
+    @include sassline(epsilon, $headingtype, 2, 0, all);
+  }
+
+  // Heading level 6.
+  h6, .zeta {
+    @include sassline(zeta, $headingtype, 2, 0, all);
+  }
+
+  // Lists.
+  ul, ol {
+    @include baseline(zeta, $bodytype, 2, 2, all);
+
+    li {
+      font-feature-settings: 'kern', 'onum', 'liga';
+      margin-left: 2rem;
+
+      @include breakpoint(break-1) {
+        margin-left: 0;
+      }
+
+      ol, ul {
+        padding-top: 1rem;
+        margin-bottom: 1rem;
+        margin-left: 2rem;
+      }
+    }
+  }
+
+  // Ordered lists.
+  ol {
+    list-style-type: none;
+
+    li {
+      counter-increment: top-level;
+
+      &:before {
+        content: counter(top-level) '.';
+        font-feature-settings: 'lnum', 'tnum';
+        margin-left: -3rem;
+        position: absolute;
+        text-align: right;
+        width: 2em;
+      }
+
+      ul {
+
+        li {
+
+          &:before {
+            content: '';
+          }
+
+          ol {
+
+            li {
+              counter-increment: alt-level;
+
+              &:before {
+                content: counter(alt-level) '.';
+              }
+            }
+          }
+        }
+      }
+
+      ol {
+
+        li {
+          counter-increment: sub-level;
+
+          &:before {
+            content: counter(top-level) '.' counter(sub-level);
+          }
+
+          ul {
+
+            li {
+
+              &:before {
+                content: '';
+              }
+            }
+          }
+
+          ol {
+
+            li {
+              counter-increment: sub-sub-level;
+
+              &:before {
+                content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Definition lists.
+  dl {
+    @include baseline(zeta, $bodytype, 2, 2, all);
+
+    dt, dd {
+      font-feature-settings: 'kern', 'onum', 'liga';
+      margin-left: 2rem;
+
+      @include breakpoint(break-1) {
+        margin-left: 0;
+      }
+    }
+
+    dt {
+      font-weight: map-get($bodytype, bold);
+    }
+
+    dd + dt {
+      padding-top: 1rem;
+    }
+  }
+
+  // Tables.
+  table {
+    @include sassline(eta, $headingtype, 2, 0, all);
+
+    font-family: unquote(map-get($headingtype, font-family));
+    font-feature-settings: 'liga', 'lnum', 'tnum', 'kern';
+    font-style: normal;
+    font-weight: map-get($headingtype, regular);
+    width: 100%;
+
+    thead {
+
+      th {
+        @include sassline(zeta, $headingtype, 2, 0, all);
+        padding-bottom: 1px;
+      }
+    }
+  }
+
+  // Bold.
+  b, strong, .bold {
+    font-weight: map-get($bodytype, bold);
+  }
+
+  // Italic.
+  em, i, .italic {
+    font-style: map-get($bodytype, italic);
+  }
+
+  // Caption and inline small text.
+  small, .caption {
+    @include fontsize(theta, all);
+
+    font-family: unquote(map-get($headingtype, font-family));
+    font-style: normal;
+    font-weight: map-get($headingtype, regular);
+  }
+
+  small {
+    line-height: 1rem;
+  }
+
+  .caption {
+    @include baseline(theta, $headingtype, 2, 2, all);
+
+    color: $captionColour;
+  }
+
+  // Nice spacing for captions.
+  h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption {
+    margin-top: -1rem;
+  }
+
+  .delta + .caption, .epsilon + .caption, .zeta + .caption {
+    margin-top: 0rem;
+  }
+
+  // Quotes.
+  blockquote {
+
+    p {
+      border-left: 0.15rem solid $linkColour;
+      font-style: map-get($bodytype, italic);
+      padding-left: 1rem;
+
+      // Add spacing below blockquote paragraphs to align to baseline grid.
+      $get-scale: map-get($modular-scale, scale-0);
+      $get-size: map-get($get-scale, zeta);
+      $rootsize: nth($sizes, 1);
+      $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
+      $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
+
+      margin-bottom: #{$baseline-push}rem;
+      padding-bottom: #{$baseline-shift}rem;
+
+      @for $i from 2 through $breakpoints-limit {
+        $get-scale: map-get($modular-scale, scale-#{$i - 1});
+        $get-size: map-get($get-scale, zeta);
+        $rootsize: nth($sizes, $i);
+        $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
+        $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
+
+        @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+          margin-bottom: #{$baseline-push}rem;
+          padding-bottom: #{$baseline-shift}rem;
+        }
+      }
+    }
+
+    @include breakpoint(break-1) {
+      margin-left: -1rem;
+    }
+  }
+
+  // Horizontal rule.
+  hr {
+    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%);
+    background-position: 0 50%;
+    background-repeat: repeat-x;
+    background-size: 100% 0.15rem;
+    border: 0;
+    margin: 0;
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+  }
+
+  // Code block.
+  code, pre {
+    background-color: $codeBackgroundColour;
+    font-family: unquote(map-get($monospacetype, font-family));
+  }
+
+  pre {
+    display: block;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    white-space: pre;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+
+  code {
+    @include fontsize(theta, all);
+
+    line-height: 1rem;
+  }
+
+  // Letter space those capitals people, Jan Tschichold would be proud.
+  .upper {
+    font-kerning: normal;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+  }
+
+  // Real small caps.
+  .small-caps {
+    font-feature-settings: 'smcp', 'kern';
+    font-kerning: normal;
+    letter-spacing: 0.1rem;
+  }
+
+  // Consistent height numbers with OpenType.
+  .lining-numerals {
+    font-feature-settings: 'lnum', 'kern';
+  }
+
+  // Ascending and descending numbers with OpenType.
+  .oldstyle-numerals {
+    font-feature-settings: 'onum', 'kern';
+  }
+}
diff --git a/_sass/sassline-base/_variables.scss b/_sass/sassline-base/_variables.scss
new file mode 100755
index 0000000..2f246c0
--- /dev/null
+++ b/_sass/sassline-base/_variables.scss
@@ -0,0 +1,96 @@
+// SCSS variables
+// ---------------------------------------
+
+// Note: For the following Sass maps enter values as if they would be px units.
+
+// Breakpoint sizes from px to ems. Add more values here to add more breakpoints.
+// Change names if you prefer, it wont break the mixin as long as they are strings not just numbers.
+$breakpoints: (
+  break-0: 0,     // 0px       Mobile first
+  break-1: 640,   // 640px   ~ Small tablet up
+  break-2: 800,   // 800px   ~ Large tablet up
+  break-3: 1024,  // 1024px  ~ Desktop up
+  break-4: 1600   // 1600px  ~ Large desktop up
+) !default;
+
+// Root font-sizes for each breakpoint. Set to half desired line-height of body text.
+// ! Make sure to have as many sizes as breakpoints above.
+$rootsizes: (
+  rootsize-0: 12,   // 24px line-height body text
+  rootsize-1: 14,   // 28px line-height body text
+  rootsize-2: 15,   // 30px line-height body text
+  rootsize-3: 17,   // 34px line-height body text
+  rootsize-4: 19    // 38px line-height body text
+) !default;
+
+// Set the optimum line-length for your text (based on typeface).
+// Aim for 75–100 characters a line when possible, at smaller sizes type size is more important.
+// ! Make sure to have as many widths as breakpoints above.
+// Note: this was 'maxwidths' in previous versions.
+$measures: (
+  measure-0: 500,  // 500px wide
+  measure-1: 550,  // 550px wide
+  measure-2: 600,  // 600px wide
+  measure-3: 680,  // 680px wide
+  measure-4: 750   // 750px wide
+) !default;
+
+// Set the max-widths for containers (based on design).
+// ! Make sure to have as many widths as breakpoints above.
+$maxwidths: (
+  width-0: 500,  // 500px wide
+  width-1: 600,  // 600px wide
+  width-2: 800,  // 800px wide
+  width-3: 1100, // 110px wide
+  width-4: 1300  // 1300px wide
+) !default;
+
+// Gutter widths
+$gutterwidths: (
+  small: 1rem,
+  medium: 2rem,
+  large: 4rem
+) !default;
+
+// Add typefaces here.
+// Add weight and style details too.
+// ! Set cap height to set to the baseline.
+$bodytype: (
+  font-family: '"Alegreya Sans", sans-serif',
+  regular: 400,
+  bold: 700,
+  italic: italic,
+  cap-height: 0.66
+) !default;
+
+$headingtype: (
+  font-family: '"Neuton", serif',
+  regular: 400,
+  bold: 700,
+  cap-height: 0.66
+) !default;
+
+$monospacetype: (
+  font-family: 'Menlo, monospace',
+  regular: 400,
+  cap-height: 0.68
+) !default;
+
+// Here are some local fonts cap-height sizes to get you started:
+// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
+// Lucida Grande: 0.72, Helvetica: 0.66, Verdana: 0.76, Tahoma: 0.76
+
+// Selection of Typekit fonts cap-height sizes:
+// Proxima Nova: 0.57, Museo Slab: 0.66, JAF Facit: 0.7, Brandon Grotesque: 0.65, Clavo: 0.7, Adelle: 0.66, FF Tisa Pro: 0.82, Jubilat: 0.66, Futura PT: 0.66, Chaparral Pro: 0.5, Minion Pro: 0.66, Myriad Pro: 0.66, Adobe Caslon Pro: 0.36
+
+// Text colours. British English.
+$headingColour: darken(#46412A, 5%) !default;
+$bodyColour: #46412A !default;
+$linkColour: #5B5BFF !default;
+$hoverColour: darken(#5B5BFF, 10%) !default;
+$captionColour: #46412A !default;
+$white: #FFFFFF !default;
+
+// Background colours.
+$backgroundColour: #ffefc8 !default;
+$codeBackgroundColour: darken(#ffefc8, 5%) !default;
diff --git a/_sass/sassline.scss b/_sass/sassline.scss
new file mode 100644
index 0000000..e96db8d
--- /dev/null
+++ b/_sass/sassline.scss
@@ -0,0 +1 @@
+.typeset pre,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}.typeset p,body{line-height:2rem}caption,img,td,th{vertical-align:middle}body,html{height:100%}a img{border:none}blockquote{quotes:none}blockquote:after,blockquote:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption,td,th{text-align:left;font-weight:400}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:75%}@media screen and (min-width:40em){html{font-size:87.5%}}@media screen and (min-width:50em){html{font-size:93.75%}}@media screen and (min-width:64em){html{font-size:106.25%}}@media screen and (min-width:100em){html{font-size:118.75%}}body{font-family:Georgia,serif;font-style:normal;font-weight:400;font-size:1.33333rem}a{color:#0E58F5;text-decoration:none;transition:color .1s,background-color .1s}a:active,a:focus,a:hover{color:#0B348B;text-decoration:none}.typeset li a,.typeset p a{background-image:linear-gradient(to bottom,transparent 50%,#709cf9 50%);background-position:0 93%;background-repeat:repeat-x;background-size:100% .15rem;text-shadow:.1rem 0 #FCFCFC,.15rem 0 #FCFCFC,-.1rem 0 #FCFCFC,-.15rem 0 #FCFCFC}.typeset li a:active,.typeset li a:focus,.typeset li a:hover,.typeset p a:active,.typeset p a:focus,.typeset p a:hover{background-image:linear-gradient(to bottom,transparent 50%,#1257ea 50%)}.typeset p{-webkit-font-feature-settings:'kern','onum','liga';font-feature-settings:'kern','onum','liga';margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){body{font-size:1.21429rem}.typeset p{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){body{font-size:1.2rem}.typeset p{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){body{font-size:1.17647rem}.typeset p{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){body{font-size:1.15789rem}.typeset p{margin-bottom:1.3821rem;padding-top:.6179rem}}.typeset h1,.typeset h2,.typeset h3,.typeset h4,.typeset h5,.typeset h6{color:#2E2E2E;font-family:Helvetica,sans-serif;-webkit-font-feature-settings:'dlig','liga','lnum','kern';font-feature-settings:'dlig','liga','lnum','kern';font-style:normal;font-weight:700}.typeset .alpha,.typeset h1{line-height:3rem;font-size:2.33333rem;margin-bottom:.26999rem;padding-top:.73001rem}@media screen and (min-width:40em){.typeset .alpha,.typeset h1{font-size:2.14286rem;margin-bottom:.20713rem;padding-top:.79287rem}}@media screen and (min-width:50em){.typeset .alpha,.typeset h1{font-size:2.13333rem;margin-bottom:.20399rem;padding-top:.79601rem}}@media screen and (min-width:64em){.typeset .alpha,.typeset h1{font-size:2.35294rem;margin-bottom:.27646rem;padding-top:.72354rem}}@media screen and (min-width:100em){.typeset .alpha,.typeset h1{font-size:2.63158rem;margin-bottom:.36841rem;padding-top:.63159rem}}.typeset .beta,.typeset h2{line-height:3rem;font-size:2.08333rem;margin-bottom:.18749rem;padding-top:.81251rem}@media screen and (min-width:40em){.typeset .beta,.typeset h2{font-size:1.9rem;margin-bottom:.12699rem;padding-top:.87301rem}}@media screen and (min-width:50em){.typeset .beta,.typeset h2{font-size:1.87333rem;margin-bottom:.11819rem;padding-top:.88181rem}}@media screen and (min-width:64em){.typeset .beta,.typeset h2{font-size:2.08824rem;margin-bottom:.18911rem;padding-top:.81089rem}}@media screen and (min-width:100em){.typeset .beta,.typeset h2{font-size:2.31053rem;margin-bottom:.26246rem;padding-top:.73754rem}}.typeset .gamma,.typeset h3{line-height:3rem;font-size:1.86667rem;margin-bottom:.11599rem;padding-top:.88401rem}@media screen and (min-width:40em){.typeset .gamma,.typeset h3{font-size:1.71429rem;margin-bottom:.0657rem;padding-top:.9343rem}}@media screen and (min-width:50em){.typeset .gamma,.typeset h3{font-size:1.70667rem;margin-bottom:.06319rem;padding-top:.93681rem}}@media screen and (min-width:64em){.typeset .gamma,.typeset h3{font-size:1.76471rem;margin-bottom:.08234rem;padding-top:.91766rem}}@media screen and (min-width:100em){.typeset .gamma,.typeset h3{font-size:1.85789rem;margin-bottom:.1131rem;padding-top:.8869rem}}.typeset .delta,.typeset h4{line-height:2rem;font-size:1.66667rem;margin-bottom:-.45001rem;padding-top:.45001rem}@media screen and (min-width:40em){.typeset .delta,.typeset h4{font-size:1.52143rem;margin-bottom:-.49794rem;padding-top:.49794rem}}@media screen and (min-width:50em){.typeset .delta,.typeset h4{font-size:1.5rem;margin-bottom:-.50501rem;padding-top:.50501rem}}@media screen and (min-width:64em){.typeset .delta,.typeset h4{font-size:1.57059rem;margin-bottom:-.48172rem;padding-top:.48172rem}}@media screen and (min-width:100em){.typeset .delta,.typeset h4{font-size:1.63684rem;margin-bottom:-.45985rem;padding-top:.45985rem}}.typeset .epsilon,.typeset h5{line-height:2rem;font-size:1.49167rem;margin-bottom:-.50776rem;padding-top:.50776rem}@media screen and (min-width:40em){.typeset .epsilon,.typeset h5{font-size:1.37143rem;margin-bottom:-.54744rem;padding-top:.54744rem}}@media screen and (min-width:50em){.typeset .epsilon,.typeset h5{font-size:1.36667rem;margin-bottom:-.54901rem;padding-top:.54901rem}}@media screen and (min-width:64em){.typeset .epsilon,.typeset h5{font-size:1.32353rem;margin-bottom:-.56325rem;padding-top:.56325rem}}@media screen and (min-width:100em){.typeset .epsilon,.typeset h5{font-size:1.31579rem;margin-bottom:-.5658rem;padding-top:.5658rem}}.typeset .zeta,.typeset h6{line-height:2rem;font-size:1.33333rem;margin-bottom:-.56001rem;padding-top:.56001rem}@media screen and (min-width:40em){.typeset .zeta,.typeset h6{font-size:1.21429rem;margin-bottom:-.5993rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset .zeta,.typeset h6{font-size:1.2rem;margin-bottom:-.60401rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset .zeta,.typeset h6{font-size:1.17647rem;margin-bottom:-.61177rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset .zeta,.typeset h6{font-size:1.15789rem;margin-bottom:-.6179rem;padding-top:.6179rem}}.typeset ol,.typeset ul{line-height:2rem;margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){.typeset ol,.typeset ul{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset ol,.typeset ul{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset ol,.typeset ul{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset ol,.typeset ul{margin-bottom:1.3821rem;padding-top:.6179rem}}.typeset ol li,.typeset ul li{-webkit-font-feature-settings:'kern','onum','liga';font-feature-settings:'kern','onum','liga';margin-left:2rem}@media screen and (min-width:40em){.typeset ol li,.typeset ul li{margin-left:0}}.typeset ol li ol,.typeset ol li ul,.typeset ul li ol,.typeset ul li ul{padding-top:1rem;margin-bottom:1rem;margin-left:2rem}.typeset ol{list-style-type:none}.typeset ol li{counter-increment:top-level}.typeset ol li:before{content:counter(top-level) ".";-webkit-font-feature-settings:'lnum','tnum';font-feature-settings:'lnum','tnum';margin-left:-3rem;position:absolute;text-align:right;width:2em}.typeset ol li ul li:before{content:''}.typeset ol li ul li ol li{counter-increment:alt-level}.typeset ol li ul li ol li:before{content:counter(alt-level) "."}.typeset ol li ol li{counter-increment:sub-level}.typeset ol li ol li:before{content:counter(top-level) "." counter(sub-level)}.typeset ol li ol li ul li:before{content:''}.typeset ol li ol li ol li{counter-increment:sub-sub-level}.typeset ol li ol li ol li:before{content:counter(top-level) "." counter(sub-level) "." counter(sub-sub-level)}.typeset dl{line-height:2rem;margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){.typeset dl{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset dl{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset dl{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset dl{margin-bottom:1.3821rem;padding-top:.6179rem}}.typeset dl dd,.typeset dl dt{-webkit-font-feature-settings:'kern','onum','liga';font-feature-settings:'kern','onum','liga';margin-left:2rem}.typeset dl dt{font-weight:700}.typeset dl dd+dt{padding-top:1rem}.typeset table{font-family:Helvetica,sans-serif;-webkit-font-feature-settings:'liga','lnum','tnum','kern';font-feature-settings:'liga','lnum','tnum','kern';font-style:normal;font-weight:400;width:100%;line-height:2rem;font-size:1.19167rem;margin-bottom:-.60676rem;padding-top:.60676rem}@media screen and (min-width:40em){.typeset dl dd,.typeset dl dt{margin-left:0}.typeset table{font-size:1.09286rem;margin-bottom:-.63937rem;padding-top:.63937rem}}@media screen and (min-width:50em){.typeset table{font-size:1.08667rem;margin-bottom:-.64141rem;padding-top:.64141rem}}@media screen and (min-width:64em){.typeset table{font-size:.99412rem;margin-bottom:-.67195rem;padding-top:.67195rem}}@media screen and (min-width:100em){.typeset table{font-size:.92632rem;margin-bottom:-.69433rem;padding-top:.69433rem}}.typeset table thead th{line-height:2rem;font-size:1.33333rem;margin-bottom:-.56001rem;padding-top:.56001rem;padding-bottom:1px}@media screen and (min-width:40em){.typeset table thead th{font-size:1.21429rem;margin-bottom:-.5993rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset table thead th{font-size:1.2rem;margin-bottom:-.60401rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset table thead th{font-size:1.17647rem;margin-bottom:-.61177rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset table thead th{font-size:1.15789rem;margin-bottom:-.6179rem;padding-top:.6179rem}}.typeset .bold,.typeset b,.typeset strong{font-weight:700}.typeset .italic,.typeset em,.typeset i{font-style:italic}.typeset .caption,.typeset small{font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1.06667rem}.typeset small{line-height:1rem}.typeset .caption{color:#BDC8CC;line-height:2rem;margin-bottom:1.35199rem;padding-top:.64801rem}@media screen and (min-width:40em){.typeset .caption,.typeset small{font-size:.97143rem}.typeset .caption{margin-bottom:1.32056rem;padding-top:.67944rem}}@media screen and (min-width:50em){.typeset .caption,.typeset small{font-size:.96rem}.typeset .caption{margin-bottom:1.31679rem;padding-top:.68321rem}}@media screen and (min-width:64em){.typeset .caption,.typeset small{font-size:.88235rem}.typeset .caption{margin-bottom:1.29117rem;padding-top:.70883rem}}@media screen and (min-width:100em){.typeset .caption,.typeset small{font-size:.82105rem}.typeset .caption{margin-bottom:1.27094rem;padding-top:.72906rem}}.typeset .alpha+.caption,.typeset .beta+.caption,.typeset .gamma+.caption,.typeset h1+.caption,.typeset h2+.caption,.typeset h3+.caption{margin-top:-1rem}.typeset .delta+.caption,.typeset .epsilon+.caption,.typeset .zeta+.caption{margin-top:0}.typeset blockquote p{border-left:.15rem solid #0E58F5;font-style:italic;padding-left:1rem;margin-bottom:1.87999rem;padding-bottom:.56001rem}@media screen and (min-width:40em){.typeset blockquote p{margin-bottom:1.80142rem;padding-bottom:.5993rem}.typeset blockquote{margin-left:-1rem}}@media screen and (min-width:50em){.typeset blockquote p{margin-bottom:1.79199rem;padding-bottom:.60401rem}}@media screen and (min-width:64em){.typeset blockquote p{margin-bottom:1.77646rem;padding-bottom:.61177rem}}@media screen and (min-width:100em){.typeset blockquote p{margin-bottom:1.7642rem;padding-bottom:.6179rem}}.typeset hr{background-image:linear-gradient(to bottom,transparent 50%,#BDC8CC 50%);background-position:0 50%;background-repeat:repeat-x;background-size:100% .15rem;border:0;margin:0;padding-bottom:3rem;padding-top:3rem}.typeset code,.typeset pre{background-color:#F5F4F2;font-family:Menlo,monospace}.typeset pre{margin-bottom:2rem;padding:1rem;white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}.typeset code{line-height:1rem;font-size:1.06667rem}@media screen and (min-width:40em){.typeset code{font-size:.97143rem}}@media screen and (min-width:50em){.typeset code{font-size:.96rem}}.typeset .upper{-webkit-font-kerning:normal;font-kerning:normal;letter-spacing:.1rem;text-transform:uppercase}.typeset .small-caps{-webkit-font-feature-settings:'smcp','kern';font-feature-settings:'smcp','kern';-webkit-font-kerning:normal;font-kerning:normal;letter-spacing:.1rem}.typeset .lining-numerals{-webkit-font-feature-settings:'lnum','kern';font-feature-settings:'lnum','kern'}.typeset .oldstyle-numerals{-webkit-font-feature-settings:'onum','kern';font-feature-settings:'onum','kern'}.section{margin:0;position:relative;width:94%}.section:after,.section:before{display:table;content:""}.section:after{clear:both}@media screen and (min-width:64em){.typeset code{font-size:.88235rem}.section{max-width:64.70588rem}}@media screen and (min-width:100em){.typeset code{font-size:.82105rem}.section{max-width:68.42105rem}}.single-measure{margin:0 auto;max-width:41.66667rem}@media screen and (min-width:40em){.single-measure{max-width:39.28571rem}}@media screen and (min-width:50em){.single-measure{max-width:40rem}}@media screen and (min-width:64em){.single-measure{max-width:40rem}}@media screen and (min-width:100em){.single-measure{max-width:39.47368rem}}.column{margin:0 auto;width:100%;max-width:41.66667rem}@media screen and (min-width:40em){.column{float:left;margin:inherit;max-width:auto;padding-left:1rem;padding-right:1rem}.column--duo{width:50%}.column--duo:nth-child(3n){clear:left}.column--duo:nth-child(n+3){margin-top:2rem}.column--trio{width:33.333%}.column--trio:nth-child(4n){clear:left}.column--trio:nth-child(n+4){margin-top:2rem}.column--quad{width:50%}.column--main{max-width:65%}}@media screen and (min-width:50em){.column--quad{width:25%}.column--main{max-width:65%}}@media screen and (min-width:64em){.column{padding-left:2rem;padding-right:2rem}.column--main{max-width:65%}}@media screen and (min-width:100em){.column--main{max-width:63.53846%}}@media screen and (min-width:40em){.column--sidebar{padding-right:2rem;max-width:35%}}@media screen and (min-width:50em){.column--sidebar{max-width:35%}}@media screen and (min-width:64em){.column--sidebar{padding-right:4rem;max-width:35%}}@media screen and (min-width:40em){.column--main+.column--sidebar{padding-left:2rem;padding-right:1rem}}@media screen and (min-width:64em){.column--main+.column--sidebar{padding-left:4rem;padding-right:2rem}.column--quad p,.column--sidebar p,.column--trio p{line-height:2rem;font-size:.99412rem;margin-bottom:1.32805rem;padding-top:.67195rem}.column--quad li,.column--sidebar li,.column--trio li{font-size:.99412rem}}@media screen and (min-width:100em){.column--sidebar{max-width:36.46154%}.column--quad p,.column--sidebar p,.column--trio p{line-height:2rem;font-size:.92632rem;margin-bottom:1.30567rem;padding-top:.69433rem}.column--quad li,.column--sidebar li,.column--trio li{font-size:.92632rem}}@media screen and (min-width:40em){.column--right{max-width:65%;margin-left:35%}}@media screen and (min-width:50em){.column--right{max-width:65%;margin-left:35%}}@media screen and (min-width:64em){.column--right{max-width:65%;margin-left:35%}}@media screen and (min-width:100em){.column--right{max-width:63.53846%;margin-left:36.46154%}}@media screen and (min-width:40em){.column--right .sidenote{left:0;padding-left:1rem;padding-right:2rem;position:absolute;max-width:35%}}@media screen and (min-width:50em){.column--right .sidenote{max-width:35%}}@media screen and (min-width:64em){.column--right .sidenote{padding-right:4rem;max-width:35%}}@media screen and (min-width:100em){.column--right .sidenote{padding-left:2rem;max-width:36.46154%}}@media screen and (min-width:40em){.column--left{max-width:65%}}@media screen and (min-width:50em){.column--left{max-width:65%}}@media screen and (min-width:64em){.column--left{max-width:65%}}@media screen and (min-width:100em){.column--left{max-width:63.53846%}}@media screen and (min-width:40em){.column--left .sidenote{padding-left:2rem;padding-right:1rem;position:absolute;max-width:35%;left:65%}}@media screen and (min-width:50em){.column--left .sidenote{max-width:35%;left:65%}}@media screen and (min-width:64em){.column--left .sidenote{padding-left:4rem;max-width:35%;left:65%}}@media screen and (min-width:100em){.column--left .sidenote{padding-right:2rem;max-width:36.46154%;left:63.53846%}}body{background-color:#FCFCFC;color:#494949;overflow-x:hidden}.section{padding:2rem 0}@media screen and (min-width:40em){.section{padding:3rem 0}}@media screen and (min-width:50em){.section{padding:4rem 0}}img{-ms-interpolation-mode:bicubic;height:auto;width:100%}@media screen and (min-width:40em){img{margin:0 auto;max-width:100%;width:auto}}.nav-collapse li,.nav-collapse ul{width:100%;display:block}.button-align{line-height:2rem;margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){.button-align{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){.button-align{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){.button-align{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){.button-align{margin-bottom:1.3821rem;padding-top:.6179rem}}.nav-collapse ul{list-style:none;margin:0;padding:0}.nav-collapse.opened{max-height:9999px}.js .nav-collapse{clip:rect(0 0 0 0);display:block;max-height:0;overflow:hidden;position:absolute;zoom:1}.disable-pointer-events{pointer-events:none}.nav-toggle{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.main-nav .main-nav__list{border-top:.1rem solid #d9d9d9}@media screen and (min-width:40em){.js .nav-collapse{max-height:none;position:relative}.nav-toggle{display:none}.main-nav{display:inline-block;width:calc(100% - 132px - 2rem);vertical-align:middle}.main-nav .main-nav__list{border:0;background-color:transparent;margin-left:0;text-align:right;width:100%}}.main-nav li{font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1.33333rem}.main-nav li a,.main-nav li span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom:.1rem solid #d9d9d9;color:#0E58F5;cursor:pointer;display:block;padding:10px 3%}.main-nav li a:active,.main-nav li a:focus,.main-nav li a:hover,.main-nav li span:active,.main-nav li span:focus,.main-nav li span:hover{background-color:#0E58F5;color:#FFF}@media screen and (min-width:40em){.main-nav li{display:inline-block;letter-spacing:.1rem;margin-right:2rem;padding:1rem 0;text-transform:uppercase;width:auto;font-size:.85714rem}.main-nav li a,.main-nav li span{border:0;color:#BDC8CC;display:inline;padding:0}.main-nav li a:active,.main-nav li a:focus,.main-nav li a:hover,.main-nav li span:active,.main-nav li span:focus,.main-nav li span:hover{background-color:transparent;color:#0E58F5}.js .nav-collapse{display:inline-block;max-height:none;position:relative}}@media screen and (min-width:50em){.main-nav li{font-size:.8rem}}@media screen and (min-width:64em){.main-nav li{font-size:.70588rem}}@media screen and (min-width:100em){.main-nav li{font-size:.63158rem}}.js .nav-toggle{display:block;line-height:0;position:absolute;right:3%;top:1.3rem}.js .nav-toggle:after{background-image:url(../img/menu.svg);background-position:0 0;background-size:30px 60px;content:'';display:block;height:30px;width:30px}.js .nav-toggle.active:after{background-position:0 30px}@media screen and (min-width:40em){.js .nav-toggle{display:none}}.global-header{background-color:#FCFCFC;font-size:0}.global-header .global-header__logo{background-image:url(../img/sassline-logo.svg);background-size:132px 19px;color:transparent;display:inline-block;font:0/0 a;height:19px;margin:2rem 0 2rem 3%;position:relative;vertical-align:middle;width:132px}@media screen and (min-width:40em){.global-header .global-header__logo{margin-left:2rem}}.global-header .global-header__logo a{bottom:0;left:0;position:absolute;right:0;top:0}.global-footer p{color:#BDC8CC;font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;padding:1rem 0;margin:0;text-align:center;font-size:1.19167rem}@media screen and (min-width:40em){.global-footer p{font-size:1.09286rem}}@media screen and (min-width:50em){.global-footer p{font-size:1.08667rem}}@media screen and (min-width:64em){.global-footer p{font-size:.99412rem}}@media screen and (min-width:100em){.global-footer p{font-size:.92632rem}}#baseline.show-grid{background-image:linear-gradient(to bottom,#0ff 0,rgba(255,255,255,0) 1px);background-repeat:repeat-y;background-size:100% 1rem}
diff --git a/_sass/style.scss b/_sass/style.scss
new file mode 100755
index 0000000..5c06465
--- /dev/null
+++ b/_sass/style.scss
@@ -0,0 +1,12 @@
+/* CSS compiled from SCSS. */
+/* --------------------------------------- */
+
+// Import Sassline base.
+@import "sassline-base";
+
+// Import your project SCSS module partials.
+@import "modules/globals";
+@import "modules/nav";
+@import "modules/header";
+@import "modules/footer";
+@import "modules/show-grid";
diff --git a/_sass/theme.scss b/_sass/theme.scss
index 494e21b..21933be 100644
--- a/_sass/theme.scss
+++ b/_sass/theme.scss
@@ -1,30 +1,84 @@
 // Imports
-@import "bourbon/bourbon";
-@import "neat/neat";
-@import "base/base";
-
-// Theme variables
-$color--background: #ffefc8;
-$color--foreground: #150301;
-$color--accent: #5277c3;
-
-// Theme typography
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
+@import "sassline-base";
 
+// Layout
 body {
-  color: $color--foreground;
-  background: $color--background;
+  margin: 0;
+  background: $backgroundColour;
 }
 
-a {
-  color: $color--accent;
-}
-
-// Theme layout
 .container {
-  @include outer-container;
+  max-width: 900px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+// Header
+.header {
+  background: darken($backgroundColour, 10%);
+  border-bottom: 1px solid darken($backgroundColour, 15%);
+  .button {
+    display: none;
+  }
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+// Logo
+.logo {
+  padding: 10px 10px 10px 0;
+  .image {
+    max-width: 52px;
+    height: auto;
+    border-radius: 100%;
+  }
+  display: inline-block;
+  line-height: 0;
+}
+
+// Navigation
+.nav {
+  text-align: right;
+  .item {
+    display: inline-block;
+    margin-left: 20px;
+  }
+}
+
+// Main
+.main {
+  padding-bottom: 20px;
+}
+
+// Article
+.article {
+  .small {
+    color: lighten($bodyColour, 15%);
+  }
+}
+
+// Posts
+.posts {
+  list-style: none;
+  .post {
+    padding: 0;
+  }
+}
+
+// Pagination
+.paginator {
+  text-align: center;
+  .pagination {
+    margin: 0 5px;
+  }
+}
+
+// Footer
+.footer {
+  padding: 20px 0;
+  border-top: 1px solid darken($backgroundColour, 10%);
 }