Update to Tiny CSS

author: Ben Burwell <ben@benburwell.com> 2015-08-11 22:56:34 -0400
committer: Ben Burwell <ben@benburwell.com> 2015-08-11 22:56:34 -0400
commit: b3967c83cbdba7f44c2ecef09d3e80801106ac81 (patch)
tree: 1dd61b9840a85ab8d3d4610bbba2f2e3aa4a00c6
parent: 6b0fad5657d802603cb6f64f51b5387bbfbc2059 (diff)
28 files changed, 843 insertions, 471 deletions
diff --git a/_includes/tiny.scss b/_includes/tiny.scss
new file mode 100644
index 0000000..4b29cf2
--- /dev/null
+++ b/_includes/tiny.scss
@@ -0,0 +1,21 @@
+// Include fonts first so we can get them loading immediately
+@import "tiny/fonts";
+
+// These contain variables and mixins used throughout Tiny
+@import "tiny/variables";
+@import "tiny/mixins";
+
+// Normalize, of course
+@import "tiny/normalize";
+
+// General styles
+@import "tiny/base";
+@import "tiny/layout";
+@import "tiny/type";
+// @import "tiny/syntax";
+
+// Utility classes
+@import "tiny/utility";
+
+// Icon fonts
+@import "font-awesome/font-awesome";
diff --git a/_layouts/master.html b/_layouts/master.html
index c2b4754..46e629c 100644
--- a/_layouts/master.html
+++ b/_layouts/master.html
@@ -2,20 +2,12 @@
 <html lang="en">
   <head>
     <title>{{ page.title }}</title>
-
     <meta charset="UTF-8">
-
     <style type="text/css">
-        {% capture fonts %}
-            {% include fonts.scss %}
-        {% endcapture %}
-        {{ fonts | scssify }}
+        {% capture tiny %}{% include tiny.scss %}{% endcapture %}
+        {{ tiny | scssify }}
     </style>
-
-    <link rel="stylesheet" type="text/css" href="/assets/stylesheets/site.css">
-
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
-
     <link rel="shortcut icon" href="/assets/images/icons/favicon.ico" sizes="128x128">
     <link rel="apple-touch-icon" href="/assets/images/icons/apple/apple-touch-icon-57x57.png" sizes="57x57">
     <link rel="apple-touch-icon" href="/assets/images/icons/apple/apple-touch-icon-72x72.png" sizes="72x72">
@@ -24,7 +16,6 @@
     <link rel="apple-touch-icon" href="/assets/images/icons/apple/apple-touch-icon-120x120.png" sizes="120x120">
     <link rel="apple-touch-icon" href="/assets/images/icons/apple/apple-touch-icon-144x144.png" sizes="144x144">
     <link rel="apple-touch-icon" href="/assets/images/icons/apple/apple-touch-icon-152x152.png" sizes="152x152">
-
     <meta name="author" content="Ben Burwell">
     {% if page.description %}
     <meta name="description" content="{{ page.description }}">
@@ -32,7 +23,6 @@
     <meta name="description" content="{{ site.description }}">
     {% endif %}
     <meta name="keywords" content="{{ site.keywords | join: ',' }}">
-
     <meta property="og:title" content="{{ page.title }}">
     <meta property="og:site_name" content="Ben Burwell">
     {% if page.description %}
@@ -49,7 +39,6 @@
     <meta property="og:url" content="http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}">
     <meta property="article:author" content="Ben Burwell">
     <meta property="fb:admins" content="1439777397">
-
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="@bburwell">
     <meta name="twitter:title" content="{{ page.title }}">
@@ -65,29 +54,36 @@
     <meta name="twitter:image:src" content="http://www.benburwell.com/assets/images/icons/benburwell.png">
     {% endif %}
     <meta name="twitter:domain" content="BenBurwell.com">
-
     {% if page.chrome-webstore-item %}
     <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/{{ page.chrome-webstore-item }}">
     {% endif %}
   </head>
   <body>
-    <header class="top-header print-hide">
-      <div class="social-icons" style="float:right;">
-        <a href="https://github.com/benburwell"><i class="fa fa-2x fa-github"></i></a>
-        <a href="https://twitter.com/bburwell"><i class="fa fa-2x fa-twitter"></i></a>
+    <header class="main-header">
+      <div class="container">
+        <nav class="single-column">
+          <div class="centered">
+            <a href="/"><i class="fa fa-lg fa-home"></i> Home</a>
+            <a href="/posts/"><i class="fa fa-lg fa-pencil"></i> Posts</a>
+            <a href="/projects/"><i class="fa fa-lg fa-code"></i> Projects</a>
+            <a href="https://github.com/benburwell"><i class="fa fa-lg fa-github"></i> GitHub</a>
+            <a href="https://twitter.com/bburwell"><i class="fa fa-lg fa-twitter"></i> Twitter</a>
+          </div>
+        </nav>
       </div>
-      <nav>
-        <a class="" href="/">benburwell.com</a>
-        <a class="posts" href="/posts/">/posts</a>
-        <a class="projects" href="/projects/">/projects</a>
-      </nav>
     </header>
-    <main>
-      {{ content }}
-    </main>
-    <footer class="print-hide">
-      <div class="light-gray"><a href="/license/">&copy; 2015</a> &bull; <a href="/privacy/">Privacy</a></div>
-    </footer>
+    <div class="container">
+      <main class="columns">
+        {{ content }}
+      </main>
+      <footer class="columns">
+        <p class="text-center muted sans">
+          <small>
+            <a href="/license/">&copy; 2015</a> &bull; <a class="muted-link" href="/privacy/">Privacy</a>
+          </small>
+        </p>
+      </footer>
+    </div>
     <script async src="/assets/scripts/metrics.js"></script>
   </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
index cd1eeaf..a6bdec5 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,39 +2,46 @@
 layout: master
 ---
 
-<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
-    <header>
-        <h1 itemprop="headline">{{ page.title }}</h1>
-        <p><time datetime="{{ post.date | date: '%Y-%m-%d' }}" itemprop="datePublished">{{ page.date | date: "%A, %-d %B %Y" }}</time></p>
-    </header>
+<article itemscope itemtype="http://schema.org/BlogPosting">
+  <header>
+    <h1 itemprop="headline">{{ page.title }}</h1>
+    <p class="muted sans">
+      <span itemprop="author" itemscope itemtype="http://schema.org/Person">by
+        <span itemprop="name">Ben Burwell</span>
+      </span>
+      <a href="https://twitter.com/bburwell">@bburwell</a> &bull;
+      <time datetime="{{ post.date | date: '%Y-%m-%d' }}" itemprop="datePublished">{{ page.date | date: "%A, %-d %B %Y" }}</time>
+    </p>
+  </header>
 
-    <div itemprop="articleBody">
-        {{ content }}
-    </div>
+  <div itemprop="articleBody">
+    {{ content }}
+  </div>
 </article>
 
-<div class="print-hide center">
-  <p class="sans">Share on:</p>
-  <p>
-    <a target="_blank" href="https://news.ycombinator.com/submitlink?u=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}&amp;t={{ page.title }}"><i class="fa fa-2x fa-hacker-news"></i></a>
-    <a target="_blank" href="https://twitter.com/intent/tweet?text={{ page.title }}&amp;url=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}"><i class="fa fa-2x fa-twitter-square"></i></a>
-    <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}"><i class="fa fa-2x fa-facebook-square"></i></a>
-    <a target="_blank" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}&amp;t={{ page.title }}"><i class="fa fa-2x fa-google-plus-square"></i></a>
-  </p>
-</div>
-
-<div class="print-hide">
-  <div class="split">
-    {% if page.previous %}
-    <div class="left align-left sans">
-      <a href="{{ page.previous.url }}"><i class="fa fa-chevron-left"></i> Older Post</a>
-    </div>
-    {% endif %}
+<div class="columns">
+  <div class="one-third column">
+    <p class="text-left sans">
+      {% if page.previous %}
+      <a href="{{ page.previous.url }}"><i class="fa fa-lg fa-chevron-left"></i> Older Post</a>
+      {% endif %}
+    </p>
+  </div>
+  
+  <div class="one-third column text-center">
+    <p>
+      <a title="Share/Discuss on Hacker News" target="_blank" href="https://news.ycombinator.com/submitlink?u=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}&amp;t={{ page.title }}"><i class="fa fa-2x fa-hacker-news"></i></a>
+      <a title="Share on Twitter" target="_blank" href="https://twitter.com/intent/tweet?text={{ page.title }}&amp;url=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}"><i class="fa fa-2x fa-twitter-square"></i></a>
+      <a title="Share on Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}"><i class="fa fa-2x fa-facebook-square"></i></a>
+      <a title="Share on Google+" target="_blank" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.benburwell.com{{ page.url | cgi_escape }}&amp;t={{ page.title }}"><i class="fa fa-2x fa-google-plus-square"></i></a>
+    </p>
+  </div>
 
-    {% if page.next %}
-    <div class="right align-right sans">
-      <a href="{{ page.next.url }}">Newer Post <i class="fa fa-chevron-right"></i></a>
-    </div>
-    {% endif %}
+  <div class="one-third column">
+    <p class="text-right sans">
+      {% if page.next %}
+      <a href="{{ page.next.url }}">Newer Post <i class="fa fa-lg fa-chevron-right"></i></a>
+      {% endif %}
+    </p>
   </div>
 </div>
diff --git a/_sass/_base.scss b/_sass/_base.scss
deleted file mode 100644
index dc8d1fa..0000000
--- a/_sass/_base.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-html {
-  font-size: 20px;
-}
-
-body {
-  font-family: $serif;
-  font-size: 20px;
-  margin: 0;
-  padding: 0;
-}
-
-article, aside, p {
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  padding: 0;
-}
-
-strong {
-  font-weight: bold;
-}
-
-em {
-  font-style: italic;
-}
-
-pre, code, kbd {
-  font-family: $monospace;
-}
-
-pre {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-a {
-  text-decoration: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-time {
-  display: inline;
-}
-
-hr {
-  border-width: 1px;
-  border-color: $gray;
-  border-style: dotted none none none;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-ul, ol {
-  margin: 0;
-}
-
-li {
-  margin: 1rem;
-}
-
-blockquote {
-  margin: 0;
-  padding-left: 1em;
-  padding-right: 3em;
-  font-style: italic;
-  font-size: 1.2rem;
-}
diff --git a/_sass/_brand.scss b/_sass/_brand.scss
deleted file mode 100644
index 9d9eb63..0000000
--- a/_sass/_brand.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-body {
-  color: $gray;
-}
-
-header, footer, main {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  @extend .container;
-}
-
-main {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-a {
-  color: $teal;
-  transition: color 0.4s ease, background-color 0.4s ease;
-
-  &:hover {
-    color: $gray;
-    @extend .hilite;
-  }
-}
-
-kbd {
-  border-style: solid;
-  border-color: $light-gray;
-  border-width: 1px 1px 2px 1px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  padding: 0 0.3em;
-}
-
-footer {
-  @extend .center;
-  font-family: $sans;
-  font-size: 0.8rem;
-  margin-top: 2rem;
-}
-
-header nav a {
-  display: inline-block;
-  font-family: $monospace;
-  margin-right: 1rem;
-}
-
-time {
-  color: $light-gray;
-  font-style: italic;
-}
-
-hr {
-  width: 20%;
-  margin-left: auto;
-  margin-right: auto;
-  border-color: $light-gray;
-}
-
-aside {
-  width: 66%;
-  // text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  color: $light-gray;
-}
-
-ul {
-  list-style-type: square;
-}
-
-ol {
-  list-style-type: lower-roman;
-}
-
-.social-icons {
-  a {
-    padding: 0.5em;
-    color: $light-gray;
-    &:hover {
-      color: $gray;
-      background-color: transparent;
-    }
-  }
-}
-
-.about pre {
-  color: $light-gray;
-  margin-left: 0;
-  em {
-    color: $gray;
-    font-style: normal;
-  }
-}
-
-.data-table {
-  font-size: 0.8rem;
-}
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
deleted file mode 100644
index f813c72..0000000
--- a/_sass/_mixins.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@mixin clearfix {
-  &:before {
-    display: table;
-    content: "";
-  }
-
-  &:after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-}
-
-@mixin transition ($param, $time, $type) {
-    -webkit-transition: $param $time $type;
-    -moz-transition: $param $time $type;
-    -o-transition: $param $time $type;
-    -ms-transition: $param $time $type;
-    transition: $param $time $type;
-}
diff --git a/_sass/_print.scss b/_sass/_print.scss
deleted file mode 100644
index e63f187..0000000
--- a/_sass/_print.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@media print {
-
-  body {
-    font-size: 12pt;
-    color: black;
-  }
-
-  time {
-    color: black;
-  }
-
-  a {
-    color: black;
-    text-decoration: underline;
-  }
-
-  .print-hide {
-    display: none;
-  }
-}
diff --git a/_sass/_respond.scss b/_sass/_respond.scss
deleted file mode 100644
index 863767a..0000000
--- a/_sass/_respond.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Set up default container
-.container {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-// If we have a decent size screen, we can split columns if we want to
-@media only screen and (min-width: 768px) {
-  .split {
-    @include clearfix;
-
-    .left, .right {
-      width: 50%;
-      margin: 0;
-      padding: 0;
-    }
-
-    .left {
-      float: left;
-    }
-
-    .right {
-      float: right;
-    }
-  }
-}
-
-// Set a layout breakpoint at 768px for tablets
-@media only screen and (min-width: 768px) and (max-width: 799px) {
-  .container {
-    width: 768px;
-  }
-}
-
-// Set a layout breakpoint at 900px for desktops
-@media only screen and (min-width: 800px) {
-  .container {
-    width: 800px;
-  }
-}
diff --git a/_sass/_typography.scss b/_sass/_typography.scss
deleted file mode 100644
index a97953e..0000000
--- a/_sass/_typography.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-body {
-  line-height: 2.2;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: $sans;
-  font-weight: 200;
-  line-height: 1.3;
-}
-
-h1 {
-  font-size: 2rem;
-  margin-top: 2.5rem;
-  margin-bottom: 1.5rem;
-}
-
-h2 {
-  font-size: 1.5rem;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-h1 small {
-  font-size: 1rem;
-  padding-left: 1rem;
-}
-
-pre, code, kbd {
-  font-size: 0.9rem;
-  color: $gray;
-}
-
-pre, code {
-  white-space: pre;
-}
-
-p {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
diff --git a/_sass/_utility.scss b/_sass/_utility.scss
deleted file mode 100644
index 6c0c796..0000000
--- a/_sass/_utility.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.hilite {
-  background-color: $highlight;
-}
-
-.center {
-  text-align: center;
-}
-
-.align-left {
-  text-align: left;
-}
-
-.align-right {
-  text-align: right;
-}
-
-.sans {
-  font-family: $sans;
-}
-
-.monospace {
-  font-family: $monospace;
-}
-
-.light-gray {
-  color: $light-gray;
-}
-
-.compressed-list li {
-  margin: 0;
-}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
deleted file mode 100644
index 267a722..0000000
--- a/_sass/_variables.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Colors
-$teal: #00819B;
-$gray: #40434E;
-$light-gray: lighten($gray, 21%);
-$highlight: #ffd;
-$white: #fff;
-
-// Fonts
-$sans: 'open_sans', sans-serif;
-$serif: 'merriweather_light', serif;
-$monospace: 'source_code_pro', monospace;
diff --git a/_sass/font-awesome/_icons.scss b/_sass/font-awesome/_icons.scss
index 8e84cb4..e7c4398 100644
--- a/_sass/font-awesome/_icons.scss
+++ b/_sass/font-awesome/_icons.scss
@@ -8,7 +8,7 @@
 // .#{$fa-css-prefix}-heart:before { content: $fa-var-heart; }
 // .#{$fa-css-prefix}-star:before { content: $fa-var-star; }
 // .#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; }
-// .#{$fa-css-prefix}-user:before { content: $fa-var-user; }
+.#{$fa-css-prefix}-user:before { content: $fa-var-user; }
 // .#{$fa-css-prefix}-film:before { content: $fa-var-film; }
 // .#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; }
 // .#{$fa-css-prefix}-th:before { content: $fa-var-th; }
@@ -24,7 +24,7 @@
 // .#{$fa-css-prefix}-gear:before,
 // .#{$fa-css-prefix}-cog:before { content: $fa-var-cog; }
 // .#{$fa-css-prefix}-trash-o:before { content: $fa-var-trash-o; }
-// .#{$fa-css-prefix}-home:before { content: $fa-var-home; }
+.#{$fa-css-prefix}-home:before { content: $fa-var-home; }
 // .#{$fa-css-prefix}-file-o:before { content: $fa-var-file-o; }
 // .#{$fa-css-prefix}-clock-o:before { content: $fa-var-clock-o; }
 // .#{$fa-css-prefix}-road:before { content: $fa-var-road; }
@@ -68,7 +68,7 @@
 // .#{$fa-css-prefix}-photo:before,
 // .#{$fa-css-prefix}-image:before,
 // .#{$fa-css-prefix}-picture-o:before { content: $fa-var-picture-o; }
-// .#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
+.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
 // .#{$fa-css-prefix}-map-marker:before { content: $fa-var-map-marker; }
 // .#{$fa-css-prefix}-adjust:before { content: $fa-var-adjust; }
 // .#{$fa-css-prefix}-tint:before { content: $fa-var-tint; }
@@ -147,7 +147,7 @@
 // .#{$fa-css-prefix}-sign-out:before { content: $fa-var-sign-out; }
 // .#{$fa-css-prefix}-linkedin-square:before { content: $fa-var-linkedin-square; }
 // .#{$fa-css-prefix}-thumb-tack:before { content: $fa-var-thumb-tack; }
-.#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; }
+// .#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; }
 // .#{$fa-css-prefix}-sign-in:before { content: $fa-var-sign-in; }
 // .#{$fa-css-prefix}-trophy:before { content: $fa-var-trophy; }
 // .#{$fa-css-prefix}-github-square:before { content: $fa-var-github-square; }
@@ -288,7 +288,7 @@
 // .#{$fa-css-prefix}-flag-o:before { content: $fa-var-flag-o; }
 // .#{$fa-css-prefix}-flag-checkered:before { content: $fa-var-flag-checkered; }
 // .#{$fa-css-prefix}-terminal:before { content: $fa-var-terminal; }
-// .#{$fa-css-prefix}-code:before { content: $fa-var-code; }
+.#{$fa-css-prefix}-code:before { content: $fa-var-code; }
 // .#{$fa-css-prefix}-mail-reply-all:before,
 // .#{$fa-css-prefix}-reply-all:before { content: $fa-var-reply-all; }
 // .#{$fa-css-prefix}-star-half-empty:before,
diff --git a/_sass/font-awesome/_larger.scss b/_sass/font-awesome/_larger.scss
index 41e9a81..94445f2 100644
--- a/_sass/font-awesome/_larger.scss
+++ b/_sass/font-awesome/_larger.scss
@@ -8,6 +8,6 @@
   vertical-align: -15%;
 }
 .#{$fa-css-prefix}-2x { font-size: 2em; }
-.#{$fa-css-prefix}-3x { font-size: 3em; }
-.#{$fa-css-prefix}-4x { font-size: 4em; }
-.#{$fa-css-prefix}-5x { font-size: 5em; }
+// .#{$fa-css-prefix}-3x { font-size: 3em; }
+// .#{$fa-css-prefix}-4x { font-size: 4em; }
+// .#{$fa-css-prefix}-5x { font-size: 5em; }
diff --git a/_sass/font-awesome/font-awesome.scss b/_sass/font-awesome/font-awesome.scss
index c893b48..9517797 100644
--- a/_sass/font-awesome/font-awesome.scss
+++ b/_sass/font-awesome/font-awesome.scss
@@ -9,7 +9,7 @@
 @import "core";
 @import "larger";
 // @import "fixed-width";
-@import "list";
+// @import "list";
 // @import "bordered-pulled";
 // @import "animated";
 // @import "rotated-flipped";
diff --git a/_sass/tiny/_base.scss b/_sass/tiny/_base.scss
new file mode 100644
index 0000000..ba6d78a
--- /dev/null
+++ b/_sass/tiny/_base.scss
@@ -0,0 +1,62 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-size: $base-font-size;
+  color: $base-color;
+}
+
+a {
+  color: $brand-color;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: $alternate-color;
+  }
+}
+
+// Horizontal lines
+hr {
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid $muted-color;
+  @include clearfix();
+}
+
+p {
+  line-height: 2em;
+}
+
+li {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+pre {
+  line-height: 1.5em;
+}
+
+blockquote {
+  font-style: italic;
+}
+
+.main-header {
+  padding: 10px;
+  text-align: center;
+  font-family: $sans;
+  @include gradient(lighten($brand-color, 3%), darken($brand-color, 3%));
+  a {
+    color: white;
+    padding: 15px;
+
+    &:active,
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/_includes/fonts.scss b/_sass/tiny/_fonts.scss
index bff4b44..1b60da6 100644
--- a/_includes/fonts.scss
+++ b/_sass/tiny/_fonts.scss
@@ -8,16 +8,6 @@
     font-style: normal;
 }
 
-// Source Code Pro
-@font-face {
-    font-family: 'source_code_pro';
-    src: url('/assets/fonts/sourcecodepro-regular.eot');
-    src: url('/assets/fonts/sourcecodepro-regular.woff') format('woff'),
-        url('/assets/fonts/sourcecodepro-regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
 // Merriweather
 @font-face {
     font-family: 'merriweather_light';
@@ -37,4 +27,4 @@
          url('/assets/fonts/merriweather_light-webfont.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
-}
-\ No newline at end of file
+}
diff --git a/_sass/tiny/_layout.scss b/_sass/tiny/_layout.scss
new file mode 100644
index 0000000..bf44757
--- /dev/null
+++ b/_sass/tiny/_layout.scss
@@ -0,0 +1,69 @@
+// Fixed-width, centered column for site content.
+.container {
+  width: $container-width;
+  margin-right: auto;
+  margin-left: auto;
+  @include clearfix;
+}
+
+// Grid system
+//
+// Create rows with `.columns` to clear the floated columns and outdent the
+// padding on `.column`s with negative margin for alignment.
+
+.columns {
+  margin-right: -$grid-gutter;
+  margin-left: -$grid-gutter;
+  @include clearfix;
+}
+
+// Base class for every column (requires a column width from below)
+.column {
+  float: left;
+  padding-right: $grid-gutter;
+  padding-left: $grid-gutter;
+}
+
+// Column widths
+.one-third {
+  width: 33.333333%;
+}
+
+// .two-thirds {
+//   width: 66.666667%;
+// }
+
+// .one-fourth {
+//   width: 25%;
+// }
+
+.one-half {
+  width: 50%;
+}
+
+// .three-fourths {
+//   width: 75%;
+// }
+
+// .one-fifth {
+//   width: 20%;
+// }
+
+// .four-fifths {
+//   width: 80%;
+// }
+
+// Single column hack
+.single-column {
+  padding-right: $grid-gutter;
+  padding-left: $grid-gutter;
+}
+
+// Equal width columns via table sorcery.
+// .table-column {
+//   display: table-cell;
+//   width: 1%;
+//   padding-right: $grid-gutter;
+//   padding-left: $grid-gutter;
+//   vertical-align: top;
+// }
diff --git a/_sass/tiny/_mixins.scss b/_sass/tiny/_mixins.scss
new file mode 100644
index 0000000..3afa7e9
--- /dev/null
+++ b/_sass/tiny/_mixins.scss
@@ -0,0 +1,36 @@
+// Clearfix
+//
+// Clears floats via mixin (avoid using as a class).
+
+@mixin clearfix {
+  &:before {
+    display: table;
+    content: "";
+  }
+
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}
+
+// Text hiding for image based text replacement.
+// Higher performance than -9999px because it only renders
+// the size of the actual text, not a full 9999px box.
+
+@mixin hide-text() {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+@mixin gradient($start: #fafafa, $end: #eaeaea) {
+  background-color: $end;
+  // FF 3.6+
+  background-image: -moz-linear-gradient($start, $end);
+  // Safari 5.1+, Chrome 10+
+  background-image: -webkit-linear-gradient($start, $end);
+  background-image: linear-gradient($start, $end);
+  background-repeat: repeat-x;
+}
diff --git a/_sass/tiny/_normalize.scss b/_sass/tiny/_normalize.scss
new file mode 100644
index 0000000..4ccb777
--- /dev/null
+++ b/_sass/tiny/_normalize.scss
@@ -0,0 +1,423 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+  font-family: $serif; /* 1 */
+  text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+// audio,
+// canvas,
+// progress,
+// video {
+//   display: inline-block; /* 1 */
+//   vertical-align: baseline; /* 2 */
+// }
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+// audio:not([controls]) {
+//   display: none;
+//   height: 0;
+// }
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+// [hidden],
+// template {
+//   display: none;
+// }
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+// dfn {
+//   font-style: italic;
+// }
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+// mark {
+//   background: #ff0;
+//   color: #000;
+// }
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+// button,
+// input,
+// optgroup,
+// select,
+// textarea {
+//   color: inherit; /* 1 */
+//   font: inherit; /* 2 */
+//   margin: 0; /* 3 */
+// }
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+// button {
+//   overflow: visible;
+// }
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+// button,
+// select {
+//   text-transform: none;
+// }
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+// button,
+// html input[type="button"], /* 1 */
+// input[type="reset"],
+// input[type="submit"] {
+//   -webkit-appearance: button; /* 2 */
+//   cursor: pointer; /* 3 */
+// }
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+// button[disabled],
+// html input[disabled] {
+//   cursor: default;
+// }
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+// button::-moz-focus-inner,
+// input::-moz-focus-inner {
+//   border: 0;
+//   padding: 0;
+// }
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+// input {
+//   line-height: normal;
+// }
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+// input[type="checkbox"],
+// input[type="radio"] {
+//   box-sizing: border-box; /* 1 */
+//   padding: 0; /* 2 */
+// }
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+// input[type="number"]::-webkit-inner-spin-button,
+// input[type="number"]::-webkit-outer-spin-button {
+//   height: auto;
+// }
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+// input[type="search"] {
+//   -webkit-appearance: textfield; /* 1 */
+//   box-sizing: content-box; /* 2 */
+// }
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+// input[type="search"]::-webkit-search-cancel-button,
+// input[type="search"]::-webkit-search-decoration {
+//   -webkit-appearance: none;
+// }
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+// fieldset {
+//   border: 1px solid #c0c0c0;
+//   margin: 0 2px;
+//   padding: 0.35em 0.625em 0.75em;
+// }
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+// legend {
+//   border: 0; /* 1 */
+//   padding: 0; /* 2 */
+// }
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+// textarea {
+//   overflow: auto;
+// }
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+// optgroup {
+//   font-weight: bold;
+// }
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/_sass/tiny/_syntax.scss b/_sass/tiny/_syntax.scss
new file mode 100644
index 0000000..1e651cf
--- /dev/null
+++ b/_sass/tiny/_syntax.scss
@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+\ No newline at end of file
diff --git a/_sass/tiny/_type.scss b/_sass/tiny/_type.scss
new file mode 100644
index 0000000..8f873ac
--- /dev/null
+++ b/_sass/tiny/_type.scss
@@ -0,0 +1,12 @@
+h1, h2 {
+  font-family: $sans;
+  font-weight: 200;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
diff --git a/_sass/tiny/_utility.scss b/_sass/tiny/_utility.scss
new file mode 100644
index 0000000..1213070
--- /dev/null
+++ b/_sass/tiny/_utility.scss
@@ -0,0 +1,39 @@
+// Layout
+.centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Text alignment
+.text-right { text-align: right; }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+
+.sans {
+  font-family: $sans;
+}
+
+.muted {
+  color: $muted-color;
+  a {
+    color: $muted-color;
+    &:active,
+    &:hover {
+      color: $alternate-color;
+    }
+  }
+}
+
+.fancy-table {
+  font-family: $sans;
+  font-size: 80%;
+  td {
+    padding: 7px;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #eee;
+  }
+}
diff --git a/_sass/tiny/_variables.scss b/_sass/tiny/_variables.scss
new file mode 100644
index 0000000..1b1a873
--- /dev/null
+++ b/_sass/tiny/_variables.scss
@@ -0,0 +1,12 @@
+$brand-color: #00819B;
+$alternate-color: adjust-hue($brand-color, -120);
+$muted-color: desaturate($brand-color, 100%);
+$base-color: #222;
+
+$base-font-size: 20px;
+$sans: 'open_sans', Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif;
+$serif: 'merriweather_light';
+$monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+
+$container-width: 900px;
+$grid-gutter: 10px;
diff --git a/assets/stylesheets/site.scss b/assets/stylesheets/site.scss
deleted file mode 100644
index e36909d..0000000
--- a/assets/stylesheets/site.scss
+++ /dev/null
@@ -1,12 +0,0 @@
----
----
-
-@import "mixins";
-@import "variables";
-@import "utility";
-@import "respond";
-@import "base";
-@import "typography";
-@import "brand";
-@import "font-awesome/font-awesome";
-@import "print"
diff --git a/index.html b/index.html
index 3a7c992..173c7b3 100644
--- a/index.html
+++ b/index.html
@@ -2,29 +2,28 @@
 layout: master
 title: Ben Burwell - Software Engineer
 ---
-<section class="about split">
-  <div class="left">
-    <pre>{
-  "<em>name</em>": "<em>Ben Burwell</em>",
-  "<em>location</em>": "<em>Allentown, PA</em>",
-  "<em>twitter</em>": "<a href="https://twitter.com/bburwell">@bburwell</a>",
-  "<em>github</em>": "<a href="https://github.com/benburwell">@benburwell</a>",
-  "<em>keybase</em>": "<a href="https://keybase.io/benburwell">@benburwell</a>",
-  "<em>email</em>": "<a href="mailto:ben@benburwell.com">ben@benburwell.com</a>",
-  "<em>pgp</em>": "<a href="https://keybase.io/benburwell/key.asc">6661 12D9 67A3 6ECD</a>",
-  "<em>resume</em>": "<a href="/assets/pdf/Ben_Burwell_Resume.pdf">resume.pdf</a>"
+
+<div class="one-half column">
+  <pre>{
+  "name": "Ben Burwell",
+  "location": "Allentown, PA",
+  "twitter": "<a href="https://twitter.com/bburwell">@bburwell</a>",
+  "github": "<a href="https://github.com/benburwell">@benburwell</a>",
+  "keybase": "<a href="https://keybase.io/benburwell">@benburwell</a>",
+  "email": "<a href="mailto:ben@benburwell.com">ben@benburwell.com</a>",
+  "pgp": "<a href="https://keybase.io/benburwell/key.asc">6661 12D9 67A3 6ECD</a>",
+  "resume": "<a href="/assets/pdf/Ben_Burwell_Resume.pdf">resume.pdf</a>"
 }</pre>
-  </div>
+</div>
 
-  <div class="right">
-    <h2>Recent Posts</h2>
-    <ul class="compressed-list">
-      {% for post in site.posts limit:3 %}
-      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
-      {% endfor %}
-    </ul>
+<div class="one-half column">
+  <h2>Recent Posts</h2>
+  <ul>
+    {% for post in site.posts limit:3 %}
+    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+    {% endfor %}
+  </ul>
 
-    <h2>About</h2>
-    <p>I am a software engineer and <a href="/theatre/">lighting designer</a>. I’m passionate about kerning, coffee, and the <a href="https://en.wikipedia.org/wiki/Unix_philosophy" target="_blank">UNIX philosophy</a>.</p>
-  </div>
-</section>
+  <h2>About</h2>
+  <p>I am a software engineer and <a href="/theatre/">lighting designer</a>. I’m passionate about kerning, coffee, and the <a href="https://en.wikipedia.org/wiki/Unix_philosophy" target="_blank">UNIX philosophy</a>.</p>
+</div>
diff --git a/posts/index.html b/posts/index.html
index 2158ac9..f8b9b1d 100644
--- a/posts/index.html
+++ b/posts/index.html
@@ -8,8 +8,7 @@ redirect_from: /writing/
 <section>
     {% for post in site.posts %}
         <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
-        <p><time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%A, %-d %B %Y" }}</time></p>
+        <p class="muted sans">by Ben Burwell <a href="https://twitter.com/bburwell">@bburwell</a> &bull; <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%A, %-d %B %Y" }}</time></p>
         {{ post.excerpt }}
-        <p><a href="{{ post.url }}">Continue reading <i class="fa fa-chevron-right"></i></a></p>
     {% endfor %}
 </section>
diff --git a/projects/index.html b/projects/index.html
index fd6a9a4..d9beb47 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -5,24 +5,19 @@ description: Projects I’ve done.
 ---
 
 {% for project in site.data.projects %}
-
   <h1>
     {% if project.live %}
       <a href="{{ project.live }}" target="_blank">{{ project.name }}</a>
     {% else %}
       {{ project.name }}
     {% endif %}
-    <small class="light-gray">{{ project.tech }}</small>
   </h1>
-
-  <p>
-    {{ project.description }}
+  <p class="muted sans">
+    {{ project.tech }}
     {% if project.github %}
-      <a style="display:inline-block;margin-left:1rem;" href="https://github.com/{{ project.github }}">
-        <i class="fa fa-github"></i>
-        Read the code
-      </a>
+      &bull;
+      <a href="https://github.com/{{ project.github }}"><i class="fa fa-github"></i> {{ project.github }}</a>
     {% endif %}
   </p>
-
+  <p>{{ project.description }}</p>
 {% endfor %}
diff --git a/theatre/index.html b/theatre/index.html
index c10ab19..641c61f 100644
--- a/theatre/index.html
+++ b/theatre/index.html
@@ -6,13 +6,13 @@ description: Mostly for my own reference, here’s a list of shows I’ve worked
 
 <h1>Theatrical Credits</h1>
 
-<table class="data-table">
-    {% for show in site.data.shows %}
-    <tr>
-        <td><i>{{ show.name }}</i></td>
-        <td>{{ show.role }}</td>
-        <td>{{ show.person }}</td>
-        <td class="right">{{ show.date }}</td>
-    </tr>
-    {% endfor %}
+<table class="fancy-table">
+  {% for show in site.data.shows %}
+  <tr>
+    <td><i>{{ show.name }}</i></td>
+    <td>{{ show.role }}</td>
+    <td>{{ show.person }}</td>
+    <td class="text-right">{{ show.date }}</td>
+  </tr>
+  {% endfor %}
 </table>
author	Ben Burwell <ben@benburwell.com>	2015-08-11 22:56:34 -0400
committer	Ben Burwell <ben@benburwell.com>	2015-08-11 22:56:34 -0400
commit	b3967c83cbdba7f44c2ecef09d3e80801106ac81 (patch)
tree	1dd61b9840a85ab8d3d4610bbba2f2e3aa4a00c6
parent	6b0fad5657d802603cb6f64f51b5387bbfbc2059 (diff)