Initial commit

2013-05-24 10:25:31 -04:00 · 2013-05-24 10:25:31 -04:00 · aea18887c0
commit aea18887c0
64 changed files with 12551 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
+_site
+.DS_Store
+*.sublime-project
+*.sublime-workspace
+codekit-config.json
+node_modules
+_asset_bundler_cache
+Gemfile.lock
--- a/6
+++ b/6
@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'jekyll'
+gem 'jekyll-minibundle'
+gem 'coderay'
+gem 'rake'
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,53 @@
+title:            Minimal Mistakes
+tagline:          Jekyll Theme
+description:      A responsive Jekyll theme with editorial design tendencies.
+url:              http://mmistakes.github.io/minimal-mistakes
+
+# Owner/author information goes here.
+owner:
+  name:           Sweet Dood
+  avatar:         "/images/200x200.png"
+  bio:            "The greatest one line biography for the greatest dood."
+  email:          sweetdood@mail.me
+  twitter:        "@sweeeeeetdood"
+  google_plus:    
+
+# Analytics and webmaster tools stuff goes here
+google_analytics:    
+google_verify: 
+bing_verify:   
+
+timezone:    America/New_York
+future:      true
+pygments:    true
+markdown:    kramdown
+
+# https://github.com/mojombo/jekyll/wiki/Permalinks
+permalink:   /:categories/:title
+
+maruku:
+  use_tex:    false
+  use_divs:   false
+  png_engine: blahtex
+  png_dir:    images/latex
+  png_url:    /images/latex
+
+rdiscount:
+  extensions: [smart]
+
+kramdown:
+  auto_ids: true,
+  footnote_nr: 1
+  entity_output: as_char
+  toc_levels: 1..6
+  use_coderay: true
+  
+  coderay:
+    coderay_line_numbers: 
+    coderay_line_numbers_start: 1
+    coderay_tab_width: 4
+    coderay_bold_every: 10
+    coderay_css: class
+
+include: [".htaccess"]
+exclude: ["lib", "config.rb", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "less", "minimal-mistakes.sublime-project", "minimal-mistakes.sublime-workspace"]
--- a/_includes/author-bio.html
+++ b/_includes/author-bio.html
@ -0,0 +1,3 @@
+<img src="{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo" width="100" height="100"></a>
+<h4>{{ site.owner.name }}</h4>
+<p>{{ site.owner.bio }}</p>
--- a/_includes/chrome-frame.html
+++ b/_includes/chrome-frame.html
@ -0,0 +1 @@
+<!--[if lt IE 9]><div class="chrome-frame alert alert-info"><strong>Your browser is really old!</strong> <a href="http://browsehappy.com/">Why not upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better enjoy this site?</div><![endif]-->
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -0,0 +1 @@
+<h6>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</h6>
--- a/_includes/head.html
+++ b/_includes/head.html
@ -0,0 +1,48 @@
+<meta charset="utf-8">
+<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
+<meta name="description" content="{{ page.description }}">
+<meta name="keywords" content="{{ page.tags | join: ', ' }}">
+<!-- Twitter Card and Open Graph meta -->
+<meta name="twitter:title" content="{% if page.title %}{{ page.title }} &#8211; {% endif %}Made Mistakes">
+<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ page.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}">
+<meta name="twitter:creator" content="{{ site.owner.twitter }}">
+{% if page.layout == 'photo' %}
+<meta name="twitter:card" content="photo">
+{% if page.image %}<meta name="twitter:image:src" content="{{ site.url }}/images/{{ page.image.feature }}">{% endif %}
+{% else %}
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image:src" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/default-thumb.png{% endif %}">
+<meta property="og:type" content="article">
+<meta property="og:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/default-thumb.png{% endif %}">
+{% endif %}
+<meta property="og:locale" content="en_US">
+<meta property="og:title" content="{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}">
+<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ page.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}">
+<meta property="og:url" content="{{ site.url }}{{ page.url }}">
+<meta property="og:site_name" content="{{ site.title }}">
+
+<meta name="google-site-verification" content="{{ site.google_verify }}">
+<meta name="msvalidate.01" content="{{ site.bing_verify }}">
+{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
+<link rel="canonical" href="{{ canonical }}">
+<link href="/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
+<link rel="author" href="{{ site.owner.google_plus }}">
+
+<!-- http://t.co/dKP3o1e -->
+<meta name="HandheldFriendly" content="True">
+<meta name="MobileOptimized" content="320">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!-- Google Webfonts -->
+<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
+<!-- For all browsers -->
+<link rel="stylesheet" href="/assets/css/main.css">
+
+<!--[if (lt IE 9) & (!IEMobile)]>
+<link rel="stylesheet" href="/assets/css/ie.css">
+<![endif]-->
+
+<meta http-equiv="cleartype" content="on">
+
+<!-- Load Modernizr -->
+<script src="/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@ -0,0 +1,14 @@
+<div class="navigation-wrapper">
+	<div class="site-name">
+		<a href="{{ site.url }}">{{ site.title }}</a>
+	</div><!-- /.site-name -->
+	<div class="top-navigation">
+		<nav role="navigation">
+		    <ul>
+		        <li><a href="/about">About</a></li>
+		        <li><a href="/articles">Sample Posts</a></li>
+		        <li><a href="/theme-setup">Theme Setup</a></li>
+		    </ul>
+		</nav>
+	</div><!-- /.top-navigation -->
+</div><!-- /.navigation-wrapper -->
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@ -0,0 +1,18 @@
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
+<script src="/assets/js/main.min.js"></script>
+<!-- Asynchronous Google Analytics snippet -->
+<script>
+  var _gaq = _gaq || [];
+  var pluginUrl = 
+ '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+  _gaq.push(['_setAccount', '{{ site.google_analytics }}']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
--- a/_layouts/home.html
+++ b/_layouts/home.html
@ -0,0 +1,48 @@
+<!doctype html>
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
+<head>
+{% include head.html %}
+</head>
+
+<body class="home">
+
+{% include chrome-frame.html %}
+
+{% include navigation.html %}
+
+<div class="image-wrap">
+  <div class="headline-wrap">
+    <h1>{{ page.title }}</h1>
+    {% if page.tagline %}<h2>{{ page.tagline }}</h2>{% endif %}
+  </div><!--/ .headline-wrap -->
+  <img src="/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
+</div><!-- /.image-wrap -->
+
+<div class="article-author-top">
+  {% include author-bio.html %}
+</div>
+
+<div id="index">
+  <h3>Latest Articles</h3>
+  <hr />
+  {% for post in site.categories.articles limit:3 %}    
+  <article>
+    <h2><a href="{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
+    <p>{% if page.description %}{{ page.description }}{% else %}{{ page.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
+  </article>
+  {% endfor %}
+</div><!-- /#index -->
+
+<div class="footer-wrap">
+  <footer>
+    {% include footer.html %}
+  </footer>
+</div><!-- /.footer-wrap -->
+
+{% include scripts.html %}
+  
+</body>
+</html>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -0,0 +1,43 @@
+<!doctype html>
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
+<head>
+{% include head.html %}
+</head>
+
+<body class="page">
+
+{% include chrome-frame.html %}
+
+{% include navigation.html %}
+
+{% if page.image.feature %}<div class="image-wrap">
+  <img src="/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
+</div><!-- /.image-wrap -->{% endif %}
+
+<div id="main" role="main">
+  <div class="article-author-top">
+    {% include author-bio.html %}
+  </div>
+  <article itemprop="articleBody">
+    <div class="headline-wrap">
+      <h1 itemprop="name headline">{{ page.title }}</h1>
+    </div><!--/ .headline-wrap -->
+    <div class="article-wrap">
+      {{ content }}
+    </div><!-- /.article-wrap -->
+  </article>
+</div><!-- /#index -->
+
+<div class="footer-wrap">
+  <footer>
+    {% include footer.html %}
+  </footer>
+</div><!-- /.footer-wrap -->
+
+{% include scripts.html %}          
+
+</body>
+</html>
--- a/_layouts/post-index.html
+++ b/_layouts/post-index.html
@ -0,0 +1,47 @@
+<!doctype html>
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
+<head>
+{% include head.html %}
+</head>
+
+<body class="articles">
+
+{% include chrome-frame.html %}
+
+{% include navigation.html %}
+
+<div class="image-wrap">
+  <div class="headline-wrap">
+    <h1>{{ page.title }}</h1>
+    {% if page.tagline %}<h2>{{ page.tagline }}</h2>{% endif %}
+  </div><!--/ .headline-wrap -->
+  <img src="/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
+</div><!-- /.image-wrap -->
+
+<div class="article-author-top">
+  {% include author-bio.html %}
+</div>
+
+<div id="index">
+  {% for post in site.posts %}  
+  <article>
+    <h2><a href="{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
+    <p class="byline"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%B %d, %Y" }}</time></p>
+    <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
+  </article>
+  {% endfor %}
+</div><!-- /#index -->
+
+<div class="footer-wrap">
+  <footer>
+    {% include footer.html %}
+  </footer>
+</div><!-- /.footer-wrap -->
+
+{% include scripts.html %}
+  
+</body>
+</html>
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -0,0 +1,68 @@
+<!doctype html>
+<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
+<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
+<head>
+{% include head.html %}
+</head>
+
+<body class="article">
+
+{% include chrome-frame.html %}
+
+{% include navigation.html %}
+
+{% if page.image.feature %}<div class="image-wrap">
+  <img src="/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
+</div><!-- /.image-wrap -->{% endif %}
+
+<div id="main" role="main" itemscope itemtype="http://schema.org/BlogPosting">
+  <div class="article-author-top">
+    {% include author-bio.html %}
+  </div>
+  <article itemprop="articleBody">
+    <div class="headline-wrap">
+      <h1 itemprop="name headline">{{ page.title }}</h1>
+      <h2>{{ page.tagline }}</h2>
+    </div><!--/ .headline-wrap -->
+    <div class="article-wrap">
+      {{ content }}
+      <hr />
+      <footer role="contentinfo">
+        <div class="article-author-bottom">
+          {% include author-bio.html %}
+        </div>
+        <p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}" itemprop="dateModified">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>.</p>
+      </footer>
+    </div><!-- /.article-wrap -->
+  </article>
+</div><!-- /#main -->
+
+<div class="footer-wrap">
+  {% if site.related_posts.size %}<div class="related-articles">
+    <h4>You might also enjoy <small class="pull-right">(<a href="/articles">View all articles</a>)</small></h4>
+    <ul>
+    {% for post in site.related_posts limit:3 %}
+      {% assign match = false %}
+      {% for category in post.categories %}
+        {% if page.categories contains category %}
+          {% assign match = true %}
+        {% endif %}
+      {% endfor %}
+      {% if match %}
+      <li><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
+      {% endif %}
+    {% endfor %}
+    </ul>
+    <hr />
+  </div><!-- /.related-articles -->{% endif %}
+  <footer>
+    {% include footer.html %}
+  </footer>
+</div><!-- /.footer-wrap -->
+
+{% include scripts.html %}	        
+
+</body>
+</html>
--- a/_posts/2011-03-10-sample-post.md
+++ b/_posts/2011-03-10-sample-post.md
@ -0,0 +1,67 @@
+---
+layout: post
+title: Sample Post
+category: articles
+tags: [intro, beginner, jekyll, tutorial]
+image:
+  feature: texture-feature-05.jpg
+---
+
+## HTML Elements
+
+Below is just about everything you’ll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
+
+*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
+
+HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
+
+### Blockquotes
+
+> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
+
+## List Types
+
+### Ordered Lists
+
+1. Item one
+   1. sub item one
+   2. sub item two
+   3. sub item three
+2. Item two
+
+## Tables
+
+| Header1 | Header2 | Header3 |
+|:--------|:-------:|--------:|
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|----
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|=====
+| Foot1   | Foot2   | Foot3
+{: rules="groups"}
+
+## Code Snippets
+
+~~~ css
+#container {
+  float: left;
+  margin: 0 -240px 0 0;
+  width: 100%;
+}
+~~~
--- a/_posts/2013-05-22-readability-post.md
+++ b/_posts/2013-05-22-readability-post.md
@ -0,0 +1,44 @@
+---
+layout: post
+title: "Testing Readability with a Bunch of Text"
+tagline: "A bunch of hipster ipsum for ya head."
+category: articles
+tags: [sample post, readability, test]
+---
+
+Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
+
+Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
+
+## Cupidatat 90's lo-fi authentic try-hard
+
+In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's. 
+
+* Sartorial hoodie 
+* Labore viral forage
+* Tote bag selvage 
+* DIY exercitation et id ugh tumblr church-key
+
+Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
+
+Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
+
+## Forage occaecat cardigan qui
+
+Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole. 
+
+> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
+
+Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
+
+## Hoodie Duis
+
+Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
+
+### Thundercats Ho!
+
+Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
+
+Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
+
+Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
--- a/_posts/2013-05-22-sample-post-images.md
+++ b/_posts/2013-05-22-sample-post-images.md
@ -0,0 +1,59 @@
+---
+layout: post
+title: "A Post with Images"
+category: articles
+tags: [sample post, images, test]
+---
+
+Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.
+
+### Figures (for images or video)
+
+#### One Up
+
+<figure>
+	<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"></a>
+	<figcaption><a href="http://www.flickr.com/photos/80901381@N04/7758832526/" title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption>
+</figure>
+
+#### Two Up
+
+Apply the `half` class like so to display two images side by side that share the same caption.
+
+~~~ html
+<figure class="half">
+	<img src="/images/image-filename-1.jpg">
+	<img src="/images/image-filename-2.jpg">
+	<figcaption>Caption describing these two images.</figcaption>
+</figure>
+~~~
+
+And you'll get something that looks like this:
+
+<figure class="half">
+	<img src="http://placehold.it/600x300.jpg">
+	<img src="http://placehold.it/600x300.jpg">
+	<figcaption>Two images.</figcaption>
+</figure>
+
+#### Three Up
+
+Apply the `third` class like so to display three images side by side that share the same caption.
+
+~~~ html
+<figure class="third">
+	<img src="/images/image-filename-1.jpg">
+	<img src="/images/image-filename-2.jpg">
+	<img src="/images/image-filename-3.jpg">
+	<figcaption>Caption describing these three images.</figcaption>
+</figure>
+~~~
+
+And you'll get something that looks like this:
+
+<figure class="third">
+	<img src="http://placehold.it/600x300.jpg">
+	<img src="http://placehold.it/600x300.jpg">
+	<img src="http://placehold.it/600x300.jpg">
+	<figcaption>Three images.</figcaption>
+</figure>
--- a/_posts/2013-05-23-readability-feature-post.md
+++ b/_posts/2013-05-23-readability-feature-post.md
@ -0,0 +1,49 @@
+---
+layout: post
+title: "Post with Large Feature Image and Text"
+tagline: "A bunch of hipster ipsum for ya head."
+description: "Custom written post descriptions are the way to go... if you're not lazy."
+category: articles
+tags: [sample post, readability, test]
+image:
+  feature: texture-feature-04.jpg
+---
+
+This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
+
+Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
+
+## Cupidatat 90's lo-fi authentic try-hard
+
+In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's. 
+
+* Sartorial hoodie 
+* Labore viral forage
+* Tote bag selvage 
+* DIY exercitation et id ugh tumblr church-key
+
+Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
+
+Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
+
+## Forage occaecat cardigan qui
+
+Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole. 
+
+> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
+
+Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
+
+## Hoodie Duis
+
+Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
+
+### Thundercats Ho!
+
+Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
+
+Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
+
+Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
+
+[^1]: Texture image courtesty of [Lovetextures](http://www.lovetextures.com/)
--- a/about.md
+++ b/about.md
@ -0,0 +1,21 @@
+---
+layout: page
+permalink: /about/index.html
+title: About the Theme
+tagline: Minimal Mistakes, a Jekyll Theme
+tags: [about, Jekyll, theme, responsive]
+image:
+  feature: texture-feature-02.jpg
+---
+
+Jekyll is pretty rad and figured releasing a cleaned up version of [my setup](http://mademistakes.com) as a theme to hack up and use would be cool. So here be that theme --- I call it **Minimal Mistakes**, a responsive Jekyll theme with editorial tendencies. 
+
+## Minimal Mistakes is all about:
+
+* Responsive templates. Looking good on mobile, tablet, and desktop.
+* Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers. 
+* Minimal embellishments. Content first --- other widget nonsense never.
+* Large feature images for posts and pages.
+* Simple and clear permalink structure *(ie: domain.com/category/post-title)*
+
+<a markdown="0" href="/theme-setup" class="btn">Install Minimal Mistakes Theme</a>
--- a/articles.md
+++ b/articles.md
@ -0,0 +1,9 @@
+---
+layout: post-index
+permalink: /articles/index.html
+title: Articles
+tagline: A List of Posts
+tags: [blog, graphic design]
+image:
+  feature: texture-feature-03.jpg
+---
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
--- a/assets/css/main.css
+++ b/assets/css/main.css
--- a/assets/img/background-dark.png
+++ b/assets/img/background-dark.png
--- a/assets/img/background-light.jpg
+++ b/assets/img/background-light.jpg
--- a/assets/js/main.js
+++ b/assets/js/main.js
--- a/assets/js/main.min.js
+++ b/assets/js/main.min.js
--- a/assets/js/vendor/jquery-1.9.1.min.js
+++ b/assets/js/vendor/jquery-1.9.1.min.js
--- a/assets/js/vendor/jquery.fitvids.js
+++ b/assets/js/vendor/jquery.fitvids.js
@ -0,0 +1,81 @@
+/*global jQuery */
+/*jshint multistr:true browser:true */
+/*!
+* FitVids 1.0
+*
+* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
+* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
+* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
+*
+* Date: Thu Sept 01 18:00:00 2011 -0500
+*/
+
+(function( $ ){
+
+  "use strict";
+
+  $.fn.fitVids = function( options ) {
+    var settings = {
+      customSelector: null
+    };
+
+    var div = document.createElement('div'),
+        ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
+
+    div.className = 'fit-vids-style';
+    div.innerHTML = '&shy;<style>         \
+      .fluid-width-video-wrapper {        \
+         width: 100%;                     \
+         position: relative;              \
+         padding: 0;                      \
+      }                                   \
+                                          \
+      .fluid-width-video-wrapper iframe,  \
+      .fluid-width-video-wrapper object,  \
+      .fluid-width-video-wrapper embed {  \
+         position: absolute;              \
+         top: 0;                          \
+         left: 0;                         \
+         width: 100%;                     \
+         height: 100%;                    \
+      }                                   \
+    </style>';
+
+    ref.parentNode.insertBefore(div,ref);
+
+    if ( options ) {
+      $.extend( settings, options );
+    }
+
+    return this.each(function(){
+      var selectors = [
+        "iframe[src*='player.vimeo.com']",
+        "iframe[src*='www.youtube.com']",
+        "iframe[src*='www.youtube-nocookie.com']",
+        "iframe[src*='www.kickstarter.com']",
+        "object",
+        "embed"
+      ];
+
+      if (settings.customSelector) {
+        selectors.push(settings.customSelector);
+      }
+
+      var $allVideos = $(this).find(selectors.join(','));
+
+      $allVideos.each(function(){
+        var $this = $(this);
+        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+        var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
+            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
+            aspectRatio = height / width;
+        if(!$this.attr('id')){
+          var videoID = 'fitvid' + Math.floor(Math.random()*999999);
+          $this.attr('id', videoID);
+        }
+        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
+        $this.removeAttr('height').removeAttr('width');
+      });
+    });
+  };
+})( jQuery );
--- a/assets/js/vendor/jquery.magnific-popup.js
+++ b/assets/js/vendor/jquery.magnific-popup.js
--- a/assets/js/vendor/modernizr-2.6.2.custom.min.js
+++ b/assets/js/vendor/modernizr-2.6.2.custom.min.js
--- a/assets/less/1382.less
+++ b/assets/less/1382.less
@ -0,0 +1,48 @@
+// ROOT =======================================================
+// TYPOGRAPHY =================================================
+// TEXTURE ====================================================
+// ELEMENTS ===================================================
+// LAYOUT =====================================================
+.site-name {
+	.grid(12,1.5);
+	.prefix(12,2);
+}
+.top-navigation {
+	.grid(12,8);
+}
+.image-wrap {
+	img {
+		.grid(12,8);
+		.prefix(12,2);
+		.suffix(12,2);
+		margin-top: 1em;
+		margin-bottom: 2em;
+	}
+	&:after {
+		left: 33.333333333%;
+	}
+	.headline-wrap {
+		.prefix(12,4);
+	}
+}
+#main article {
+	.grid(12,4.5);
+}
+#index {
+	.grid(12,4.5);
+}
+.related-articles {
+	.grid(12,4.5);
+	.prefix(12,4);
+	.suffix(12,3.5);
+}
+.footer-wrap footer {
+	.grid(12,4.5);
+	.prefix(12,4);
+	.suffix(12,3.5);
+}
+.article-author-top {
+	.grid(12,1.5);
+	.prefix(12,2);
+}
+// VENDOR-SPECIFIC ============================================
--- a/assets/less/2x.less
+++ b/assets/less/2x.less
@ -0,0 +1,6 @@
+// ROOT =======================================================
+// TYPOGRAPHY =================================================
+// TEXTURE ====================================================
+// ELEMENTS ===================================================
+// LAYOUT =====================================================
+// VENDOR-SPECIFIC ============================================
--- a/assets/less/480.less
+++ b/assets/less/480.less
@ -0,0 +1,11 @@
+// ROOT =======================================================
+// TYPOGRAPHY =================================================
+// TEXTURE ====================================================
+// ELEMENTS ===================================================
+// LAYOUT =====================================================
+.image-grid {
+	li {
+		width: 33.333333%;
+	}
+}
+// VENDOR-SPECIFIC ============================================
--- a/assets/less/600.less
+++ b/assets/less/600.less
@ -0,0 +1,69 @@
+// ROOT =======================================================
+html {
+	font-size: 95%;
+}
+// TYPOGRAPHY =================================================
+// TEXTURE ====================================================
+// ELEMENTS ===================================================
+// LAYOUT =====================================================
+.site-name {
+	.grid(12,2);
+	.prefix(12,0.5);
+	.suffix(12,0.5);
+}
+.top-navigation {
+	.grid(12,9);
+	.prefix(12,0);
+	.suffix(12,0);
+}
+.image-wrap .headline-wrap {
+	.prefix(12,3);
+}
+.image-wrap:after {
+	left: 25%;
+}
+#main article {
+	.grid(12,6);
+	.prefix(12,0);
+	.suffix(12,0);
+}
+#index {
+	.grid(12,6);
+	.prefix(12,0);
+	.suffix(12,0);
+}
+.footer-wrap footer {
+	.grid(12,6);
+	.prefix(12,3);
+	.suffix(12,3);
+}
+.article-author-top {
+	display: block;
+	.grid(12,2);
+	.prefix(12,0.5);
+	.suffix(12,0.5);
+}
+.article-author-bottom {
+	display: none;
+}
+.toc {
+	display: block;
+	.grid(12,2);
+	.prefix(12,0.5);
+	.suffix(12,0.5);
+	position: fixed;
+	top: 25px;
+	right: 0;
+	.box-shadow(0 0 5px rgba(0,0,0,.50));
+}
+.image-grid {
+	li {
+		width: 25%;
+	}
+}
+.related-articles {
+	.grid(12,6);
+	.prefix(12,3);
+	.suffix(12,3);
+}
+// VENDOR-SPECIFIC ============================================
--- a/assets/less/768.less
+++ b/assets/less/768.less
@ -0,0 +1,15 @@
+// ROOT =======================================================
+html {
+	font-size: 100%;
+}
+// TYPOGRAPHY =================================================
+// TEXTURE ====================================================
+// ELEMENTS ===================================================
+// LAYOUT =====================================================
+/* Image Grid ============================================== */
+.image-grid {
+	li {
+		width: 20%;
+	}
+}
+// VENDOR-SPECIFIC ============================================
--- a/assets/less/992.less
+++ b/assets/less/992.less
@ -0,0 +1,15 @@
+// ROOT =======================================================
+html {
+	font-size: 112.5%;
+}
+// TYPOGRAPHY =================================================
+// TEXTURE ====================================================
+// ELEMENTS ===================================================
+// LAYOUT =====================================================
+/* Image Grid ============================================== */
+.image-grid {
+	li {
+		width: 16.666666666%;
+	}
+}
+// VENDOR-SPECIFIC ============================================
--- a/assets/less/coderay.less
+++ b/assets/less/coderay.less
@ -0,0 +1,133 @@
+.CodeRay {
+  background-color: #efefef;
+  font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+  font-size: 80%;
+  color: #333332;
+  margin-bottom: 1.5em;
+}
+
+.CodeRay pre {
+  margin: 0px;
+  padding: 1em;
+}
+
+div.CodeRay { }
+span.CodeRay { white-space: pre; border: 0px; padding: 2px }
+
+table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
+table.CodeRay td {
+  padding: 1em 0.5em;
+  vertical-align: top;
+}
+
+.CodeRay .line-numbers, .CodeRay .no {
+  background-color: #ECECEC;
+  color: #AAA;
+  text-align: right;
+}
+
+.CodeRay .line-numbers a {
+  color: #AAA;
+}
+
+.CodeRay .line-numbers tt { font-weight: bold }
+.CodeRay .line-numbers .highlighted { color: red }
+.CodeRay .line { display: block; float: left; width: 100%; }
+.CodeRay span.line-numbers { padding: 0 24px 0 4px }
+.CodeRay .code { width: 100% }
+
+ol.CodeRay { font-size: 10pt }
+ol.CodeRay li { white-space: pre }
+
+.CodeRay .code pre { overflow: auto }
+.CodeRay .debug { color:white ! important; background:blue ! important; }
+
+.CodeRay .annotation { color:#007 }
+.CodeRay .attribute-name { color:#f08 }
+.CodeRay .attribute-value { color:#700 }
+.CodeRay .binary { color:#509; font-weight:bold }
+.CodeRay .comment  { color:#998; font-style: italic;}
+.CodeRay .char { color:#04D }
+.CodeRay .char .content { color:#04D }
+.CodeRay .char .delimiter { color:#039 }
+.CodeRay .class { color:#458; font-weight:bold }
+.CodeRay .complex { color:#A08; font-weight:bold }
+.CodeRay .constant { color:teal; }
+.CodeRay .color { color:#0A0 }
+.CodeRay .class-variable { color:#369 }
+.CodeRay .decorator { color:#B0B; }
+.CodeRay .definition { color:#099; font-weight:bold }
+.CodeRay .directive { color:#088; font-weight:bold }
+.CodeRay .delimiter { color:black }
+.CodeRay .doc { color:#970 }
+.CodeRay .doctype { color:#34b }
+.CodeRay .doc-string { color:#D42; font-weight:bold }
+.CodeRay .escape  { color:#666; font-weight:bold }
+.CodeRay .entity { color:#800; font-weight:bold }
+.CodeRay .error { color:#F00; background-color:#FAA }
+.CodeRay .exception { color:#C00; font-weight:bold }
+.CodeRay .filename { color:#099; }
+.CodeRay .function { color:#900; font-weight:bold }
+.CodeRay .global-variable { color:teal; font-weight:bold }
+.CodeRay .hex { color:#058; font-weight:bold }
+.CodeRay .integer  { color:#099; }
+.CodeRay .include { color:#B44; font-weight:bold }
+.CodeRay .inline { color: black }
+.CodeRay .inline .inline { background: #ccc }
+.CodeRay .inline .inline .inline { background: #bbb }
+.CodeRay .inline .inline-delimiter { color: #D14; }
+.CodeRay .inline-delimiter { color: #D14; }
+.CodeRay .important { color:#f00; }
+.CodeRay .interpreted { color:#B2B; font-weight:bold }
+.CodeRay .instance-variable { color:teal }
+.CodeRay .label { color:#970; font-weight:bold }
+.CodeRay .local-variable { color:#963 }
+.CodeRay .octal { color:#40E; font-weight:bold }
+.CodeRay .operator { }
+.CodeRay .predefined-constant {  font-weight:bold }
+.CodeRay .predefined { color:#369; font-weight:bold }
+.CodeRay .preprocessor { color:#579; }
+.CodeRay .pseudo-class { color:#00C; font-weight:bold }
+.CodeRay .predefined-type { color:#074; font-weight:bold }
+.CodeRay .reserved, .keyword  { color:#000; font-weight:bold }
+
+.CodeRay .key { color: #808; }
+.CodeRay .key .delimiter { color: #606; }
+.CodeRay .key .char { color: #80f; }
+.CodeRay .value { color: #088; }
+
+.CodeRay .regexp { background-color:#fff0ff }
+.CodeRay .regexp .content { color:#808 }
+.CodeRay .regexp .delimiter { color:#404 }
+.CodeRay .regexp .modifier { color:#C2C }
+.CodeRay .regexp .function  { color:#404; font-weight: bold }
+
+.CodeRay .string { color: #D20; }
+.CodeRay .string .string { }
+.CodeRay .string .string .string { background-color:#ffd0d0 }
+.CodeRay .string .content { color: #D14; }
+.CodeRay .string .char { color: #D14; }
+.CodeRay .string .delimiter { color: #D14; }
+
+.CodeRay .shell { color:#D14 }
+.CodeRay .shell .content { }
+.CodeRay .shell .delimiter { color:#D14 }
+
+.CodeRay .symbol { color:#990073 }
+.CodeRay .symbol .content { color:#A60 }
+.CodeRay .symbol .delimiter { color:#630 }
+
+.CodeRay .tag { color:#070 }
+.CodeRay .tag-special { color:#D70; font-weight:bold }
+.CodeRay .type { color:#339; font-weight:bold }
+.CodeRay .variable  { color:#036 }
+
+.CodeRay .insert { background: #afa; }
+.CodeRay .delete { background: #faa; }
+.CodeRay .change { color: #aaf; background: #007; }
+.CodeRay .head { color: #f8f; background: #505 }
+
+.CodeRay .insert .insert { color: #080; font-weight:bold }
+.CodeRay .delete .delete { color: #800; font-weight:bold }
+.CodeRay .change .change { color: #66f; }
+.CodeRay .head .head { color: #f4f; }
--- a/assets/less/elements.less
+++ b/assets/less/elements.less
@ -0,0 +1,79 @@
+hr { 
+    display: block; 
+    margin: 1em 0; 
+    padding: 0;
+    height: 1px; 
+    border: 0; 
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #fff; 
+}
+/* Figures and images ==================================== */
+article img {
+  max-width: 100%;
+  height: auto;
+  border-width: 0; 
+  vertical-align: middle; 
+  -ms-interpolation-mode: bicubic; 
+}
+svg:not(:root) {
+    overflow: hidden; 
+}
+.half {
+  .container();
+  .clearfix();
+  img {
+    .grid(12,6);
+  }
+  figcaption {
+    .grid(12,12);
+  }
+}
+.third {
+  .container();
+  .clearfix();
+  img {
+    .grid(12,4);
+  }
+  figcaption {
+    .grid(12,12);
+  }
+}
+/* Buttons =============================================== */
+.btn {
+  display: inline-block;
+  *display: inline;
+  /* IE7 inline-block hack */
+  *zoom: 1;
+  padding: 12px;
+  margin-bottom: 2em;
+  line-height: 1;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  border: 4px double @textcolor;
+  cursor: pointer;
+  *margin-left: .3em;
+  .transition(.4s linear); 
+  &:visited {
+    border: 4px double @linkcolorvisited;
+  }
+  &:hover {
+    border: 4px double @linkcolorhover;
+  }
+}
+.btn:first-child {
+  *margin-left: 0; 
+}
+.btn-inverse {
+  border: 4px double @white;
+  color: @white;
+  background-color: @black;
+  &:visited {
+    color: @white;
+    border-color: @white;
+  }
+  &:hover {
+    color: @white;
+    border-color: @white;
+  }
+}
--- a/assets/less/forms.less
+++ b/assets/less/forms.less
@ -0,0 +1,249 @@
+form { 
+	margin: 0 0 5px 0;
+	fieldset { 
+		margin-bottom: 5px; 
+		padding: 0; 
+		border-width: 0; 
+	}
+	legend { 
+		display: block;
+		width: 100%;
+		margin-bottom: 5px * 2;
+		*margin-left: -7px; 
+		padding: 0;
+		color: @textcolor;
+		border: 0;
+		border-bottom: 1px solid lighten(@black, 80);
+		white-space: normal; 
+	}
+	p {
+		margin-bottom: 5px / 2; 
+	}
+	ul {
+		list-style-type: none; 
+		margin: 0 0 5px 0;
+		padding: 0; 
+	}
+	br {
+		display: none; 
+	}
+}
+label,
+input,
+button,
+select,
+textarea {
+	vertical-align: baseline; 
+	*vertical-align: middle; 
+}
+input,
+button,
+select,
+textarea {
+	font-family: @basefont; 
+	.box-sizing(border-box); 
+}
+label {
+	display: block;
+	margin-bottom: 10px / 8;
+	font-weight: bold;
+	color: @textcolor;
+	cursor: pointer; 
+	input,
+	textarea,
+	select {
+		display: block; 
+	}
+}
+input,
+textarea,
+select {
+	display: inline-block;
+	width: 100%;
+	padding: 4px;
+	margin-bottom: 5px / 4;
+	background-color: @white;
+	border: 1px solid lighten(@black, 80);
+	color: @textcolor; 
+	&:hover {
+		border-color: lighten(@accentcolor, 50); 
+	}
+}
+.input-mini { 
+	width: 60px; 
+}
+.input-small { 
+	width: 90px; 
+}
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
+	width: auto;
+	height: auto;
+	padding: 0;
+	margin: 3px 0;
+	*margin-top: 0;
+	line-height: normal;
+	cursor: pointer;
+	.rounded(0);
+	border: 0 \9; 
+}
+input[type="checkbox"], 
+input[type="radio"] {  
+	.box-sizing(border-box);
+	padding: 0; 
+	*width: 13px; 
+	*height: 13px; 
+}
+input[type="image"] {
+	border: 0; 
+	.box-shadow(none); 
+}
+input[type="file"] {
+	width: auto;
+	padding: initial;
+	line-height: initial;
+	border: initial;
+	background-color: transparent;
+	background-color: initial;
+	.box-shadow(none); 
+}
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	width : auto;
+	height : auto;
+	cursor : pointer;
+	*overflow : visible; 
+}
+select,
+input[type="file"] {
+	*margin-top : 4px;  
+}
+select {
+	width : auto;
+	background-color : @white;
+}
+select[multiple],
+select[size] {
+	height : auto; 
+}
+textarea {
+	.resize(vertical);
+	height : auto;
+	overflow : auto; 
+	vertical-align : top; 
+}
+input[type="hidden"] {
+	display : none; 
+}
+.radio,
+.checkbox {
+	padding-left : 18px; 
+	font-weight : normal; 
+}
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+	float : left;
+	margin-left : -18px; 
+}
+.radio.inline,
+.checkbox.inline {
+	display : inline-block;
+	padding-top : 5px;
+	margin-bottom : 0;
+	vertical-align : middle; 
+}
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+	margin-left : 10px; 
+}
+/* disabled ==================================== */
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+	.opacity(.5);
+	cursor : not-allowed; 
+}
+/* focus and active ============================ */
+input:focus,
+textarea:focus {
+	border-color : @accentcolor;
+	outline : 0;
+	outline : thin dotted \9; 
+}
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+	.box-shadow(none); 
+}
+/* help text ==================================== */
+.help-block,
+.help-inline {
+	color : lighten(@black, 50); 
+}
+.help-block {
+	display : block; 
+	margin-bottom : 1em; 
+	line-height : 1em;
+}
+.help-inline {
+	display : inline-block;
+	vertical-align : middle;
+	padding-left : 5px; 
+}
+/* .form-inline ================================= */
+.form-inline input,
+.form-inline textarea,
+.form-inline select {
+	display : inline-block;
+	margin-bottom : 0; 
+}
+.form-inline label {
+	display : inline-block; 
+}
+.form-inline .radio,
+.form-inline .checkbox,
+.form-inline .radio {
+	padding-left : 0;
+	margin-bottom : 0;
+	vertical-align : middle; 
+}
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+	float : left;
+	margin-left : 0;
+	margin-right : 3px; }
+/* .form-search ================================= */
+.form-search input,
+.form-search textarea,
+.form-search select {
+	display : inline-block;
+	margin-bottom : 0; 
+}
+.form-search .search-query {
+	padding-left : 14px;
+	padding-right : 14px;
+	margin-bottom : 0; 
+	.rounded(14px); 
+}
+.form-search label {
+	display : inline-block;
+}
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio {
+	padding-left : 0;
+	margin-bottom : 0;
+	vertical-align : middle;
+}
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"] {
+	float : left;
+	margin-left : 0;
+	margin-right : 3px;
+}
--- a/assets/less/grid.less
+++ b/assets/less/grid.less
@ -0,0 +1,47 @@
+// Defining number of columns in the grid.
+// Common Values would be 12, 16 or 24
+@width: 100%;
+@def_grid: 12;
+@margin: 0;
+
+.container(){
+  margin:0 auto;
+  width:@width;
+}
+                                      
+// Works out the width of elements based
+// on total number of columns and width
+// number of columns being displayed.
+// Removes 20px for margins
+.grid(@grid:@def_grid,@cols:'',@float:left,@display:inline){
+  display:@display;
+  float:@float;
+  width:(100%/@grid * @cols) - (@margin * 2);
+}  
+
+// Allows for padding before element
+.prefix(@grid:@def_grid,@cols:''){
+  margin-left:(100%/@grid * @cols);
+}
+// Allows for padding after element
+.suffix(@grid:@def_grid,@cols:''){  
+  margin-right:(100%/@grid * @cols);    
+}
+// Removes left margin
+.first(){
+  margin-left:0;
+}
+// Removes right margin
+.last(){
+  margin-right:0;
+}
+
+.push(@grid:@def_grid,@move:'') {
+  position:relative;
+  left:(100%/@grid * @move);
+} 
+
+.pull(@grid:@def_grid,@move:''){
+  position:relative;
+  left:(100%/@grid * @move) * -1;
+}
--- a/assets/less/ie.less
+++ b/assets/less/ie.less
@ -0,0 +1,39 @@
+// ===========================================================
+// Minimal Mistakes
+// By: Michael Rose
+// ===========================================================/
+
+// ROOT =======================================================
+/* CSS Normalize =========================================== */
+@import "normalize.less";
+/* Variables and mixins ==================================== */
+@import "variables.less";
+/* Site wide styles (html, body, global classes) =========== */
+@import "site.less";
+// TYPOGRAPHY =================================================
+/* Typeplate.com typographic starter pack ================== */
+@import "typeplate.less";
+@import "typography.less";
+// MIXINS =====================================================
+@import "mixins.less";
+@import "grid.less";
+// ELEMENTS ===================================================
+/* Figures, images, social media, other elements =========== */
+@import "elements.less";
+/* Standard form controls ================================== */
+@import "forms.less";
+// LAYOUT =====================================================
+/* Page level layout styles */
+@import "page.less";
+// MODERNIZR ==================================================
+// MEDIA QUERIES ==============================================
+/* 480px wide ============================================== */
+@import "480.less";
+/* 600px wide ============================================== */
+@import "600.less";
+/* 768px wide ============================================== */
+@import "768.less";
+/* 992px wide ============================================== */
+@import "992.less";
+/* 1382px wide ============================================= */
+@import "1382.less";
--- a/assets/less/magnific-popup.less
+++ b/assets/less/magnific-popup.less
@ -0,0 +1,437 @@
+/* Magnific Popup CSS */
+// Modified by Michael Rose
+
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 502;
+  overflow: hidden;
+  position: fixed;
+  background: #0b0b0b;
+  opacity: 0.8;
+  filter: alpha(opacity=80); }
+
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 503;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden; }
+
+.mfp-container {
+  height: 100%;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle; }
+
+.mfp-align-top .mfp-container:before {
+  display: none; }
+
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: 505; }
+
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto; }
+
+.mfp-ajax-cur {
+  cursor: progress; }
+
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out; }
+
+.mfp-zoom, 
+.image-popup {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in; }
+
+.mfp-auto-cursor .mfp-content {
+  cursor: auto; }
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none; }
+
+.mfp-loading.mfp-figure {
+  display: none; }
+
+.mfp-hide {
+  display: none !important; }
+
+.mfp-preloader {
+  color: #cccccc;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: 504; }
+
+.mfp-preloader a {
+  color: #cccccc; }
+
+.mfp-preloader a:hover {
+  color: white; }
+
+.mfp-s-ready .mfp-preloader {
+  display: none; }
+
+.mfp-s-error .mfp-content {
+  display: none; }
+
+button.mfp-close,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  padding: 0;
+  z-index: 506; }
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: 0.65;
+  padding: 0 0 18px 10px;
+  color: white;
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace; }
+  .mfp-close:hover, .mfp-close:focus {
+    opacity: 1; }
+  .mfp-close:active {
+    top: 1px; }
+
+.mfp-close-btn-in .mfp-close {
+  color: #333333; }
+
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+  color: white;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%; }
+
+.mfp-counter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #cccccc;
+  font-size: 12px;
+  line-height: 18px; }
+
+.mfp-arrow {
+  .hide-text();
+  position: absolute;
+  top: 0;
+  opacity: 0.65;
+  margin: 0;
+  top: 50%;
+  margin-top: -55px;
+  padding: 0;
+  width: 90px;
+  height: 110px;
+  background-color: @black;
+  .transition(opacity 0.2s ease-in-out);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+
+.mfp-arrow:active {
+  margin-top: -54px; }
+
+.mfp-arrow:hover,
+.mfp-arrow:focus {
+  opacity: 1; }
+
+.mfp-arrow:before, .mfp-arrow:after,
+.mfp-arrow .mfp-b,
+.mfp-arrow .mfp-a {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin-top: 35px;
+  margin-left: 35px;
+  border: solid transparent; }
+.mfp-arrow:after,
+.mfp-arrow .mfp-a {
+  opacity: 0.8;
+  border-top-width: 12px;
+  border-bottom-width: 12px;
+  top: 8px; }
+.mfp-arrow:before,
+.mfp-arrow .mfp-b {
+  border-top-width: 20px;
+  border-bottom-width: 20px; }
+
+.mfp-arrow-left {
+  left: 0; 
+  .border-radius(5px, 5px, 0, 0); }
+  .mfp-arrow-left:after,
+  .mfp-arrow-left .mfp-a {
+    border-right: 12px solid white;
+    left: 5px; }
+  .mfp-arrow-left:before,
+  .mfp-arrow-left .mfp-b {
+    border-right: 20px solid white; }
+
+.mfp-arrow-right {
+  right: 0; 
+  .border-radius(0, 0, 5px, 5px); }
+  .mfp-arrow-right:after,
+  .mfp-arrow-right .mfp-a {
+    border-left: 12px solid white;
+    left: 3px; }
+  .mfp-arrow-right:before,
+  .mfp-arrow-right .mfp-b {
+    border-left: 20px solid white; }
+
+.mfp-iframe-holder {
+  padding-top: 40px;
+  padding-bottom: 40px; }
+
+.mfp-iframe-holder .mfp-content {
+  line-height: 0;
+  width: 100%;
+  max-width: 900px; }
+
+.mfp-iframe-scaler {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%; }
+
+.mfp-iframe-scaler iframe {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: black; }
+
+.mfp-iframe-holder .mfp-close {
+  top: -43px; }
+
+/* Main image in popup */
+img.mfp-img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  line-height: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 40px 0 40px;
+  margin: 0 auto; }
+
+/* The shadow behind the image */
+.mfp-figure:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 40px;
+  bottom: 40px;
+  display: block;
+  right: 0;
+  width: auto;
+  height: auto;
+  z-index: -1;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
+
+.mfp-figure {
+  line-height: 0; }
+
+.mfp-bottom-bar {
+  margin-top: -36px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  cursor: auto; }
+
+.mfp-title {
+  text-align: left;
+  line-height: 18px;
+  color: #f3f3f3; }
+
+.mfp-figure small {
+  color: #bdbdbd;
+  display: block;
+  font-size: 12px;
+  line-height: 14px; }
+
+.mfp-image-holder .mfp-content {
+  max-width: 100%; }
+
+.mfp-gallery .mfp-image-holder .mfp-figure {
+  cursor: pointer; }  
+
+@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+  /**
+   * Remove all paddings around the image on small screen
+   */
+  .mfp-img-mobile .mfp-image-holder {
+    padding-left: 0;
+    padding-right: 0; }
+
+  .mfp-img-mobile img.mfp-img {
+    padding: 0; }
+
+  /* The shadow behind the image */
+  .mfp-img-mobile .mfp-figure:after {
+    top: 0;
+    bottom: 0; }
+
+  .mfp-img-mobile .mfp-bottom-bar {
+    background: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    margin: 0;
+    top: auto;
+    padding: 3px 5px;
+    position: fixed;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+
+  .mfp-img-mobile .mfp-bottom-bar:empty {
+    padding: 0; }
+
+  .mfp-img-mobile .mfp-counter {
+    right: 5px;
+    top: 3px; }
+
+  .mfp-img-mobile .mfp-close {
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    text-align: center;
+    padding: 0; }
+
+  .mfp-img-mobile .mfp-figure small {
+    display: inline;
+    margin-left: 5px; } }
+@media all and (max-width: 800px) {
+  .mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75); }
+
+  .mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0; }
+
+  .mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%; }
+
+  .mfp-container {
+    padding-left: 6px;
+    padding-right: 6px; } }
+.mfp-ie7 .mfp-img {
+  padding: 0; }
+.mfp-ie7 .mfp-bottom-bar {
+  width: 600px;
+  left: 50%;
+  margin-left: -300px;
+  margin-top: 5px;
+  padding-bottom: 5px; }
+.mfp-ie7 .mfp-container {
+  padding: 0; }
+.mfp-ie7 .mfp-content {
+  padding-top: 44px; }
+.mfp-ie7 .mfp-close {
+  top: 0;
+  right: 0;
+  padding-top: 0; }
+
+/**
+ * Fade-zoom animation for first dialog
+ */
+
+/* start state */
+.mfp-fade .zoom-anim-dialog {
+  opacity: 0;
+  .transition(all 0.2s ease-in-out); 
+  .scale(0.8);
+}
+
+/* animate in */
+.mfp-fade.mfp-ready .zoom-anim-dialog {
+  opacity: 1;
+  .scale(1);
+}
+
+/* animate out */
+.mfp-fade.mfp-removing .zoom-anim-dialog {
+ .scale(0.8); 
+  opacity: 0;
+}
+
+/* Dark overlay, start state */
+.mfp-fade.mfp-bg {
+  opacity: 0;
+  .transition(opacity 0.3s ease-out); 
+}
+/* animate in */
+.mfp-fade.mfp-ready.mfp-bg {
+  opacity: 0.8;
+}
+/* animate out */
+.mfp-fade.mfp-removing.mfp-bg {
+  opacity: 0;
+}
--- a/assets/less/main.less
+++ b/assets/less/main.less
@ -0,0 +1,61 @@
+// ===========================================================
+// Minimal Mistakes
+// By: Michael Rose
+// ===========================================================/
+
+// ROOT =======================================================
+/* CSS Normalize =========================================== */
+@import "normalize.less";
+/* Variables and mixins ==================================== */
+@import "variables.less";
+/* Site wide styles (html, body, global classes) =========== */
+@import "site.less";
+// TYPOGRAPHY =================================================
+/* Typeplate.com typographic starter pack ================== */
+@import "typeplate.less";
+@import "typography.less";
+/* Codeway Syntax highlighting ============================= */
+@import "coderay.less";
+// MIXINS =====================================================
+@import "mixins.less";
+@import "grid.less";
+// ELEMENTS ===================================================
+/* Figures, images, social media, other elements =========== */
+@import "elements.less";
+/* Standard form controls ================================== */
+@import "forms.less";
+// LAYOUT =====================================================
+/* Page level layout styles ================================ */
+@import "page.less";
+// PLUGINS  ===================================================
+/* jQuery Magnific-Popup =================================== */
+@import "magnific-popup.less";
+// MEDIA QUERIES ==============================================
+/* Print =================================================== */
+@media print {
+	@import "print.less";
+}
+/* 480px wide ============================================== */
+@media only screen and (min-width: 30em) {
+	@import "480.less";
+}
+/* 600px wide ============================================== */
+@media only screen and (min-width: 37.5em) {
+	@import "600.less";
+}
+/* 768px wide ============================================== */
+@media only screen and (min-width: 48em) {
+	@import "768.less";
+}
+/* 992px wide ============================================== */
+@media only screen and (min-width: 62em) {
+	@import "992.less";
+}
+/* 1382px wide ============================================= */
+@media only screen and (min-width: 86.375em) {
+	@import "1382.less";
+}
+/* 2x for retina displays ================================== */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
+	@import "2x.less"; 
+}
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@ -0,0 +1,299 @@
+// ===========================================================
+
+// 320 and Up by Andy Clarke
+// Version: 3.0
+// URL: http://stuffandnonsense.co.uk/projects/320andup/
+// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
+// Modified by: Michael Rose
+
+// ===========================================================/
+
+// ROOT =====================================================
+// TYPOGRAPHY ===============================================
+.font-size(@font-size: 16){
+@rem: (@font-size / 10);
+font-size : @font-size * 1px;
+font-size : ~"@{rem}rem"; }
+
+.lineheight(@font-size: 16){
+@rem: (@font-size / 10);
+line-height: @font-size * 1px;
+line-height: ~"@{rem}rem"; }
+
+.text-overflow() {
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap; }
+
+// COLOR ====================================================
+// TEXTURE ==================================================
+/* Gradients ============================================= */
+.horizontal(@startColor : @white, @endColor : @lightergrey) {
+background-color: @endColor;
+background-image  : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+background-image  : -webkit-linear-gradient(left, @startColor, @endColor); 					 // Safari 5.1+, Chrome 10+
+background-image  : -moz-linear-gradient(left, @startColor, @endColor); 					 // FF 3.6+
+background-image  : -ms-linear-gradient(left, @startColor, @endColor); 						 // IE10
+background-image  : -o-linear-gradient(left, @startColor, @endColor); 						 // Opera 11.10
+background-image  : linear-gradient(left, @startColor, @endColor); 							 // W3C
+background-repeat : repeat-x; }
+
+.vertical(@startColor : @white, @endColor:  @lightergrey) {
+background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+background-image  : -webkit-linear-gradient(top, @startColor, @endColor); 					 // Safari 5.1+, Chrome 10+
+background-color  : @endColor;
+background-image  : -moz-linear-gradient(top, @startColor, @endColor);   					 // FF 3.6+
+background-image  : -ms-linear-gradient(top, @startColor, @endColor); 						 // IE10
+background-image  : -o-linear-gradient(top, @startColor, @endColor); 						 // Opera 11.10
+background-image  : linear-gradient(top, @startColor, @endColor); 							 // W3C
+background-repeat : repeat-x; }
+
+.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
+background-color  : @endColor;
+background-image  : -moz-linear-gradient(@deg, @startColor, @endColor); 					// FF 3.6+
+background-image  : -ms-linear-gradient(@deg, @startColor, @endColor); 						// IE10
+background-image  : -webkit-linear-gradient(@deg, @startColor, @endColor); 					// Safari 5.1+, Chrome 10+
+background-image  : -o-linear-gradient(@deg, @startColor, @endColor); 						// Opera 11.10
+background-image  : linear-gradient(@deg, @startColor, @endColor); 							// W3C
+background-repeat : repeat-x; }
+
+/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */
+.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
+border-top : solid 1px @top-color;
+border-left : solid 1px @left-color;
+border-right : solid 1px @right-color;
+border-bottom : solid 1px @bottom-color; }
+
+/* .rounded(VALUE); ====================================== */
+.rounded(@radius:4px) {
+-webkit-border-radius : @radius;
+-moz-border-radius : @radius;
+border-radius : @radius; }
+
+/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */
+.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
+-webkit-border-top-right-radius : @topright;
+-webkit-border-bottom-right-radius : @bottomright;
+-webkit-border-bottom-left-radius : @bottomleft;
+-webkit-border-top-left-radius : @topleft;
+-moz-border-radius-topright : @topright;
+-moz-border-radius-bottomright : @bottomright;
+-moz-border-radius-bottomleft : @bottomleft;
+-moz-border-radius-topleft : @topleft;
+border-top-right-radius : @topright;
+border-bottom-right-radius : @bottomright;
+border-bottom-left-radius : @bottomleft;
+border-top-left-radius : @topleft;
+-webkit-background-clip : padding-box;
+-moz-background-clip : padding;  
+background-clip : padding-box; }
+
+/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+-webkit-box-shadow : @shadow;
+-moz-box-shadow : @shadow;
+box-shadow : @shadow; }
+
+/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */
+.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
+-webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+-moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }
+
+/* .text-shadow(); ======================================== */
+.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
+text-shadow : @shadow; }
+
+/* .opacity(VALUE); ======================================= */
+.opacity(@opacity : .5) {
+-webkit-opacity : @opacity;
+-moz-opacity : @opacity;
+opacity : @opacity; }
+
+/* .rotate(VALUEdeg); ===================================== */
+.rotate(@deg) {
+-webkit-transform : rotate(@deg);
+-moz-transform : rotate(@deg);
+-ms-transform : rotate(@deg);
+-o-transform : rotate(@deg);
+transform : rotate(@deg); }
+
+/* .scale(VALUE); ========================================= */
+.scale(@ratio) {
+-webkit-transform : scale(@ratio);
+-moz-transform : scale(@ratio);
+-ms-transform : scale(@ratio);
+-o-transform : scale(@ratio);
+transform : scale(@ratio); }
+
+/* .skew(VALUE, VALUE); =================================== */
+.skew(@x: 0, @y: 0) {
+-webkit-transform : skew(@x, @y);
+-moz-transform : skew(@x, @y);
+-ms-transform : skew(@x, @y);
+-o-transform : skew(@x, @y);
+transform : skew(@x, @y); }
+
+/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
+.transition(@transition) {
+-webkit-transition : @transition;
+-moz-transition : @transition;
+-ms-transition : @transition;
+-o-transition : @transition;
+transition : @transition; }
+
+/* .translate(VALUE, VALUE) =============================== */
+.translate(@x: 0, @y: 0) {
+-webkit-transform : translate(@x, @y);
+-moz-transform : translate(@x, @y);
+-ms-transform : translate(@x, @y);
+-o-transform : translate(@x, @y);
+transform : translate(@x, @y); }
+
+.translate3d(@x: 0, @y: 0, @z: 0) {
+-webkit-transform : translate(@x, @y, @z);
+-moz-transform : translate(@x, @y, @z);
+-ms-transform : translate(@x, @y, @z);
+-o-transform : translate(@x, @y, @z);
+transform : translate(@x, @y, @z); }
+
+// ELEMENTS ==================================================
+/* .background-alpha(VALUE VALUE); ======================== */
+.background-alpha(@color: @white, @alpha: 1) {
+background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }
+
+/* .background-size(VALUE VALUE); ========================= */
+.background-size(@size){
+-webkit-background-size : @size;
+-moz-background-size : @size;
+-o-background-size : @size;
+background-size : @size; }
+
+/* .background-clip(VALUE); (border-box, padding-box, content-box) */
+.background-clip(@clip) {
+-webkit-background-clip : @clip;
+-moz-background-clip : @clip;
+background-clip : @clip; }
+
+/* .box-sizing(VALUE); (border-box, padding-box, content-box) */
+.box-sizing(@boxsize: border-box) {
+-webkit-box-sizing : @boxsize;
+-moz-box-sizing : @boxsize;
+-ms-box-sizing : @boxsize;
+box-sizing : @boxsize; }
+
+/* Contain floats ========================================= */
+.clearfix() {
+	*zoom:1;
+	&:before,
+	&:after {
+	    content:"";
+	    display:table;
+	}
+	&:after {
+	    clear:both;
+	}
+}
+
+/* For image replacement ================================== */
+.hide-text() {
+text-indent : 100%;
+white-space : nowrap;
+overflow : hidden; }
+
+/* Hide from visual and speaking browsers ================= */
+.hidden() {
+display : none !important; 
+visibility : hidden; }
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+/* Hide but maintain layout =============================== */
+.invisible() { 
+visibility : hidden; }
+
+/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
+.resize(@direction: both) {
+resize : @direction;
+overflow : auto; }
+
+/* .userselect(VALUE) (all, element, none, text) ========== */
+.user-select(@select) {
+-webkit-user-select : @select;
+-moz-user-select : @select;
+-o-user-select : @select;
+user-select : @select; }
+
+/* Hidden but available to speaking browsers ============== */
+.visuallyhidden() { 
+overflow : hidden; 
+position : absolute;
+clip : rect(0 0 0 0); 
+height : 1px; 
+width : 1px;
+margin : -1px; 
+padding : 0; 
+border : 0; }
+
+/* Make visuallyhidden focusable with a keyboard ========== */
+.visuallyhidden.focusable:active, 
+.visuallyhidden.focusable:focus { 
+position : static;
+clip : auto; 
+height : auto; 
+width : auto;
+margin : 0; 
+overflow: visible; }
+
+/* Responsive visibility utilities =================================== */
+/* For desktops =========================================== */
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.visible-desktop   { } // Don't set initially
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+/* Mobile phones only  =====================================*/
+@media (max-width: 767px) {
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+}
+/* Tablets & small desktops only ========================== */
+@media (min-width: 768px) and (max-width: 979px) {
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+}
+
+// LAYOUT ==================================================== 
+/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #eee, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
+-webkit-column-width : @colwidth;
+-webkit-column-count : @colcount;
+-webkit-column-gap : @colgap;
+-webkit-column-rule-color : @columnRuleColor;
+-webkit-column-rule-style : @columnRuleStyle;
+-webkit-column-rule-width : @columnRuleWidth;
+-moz-column-width : @colwidth;
+-moz-column-count : @colcount;
+-moz-column-gap : @colgap;
+-moz-column-rule-color : @columnRuleColor;
+-moz-column-rule-style : @columnRuleStyle;
+-moz-column-rule-width : @columnRuleWidth;
+column-width : @colwidth;
+column-count : @colcount;
+column-gap : @colgap;
+column-rule-color : @columnRuleColor;
+column-rule-style : @columnRuleStyle;
+column-rule-width : @columnRuleWidth; }
--- a/assets/less/normalize.less
+++ b/assets/less/normalize.less
@ -0,0 +1,397 @@
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * 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.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * 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.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * 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 Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+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;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 1.5em;
+}
--- a/assets/less/page.less
+++ b/assets/less/page.less
@ -0,0 +1,355 @@
+html {
+	background: @bodycolor url(../img/background-light.jpg);
+	font-family: @basefont;
+	font-color: @textcolor;
+	font-size: 90%;
+}
+.navigation-wrapper {
+	.container();
+	padding: 2em 0 3em;
+	font-family: @baseheadingfont;
+	font-weight: 700;
+	text-transform: uppercase;
+}
+.site-name {
+	.container();
+	.grid(12,10);
+	.prefix(12,1);
+	.suffix(12,1);
+	margin-bottom: 1em;
+}
+.top-navigation {
+	.container();
+	.grid(12,10);
+	.prefix(12,1);
+	.suffix(12,1);
+	margin-bottom: 1em;
+}
+.top-navigation {
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	li {
+		list-style-type: none;
+		display: inline;
+		margin-right: 25px;
+		&:after {
+			content: ".";
+		}
+		a { 
+			decoration: none;
+			border-bottom: 0 solid transparent;
+		}
+	}
+}
+#main {
+	counter-reset: captions;
+	.container();
+	.clearfix();
+	clear: both;
+	margin-top: 1em;
+	article {
+		.container();
+		.grid(12,10);
+		.prefix(12,1);
+		.suffix(12,1);
+		margin-bottom: 2em;
+	}
+}
+#index {
+	.container();
+	.grid(12,10);
+	.prefix(12,1);
+	.suffix(12,1);
+	margin-bottom: 2em;
+	article {
+		h2 {
+			.delta();
+			margin-bottom: 0;
+		}
+		p+p {
+			text-indent: 0;
+		}
+	}
+}
+.image-wrap {
+	position: relative;
+	margin-bottom: 2em;
+	&:after {
+		content: " ";
+		display: block;
+		position: absolute;
+		bottom: -1px;
+		left: 8%;
+		width: 0;
+		height: 0;
+		border: 20px solid transparent;
+		border-bottom-color: @bodycolor;
+	}
+	img {
+		width: 100%;
+		height: auto;
+		-ms-interpolation-mode: bicubic;
+	}
+	.headline-wrap {
+		position: absolute;
+		bottom: 25px;
+		.prefix(12,1);
+		h1, h2 {
+			color: @white;
+			.text-shadow(0 1px 2px rgba(0,0,0,.25));
+		}
+	}
+}
+.headline-wrap {
+	h1 {
+		.beta();
+	}
+	h2 {
+		.delta();
+		text-transform: uppercase;
+	}
+}
+.article-wrap {
+	h2 {
+		.gamma();
+	}
+	h3 {
+		.delta();
+	}
+}
+.byline {
+	clear: both;
+	font-size: 80%;
+}
+.article-author-top,
+.article-author-bottom {
+	h4 {
+		margin-bottom: 0.5em;
+	}
+	p {
+		font-size: 80%;
+		font-style: italic;
+	}
+	a, a:hover {
+		border-bottom: 0 solid transparent;
+	}
+	img.bio-photo {
+		.rounded(100px);
+	}
+}
+.article-author-top {
+	display: none;
+}
+.article-author-bottom {
+	.bio-photo {
+		float: left;
+		margin-right: 25px;
+	}
+}
+.toc {
+	display: none;
+	font-size: 95%;
+	.opacity(0.7);
+	.transition(opacity 0.2s ease-in-out);
+	&:hover {
+		.opacity(1);
+	}
+	header {
+		background: lighten(@black, 10);
+	}
+	h3 {
+		margin: 0;
+		padding: 5px 10px;
+		color: @white;
+		&:hover {
+			cursor: pointer;
+		}
+	}
+	ul {
+		margin: 2px 0 0;
+		padding: 0;
+		background: lighten(@black, 30);
+		line-height: 1;
+	}
+	li {
+		display: block;
+		margin: 0;
+		padding: 0;
+		font-family: @baseheadingfont;
+		border-bottom: 1px solid darken(@white, 50);
+		&:last-child {
+			border-bottom: 0 solid transparent;
+		}
+		a, a:hover {
+			color: @white;
+			border-bottom: 0 solid transparent;
+		}
+		a { 
+			padding: 10px;
+			display: block;
+		}
+		ul {
+			margin: 0;
+			border-top: 1px solid darken(@white, 50);
+		}
+	}
+}
+.image-grid {
+	.clearfix();
+	list-style: none;
+	margin: 0 0 1em;
+	padding: 0;
+	li {
+		.grid(12,6);
+	}
+}
+.recent-grid {
+	.clearfix();
+	list-style: none;
+	margin: 1em 0;
+	li {
+		display: inline;
+		a { 
+			border-bottom: 0 solid transparent;
+			&:hover {
+				border-bottom: 0 solid transparent;
+			}
+		}
+	}
+	img {
+		width: 19%;
+		margin-bottom: 1%;
+	}
+}
+.holder {
+	font-family: @baseheadingfont;
+	a {
+		cursor: pointer;
+		margin: 0 5px;
+	}
+	a.jp-previous {
+		margin-left: 0;
+		margin-right: 15px;
+	}
+	a.jp-next {
+		margin-left: 15px;
+		margin-right: 0;
+	}
+	a.jp-current {
+		font-weight: bold;
+	}
+	a.jp-disabled, 
+	a.jp-disabled:hover {
+	}
+	a.jp-current, 
+	a.jp-current:hover,  
+	a.jp-disabled, 
+	a.jp-disabled:hover {
+		cursor: default;
+		background: none;
+	}
+	span {
+		margin: 0 5px;
+	}
+}
+.footer-wrap {
+	.container();
+	.clearfix();
+	clear: both;
+	margin-top: 1em;
+	padding-top: 2em;
+	padding-bottom: 3em;
+	background: @black url(../img/background-dark.png);
+	a,
+	a:active,
+	a:visited,
+	p,
+	h4,
+	h5,
+	h6 {
+		color: darken(@white, 25);
+	}
+	a {
+		border-bottom: 0 solid transparent;
+		&:hover {
+			color: @white;
+			border-bottom: 0 solid transparent;
+		}
+	}
+	footer {
+		.grid(12,10);
+		.prefix(12,1);
+		.suffix(12,1);
+	}
+}
+.related-articles {
+	.grid(12,10);
+	.prefix(12,1);
+	.suffix(12,1);
+	h4 {
+		.epsilon();
+		text-transform: uppercase;
+		margin-bottom: 0;
+	}
+	li {
+		margin-bottom: 0;
+		color: @white;
+	}
+}
+.footer-icons {
+	li {
+		display: inline-block;
+		padding-right: 5px;
+		a {
+			.delta();
+			color: lighten(@basecolor, 40%);
+			.transition(.4s linear);
+			&:hover {
+				text-decoration: none;
+				border-bottom: none;
+				.icon-twitter,
+				.icon-twitter-sign {
+					color: #2aa9df;
+				}
+				.icon-facebook,
+				.icon-facebook-sign {
+					color: #3a5a98;
+				}
+				.icon-instagram,
+				.icon-instagram-sign {
+					color: #306088;
+				}
+				.icon-google-plus,
+				.icon-google-plus-sign {
+					color: #b63324;
+				}
+				.icon-lastfm,
+				.icon-lastfm-sign {
+					color: #d80049;
+				}
+				.icon-github {
+					color: #4183c4;
+				}
+			}
+		}
+	}
+}
+.chrome-frame {
+	background: #000;
+	text-align: center;
+	margin: 0 0 2em 0;
+	padding: 10px;
+	text-align: center;
+	color: @white;
+	a {
+		color: @white;
+		border-bottom: 1px dotted @white;
+		text-decoration: none;
+		&:hover {
+			border-bottom: 1px solid @white;
+		}
+	}
+}
--- a/assets/less/print.less
+++ b/assets/less/print.less
@ -0,0 +1,56 @@
+// ROOT =====================================================
+* { 
+background : transparent !important; 
+color : black !important; 
+box-shadow : none !important; 
+text-shadow : none !important; 
+filter : none !important; 
+-ms-filter : none !important;
+position: static !important; }
+
+@page { 
+margin : 0.5cm; }
+
+// TYPOGRAPHY ===============================================
+h2, h3 { 
+orphans : 3; 
+widows : 3; 
+page-break-after : avoid; }
+
+p { 
+orphans : 3; 
+widows : 3; }
+
+pre, blockquote { 
+border : 1px solid #333; 
+page-break-inside : avoid;
+padding: 1em; }
+
+abbr[title]:after { 
+content: " (" attr(title) ")"; }
+
+a, a:visited { 
+text-decoration : underline; }
+
+a[href]:after { 
+content : " (" attr(href) ")"; }
+
+a[href^="javascript:"]:after, 
+a[href^="#"]:after { 
+content : ""; }
+
+// TEXTURE ===============================================
+img { 
+max-width : 100% !important;
+page-break-inside : avoid; }
+
+thead { 
+display : table-header-group; } 
+
+tr { 
+page-break-inside : avoid; }
+
+// ELEMENTS ==============================================
+// LAYOUT ================================================
+// VENDOR-SPECIFIC =======================================
+// MODERNIZR =============================================
--- a/assets/less/site.less
+++ b/assets/less/site.less
@ -0,0 +1,41 @@
+/* Selection ============================================= */
+::-moz-selection { 
+	background-color: lighten(@basecolor, 65%); 
+	color: @basecolor; 
+	text-shadow: none; 
+}  	
+::selection { 
+	background-color: lighten(@basecolor, 65%); 
+	color: @basecolor; 
+	text-shadow: none; 
+}
+
+/* Global Classes ======================================== */
+.all-caps {
+	text-transform: uppercase;
+}
+.pull-left {
+	float: left;
+}
+.pull-right {
+	float:right;
+}
+.clearfix {
+	*zoom: 1;
+	&:before,
+	&:after {
+		display: table;
+	    content: "";
+	}
+	&:after {
+		clear: both;
+	}
+}
+.unstyled-list {
+	list-style: none;
+	margin-left: 0;
+	padding-left: 0;
+	li {
+		list-style-type: none;
+	}
+}
--- a/assets/less/typeplate.less
+++ b/assets/less/typeplate.less
@ -0,0 +1,727 @@
+/*!
+---------------------------------------------------------------------+
+|        _                               _         _                  |
+|       | |_  _   _  _ __    ___  _ __  | |  __ _ | |_  ___           |
+|       | __|| | | || '_ \  / _ \| '_ \ | | / _` || __|/ _ \          |
+|       | |_ | |_| || |_) ||  __/| |_) || || (_| || |_|  __/          |
+|        \__| \__, || .__/  \___|| .__/ |_| \__,_| \__|\___|          |
+|             |___/ |_|          |_|                                  |
+|                                                                     |
+|                                                                     |
+| URL: http://typeplate.com                                           |
+| VERSION: 1.0.1                                                      |
+| Github: https://github.com/typePlate/typeplate.github.com           |
+| AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) |
+| LICENSE: Creative Commmons                                          |
+| http://creativecommons.org/licenses/by/3.0                          |
+|                                                                     |
+---------------------------------------------------------------------+
+*/
+
+
+// ==========================================================================
+//
+// $V a r i a b l e s
+//
+// ==========================================================================
+
+
+// $B a s e  T y p e
+// --------------------------------------------------------------------------
+
+@weight: normal;
+@line-height: 1.65;
+@font-size: 112.5; // percentage value (16 * 112.5% = 18px)
+@font-base: 16 * (@font-size/100); // converts our percentage to a pixel value
+@measure: @font-base * @line-height;
+@font-family: serif;
+@font-family-sans: sans-serif;
+
+//the serif boolean var can be redeclared from another stylesheet. However
+//the var must be placed after your @import "typeplate.less";
+@serif-boolean: true;
+
+
+// $C o l o r
+// --------------------------------------------------------------------------
+
+@body-copy-color: @textcolor;
+@heading-color: @textcolor;
+
+
+// $A M P E R S A N D  @font-face
+// --------------------------------------------------------------------------
+
+@amp-fontface-name: Ampersand;
+@amp-fontface-source: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
+@amp-fontface-fallback: local("Georgia");
+
+
+// $A M P E R S A N D  e l e m e n t
+// --------------------------------------------------------------------------
+
+// Allows for our ampersand element to have differing
+// font-family from the ampersand unicode font-family.
+@amp-font-family: Verdana, sans-serif;
+
+
+// $T y p e  S c a l e
+// --------------------------------------------------------------------------
+
+@tera: 117;		//	117	= 18 × 6.5
+@giga: 90;		//	90  = 18 × 5
+@mega: 72;		//	72  = 18 × 4
+@alpha: 60;		//	60  = 18 × 3.3333
+@beta: 48;		//	48  = 18 × 2.6667
+@gamma: 36;		//	36  = 18 × 2
+@delta: 24;		//	24  = 18 × 1.3333
+@epsilon: 21;	//	21  = 18 × 1.1667
+@zeta: 18; 		//	18  = 18 × 1
+
+
+// $T y p e  S c a l e  U n i t
+// --------------------------------------------------------------------------
+
+@type-scale-unit-value: rem;
+
+
+// $T e x t  I n d e n t a t i o n
+// --------------------------------------------------------------------------
+
+@indent-val: 1.5em;
+
+
+// $S t a t s  T a b
+// --------------------------------------------------------------------------
+
+@stats-font-size: 1.5rem;
+@stats-list-margin: 0 0.625rem 0 0;
+@stats-list-padding: 0 0.625rem 0 0;
+@stats-item-font-size: 0.875rem;
+@stats-item-margin: 0.125rem 0 0 0;
+@stats-border-style: 0.125rem solid #ccc;
+
+
+
+// ==========================================================================
+//
+// $F o n t f a c e s
+//
+// ==========================================================================
+
+
+// $U N I C O D E - R A N G E    A m p e r s a n d
+// --------------------------------------------------------------------------
+
+@font-face {
+	font-family: "@{amp-fontface-name}";
+	src: @amp-fontface-source;
+	unicode-range: ~"U+270C";
+}
+
+// Ampersand fallback font for unicode range
+@font-face {
+	font-family: "@{amp-fontface-name}";
+	src: @amp-fontface-fallback;
+	unicode-range: ~"U+270C";
+}
+
+
+
+// ==========================================================================
+//
+// $F u n c t i o n s
+//
+// ==========================================================================
+
+
+// $C o n t e x t    C a l c u l a t o r
+// --------------------------------------------------------------------------
+
+// Less conversion: No function support
+//.ems(@target, @context) {
+//	@return (@target/@context)#{em};
+//}
+
+
+// $M o d u l a r    S c a l e
+// --------------------------------------------------------------------------
+// http://thesassway.com/projects/modular-scale
+
+// Less conversion: No function support
+//@function modular-scale(@scale, @base, @value) {
+//	// divide a given font-size by base font-size & return a relative em value
+//	@return (@scale/@base)#{@value};
+//}
+
+// Less conversion: No function support
+//@function measure-margin(@scale, @measure, @value) {
+//	// divide 1 unit of measure by given font-size & return a relative em value
+//	@return (@measure/@scale)#{@value};
+//}
+
+
+
+// ==========================================================================
+//
+// $M i x i n s
+//
+// ==========================================================================
+
+
+// $M o d u l a r    S c a l e
+// --------------------------------------------------------------------------
+
+// @Typographic scale
+.modular-scale (@scale, @base, @value, @measure:"") when (@measure = "") {
+	font-size: ~"@{scale}px";
+	@font: (@scale/@base) + @value;
+	font-size: ~"@{font}rem";
+}
+.modular-scale (@scale, @base, @value, @measure:"") when not (@measure = "") {
+	font-size: ~"@{scale}px";
+	@font: (@scale/@base) + @value;
+	font-size: ~"@{font}rem";
+	@margin: (@measure/@scale) + @value;
+	margin-bottom: ~"@{margin}rem";
+}
+
+
+// $B o d y    C o p y
+// --------------------------------------------------------------------------
+
+.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when (@serif-boolean = true) {
+	font: @weight ~"@{font-size}%/@{line-height}" @font-family;
+}
+.base-type (@weight, @line-height, @font-size, @font-family, @serif-boolean: true) when not (@serif-boolean = true) {
+	font: @weight ~"@{font-size}%/@{line-height}" @font-family-sans;
+}
+
+
+// $H y p h e n
+// --------------------------------------------------------------------------
+//http://trentwalton.com/2011/09/07/css-hyphenation
+
+.css-hyphens (@val) {
+	// Accepted values: [ none | manual | auto ]
+	-webkit-hyphens: @val;	// Safari 5.1 thru 6, iOS 4.2 thru 6
+	-moz-hyphens: @val;		// Firefox 16 thru 20
+	-ms-hyphens: @val;		// IE10
+	-o-hyphens: @val;		// PRESTO...haha LOL
+	hyphens: @val;			// W3C standard
+}
+
+
+// $S m a l l c a p s
+// --------------------------------------------------------------------------
+// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
+// ISSUE#1 : https://github.com/zakkain/web-thang/issues/1
+
+.smallcaps (@color, @font-weight) {
+	// depends on the font family.
+	// some font-families don't support small caps
+	// or don't provide them with their web font.
+	font-variant: small-caps;
+	font-weight: @font-weight;
+	text-transform: lowercase;
+	color: @color;
+}
+
+
+// $F o n t - S i z e  - A d j u s t
+// --------------------------------------------------------------------------
+// correct x-height for fallback fonts: requires secret formula
+// yet to be discovered. This is still wacky for support. Use
+// wisely grasshopper.
+
+.font-size-adjust (@adjust-value) {
+	// firefox 17+ only (as of Feb. 2013)
+	font-size-adjust: @adjust-value;
+}
+
+
+// $A m p e r s a n d
+// --------------------------------------------------------------------------
+
+.ampersand (@amp-font-family) {
+	font-family: @amp-font-family;
+}
+
+.ampersand-placeholder {
+	.ampersand(@amp-font-family);
+}
+
+// Call your ampersand on any element you wish from another stylesheet
+// using this Sass extend we've provided...
+// @extend %ampersand-placeholder;
+
+
+
+// $W o r d    W r a p
+// --------------------------------------------------------------------------
+// Silent Sass Classes - A.K.A Placeholders
+//
+// normal: Indicates that lines may only break at normal word break points.
+// break-word : Indicates that normally unbreakable words may be broken at
+// arbitrary points if there are no otherwise acceptable break points in the line.
+
+.breakword {
+	word-wrap: break-word;
+}
+
+.normal-wrap {
+	word-wrap: normal;
+}
+
+.inherit-wrap {
+	word-wrap: auto;
+}
+
+
+// $D r o p c a p s
+// --------------------------------------------------------------------------
+/**
+ * Dropcap Sass @include
+ * Use the following Sass @include with any selector you feel necessary.
+ *
+	@include dropcap(@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent);
+ *
+ * Extend this object into your custom stylesheet.
+ *
+ */
+
+// Include your '@include dropcap()' mixin and pass the following
+// arguments below. Feel free to pass in arguments we've provided.
+// At this time you cannot pass in font-family arguments but you're gonna
+// change that anyway so why not just make that separately in your declaration.
+.dropcap (@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent) {
+	&:first-letter {
+		float: @float;
+		margin: @margin;
+		padding: @padding;
+		font-size: @font-size;
+		font-family: @font-family;
+		line-height: @lineHeight;
+		text-indent: @text-indent;
+		background: @bg;
+		color: @color;
+	}
+}
+
+.drop-cap {
+	.dropcap;
+}
+
+// $D e f i n i t i o n    L i s t
+// --------------------------------------------------------------------------
+// lining
+// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
+//
+// dictionary-style
+// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
+
+.definition-list-style (@style) when (@style = lining) {
+	dt,
+	dd {
+		display: inline;
+		margin: 0;
+	}
+	dt,
+	dd {
+		& + dt {
+			&:before {
+				content: "\A";
+				white-space: pre;
+			}
+		}
+	}
+	dd {
+		& + dd {
+			&:before {
+				content: ", ";
+			}
+		}
+		&:before {
+				content: ": ";
+				margin-left: -0.2rem; //removes extra space between the dt and the colon
+		}
+	}
+}
+// dictionary-style
+.definition-list-style (@style) when (@style = dictionary-style) {
+	dt {
+		display: inline;
+		counter-reset: definitions;
+		& + dt {
+			&:before {
+				content: ", ";
+				margin-left: -0.2rem; // removes extra space between the dt and the comma
+			}
+		}
+	}
+	dd {
+		display: block;
+		counter-increment: definitions;
+		&:before {
+			content: ~"counter(definitions, decimal)" ". ";
+		}
+	}
+}
+
+
+
+// ==========================================================================
+//
+// $T y p e l a t e  S t y l i n g
+//
+// ==========================================================================
+
+
+// $G l o b a l s
+// --------------------------------------------------------------------------
+
+html {
+	.base-type(@weight, @line-height, @font-size, @font-family, @serif-boolean);
+}
+
+body {
+	// Ala Trent Walton
+	// .css-hyphens (auto);
+
+	// normal-wrap: Indicates that lines may only break at normal word break points.
+	// breakword : Indicates that normally unbreakable words may be broken at ...
+	// arbitrary points if there are no otherwise acceptable break points in the line.
+	.normal-wrap;
+	color: @body-copy-color;
+}
+
+
+// $H e a d i n g s
+// --------------------------------------------------------------------------
+
+// styles for all headings, in the style of @csswizardry
+.hN () {
+	// voodoo to enable ligatures and kerning
+	text-rendering: optimizeLegibility;
+	// this fixes huge spaces when a heading wraps onto two lines
+	line-height: 1;
+	margin-top: 0;
+}
+
+// for each size in the scale, create a class
+.tera 		{ .modular-scale(@tera, @font-base, @type-scale-unit-value, @measure); }
+.giga 		{ .modular-scale(@giga, @font-base, @type-scale-unit-value, @measure); }
+.mega 		{ .modular-scale(@mega, @font-base, @type-scale-unit-value, @measure); }
+.alpha 		{ .modular-scale(@alpha, @font-base, @type-scale-unit-value, @measure); }
+.beta 		{ .modular-scale(@beta, @font-base, @type-scale-unit-value, @measure); }
+.gamma 		{ .modular-scale(@gamma, @font-base, @type-scale-unit-value, @measure); }
+.delta 		{ .modular-scale(@delta, @font-base, @type-scale-unit-value, @measure); }
+.epsilon 	{ .modular-scale(@epsilon, @font-base, @type-scale-unit-value, @measure); }
+.zeta 		{ .modular-scale(@zeta, @font-base, @type-scale-unit-value, @measure); }
+
+// associate h1-h6 tags with their appropriate greek heading
+h1 {
+	.alpha;
+	.hN;
+}
+
+h2 {
+	.beta;
+	.hN;
+}
+
+h3 {
+	.gamma;
+	.hN;
+}
+
+h4 {
+	.delta;
+	.hN;
+}
+
+h5 {
+	.epsilon;
+	.hN;
+}
+
+h6 {
+	.zeta;
+	.hN;
+}
+
+
+// $ P a r a g r a p h s
+// --------------------------------------------------------------------------
+
+p {
+	margin: 0 0 @indent-val;
+	& + p {
+		//siblings indentation
+		text-indent: @indent-val;
+		margin-top: -@indent-val;
+	}
+}
+
+
+// $ H y p h e n s
+// --------------------------------------------------------------------------
+// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation
+
+abbr,
+acronym,
+blockquote,
+code,
+dir,
+kbd,
+listing,
+plaintext,
+q,
+samp,
+tt,
+var,
+xmp {
+	.css-hyphens (none);
+}
+
+
+// $C o d e b l o c k s
+// --------------------------------------------------------------------------
+
+// White Space Mixins
+.white-space-pre-wrap () {
+	white-space: -moz-pre-wrap; // Firefox 1.0-2.0
+	white-space: pre-wrap;			// Current Browsers
+}
+.white-space-pre () {
+	white-space: pre;
+}
+
+pre code {
+	.normal-wrap;
+	.white-space-pre-wrap;
+}
+pre {
+	.white-space-pre;
+}
+code {
+	.white-space-pre;
+	font-family: monospace;
+}
+
+
+// $ S m a l l c a p s
+// --------------------------------------------------------------------------
+
+/**
+ * Abbreviations Markup
+ *
+	<abbr title="hyper text markup language">HMTL</abbr>
+ *
+ * Extend this object into your markup.
+ *
+ */
+abbr {
+	.smallcaps(@textcolor, 400);
+	&:hover {
+		cursor: help;
+	}
+}
+
+
+// $ H e a d i n g s    C o l o r
+// --------------------------------------------------------------------------
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: @heading-color;
+}
+
+
+// $ D e f i n i t i o n    L i s t s
+// --------------------------------------------------------------------------
+
+/**
+ * Lining Definition Style Markup
+ *
+	<dl class="lining">
+		<dt><b></b></dt>
+		<dd></dd>
+	</dl>
+ *
+ * Extend this object into your markup.
+ *
+ */
+.lining {
+	.definition-list-style(lining);
+}
+
+/**
+ * Dictionary Definition Style Markup
+ *
+	<dl class="dictionary-style">
+		<dt><b></b></dt>
+			<dd></dd>
+	</dl>
+ *
+ * Extend this object into your markup.
+ *
+ */
+.dictionary-style {
+	.definition-list-style(dictionary-style);
+}
+
+
+// $S t a t s    T a b
+// --------------------------------------------------------------------------
+
+/**
+ * Stats Tab Markup
+ *
+	<ul class="stats-tabs">
+		<li><a href="#">[value]<b>[name]</b></a></li>
+	</ul>
+ *
+ * Extend this object into your markup.
+ *
+ */
+.stats-tabs {
+	padding: 0;
+	li {
+		display: inline-block;
+		margin: @stats-list-margin;
+		padding: @stats-list-padding;
+		border-right: @stats-border-style;
+		&:last-child {
+			margin: 0;
+			padding: 0;
+			border: none;
+		}
+		a {
+			display: inline-block;
+			font-size: @stats-font-size;
+			font-weight: bold;
+			b {
+				display: block;
+				margin: @stats-item-margin;
+				font-size: @stats-item-font-size;
+				font-weight: normal;
+			}
+		}
+	}
+}
+
+
+// @Blockquote Cites
+// --------------------------------------------------------------------------
+/**
+ * Blockquote Markup
+ *
+	<blockquote cite="">
+		<p>&Prime;&Prime;</p>
+		<cite>
+			<small><a href=""></a></small>
+		</cite>
+	</blockquote>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+.cite-style(@display:block, @text-align:right, @font-size: .875em) {
+	display: @display;
+	font-size: @font-size;
+	text-align: @text-align;
+}
+
+.cite {
+	.cite-style;
+}
+
+
+// @Pull Quotes
+// --------------------------------------------------------------------------
+// http://24ways.org/2005/swooshy-curly-quotes-without-images
+//
+// http://todomvc.com - Thanks sindresorhus!
+// https://github.com/typeplate/typeplate.github.com/issues/49
+
+/**
+ * Pull Quotes Markup
+ *
+	<aside class="pull-quote">
+		<blockquote>
+			<p></p>
+		</blockquote>
+	</aside>
+ *
+ * Extend this object into your custom stylesheet.
+ *
+ */
+
+.pull-quotes(@font-size, @opacity) {
+	position: relative;
+	padding: (@font-size/@font-size);
+	&:before,
+	&:after {
+		height: (@font-size/@font-size);
+		opacity: @opacity;
+		position: absolute;
+		font-size: @font-size;
+	}
+	&:before {
+		content: '“';
+		top:  0em;
+		left: 0em;
+	}
+	&:after {
+		content: '”';
+		bottom: 0em;
+		right: 0em;
+	}
+}
+
+.pull-quote {
+	.pull-quotes(4em, .15);
+}
+
+
+// @Figures
+// --------------------------------------------------------------------------
+
+/**
+ * Figures Markup
+ *
+	<figure>
+		<figcaption>
+			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
+		</figcaption>
+	</figure>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+
+ // @Footnotes
+// --------------------------------------------------------------------------
+
+/**
+ * Footnote Markup : Replace 'X' with your unique number for each footnote
+ *
+	<article>
+		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
+		<footer>
+			<ol class="foot-notes">
+				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
+			</ol>
+		</footer>
+	</article>
+ *
+ * Extend this object into your markup.
+ *
+ */
--- a/assets/less/typography.less
+++ b/assets/less/typography.less
@ -0,0 +1,101 @@
+/* Headings ============================================== */
+h1, h2, h3, h4, h5, h6 {
+	font-family: @baseheadingfont;
+	font-weight: 700;
+}
+h6 {
+	font-weight: 400;
+}
+
+/* Links ================================================= */
+a { 
+	text-decoration: none;
+	color: @linkcolor; 
+	&:visited { 
+		color: @linkcolorvisited; 
+	}
+	&:hover { 
+		color: @linkcolorhover; 
+	}
+	&:focus { 
+		outline: thin dotted; 
+		color: @linkcolorfocus; 
+	}
+	&:hover, 
+	&:active { 
+		outline: 0; 
+	}
+}
+
+b, strong { 
+	font-weight: 700;
+}
+
+/* Lists ============================================== */
+ul {
+	li {
+		list-style-type: square
+	}
+}
+ol {
+	li {
+		list-style-type: upper-roman;
+	}
+}
+
+/* Add underline for main links ======================= */
+p > a,
+li > a,
+em > a,
+a > em,
+footer a {
+	text-decoration: none;
+	border-bottom: 1px dotted lighten(@textcolor, 50%);
+}
+p > a:hover,
+li > a:hover,
+em > a:hover,
+footer a:hover {
+	text-decoration: none;
+	border-bottom: 1px solid lighten(@textcolor, 50%);
+}
+
+/* Figure caption ===================================== */
+figcaption {
+	margin-top: (@indent-val / 2);
+	line-height: 1.25;
+	.zeta();
+	font-family: @baseheadingfont;
+	counter-increment: captions;
+	&:before {
+		font-weight: 700;
+		text-transform: uppercase;
+		content: "Figure " counter(captions) ": ";
+	}
+}
+
+/* Notice ============================================== */
+.notice {
+	margin-top: 1.5em;
+	padding: .5em 1em;
+	text-indent: 0;
+	font-size: 90%;
+	background-color: #ddd;
+	border-left: 10px solid #ccc;
+}
+/* Blockquote =========================================== */
+blockquote {
+	font-style: italic;
+	border-left: 10px solid #ccc;
+	margin-left: 0;
+	padding-left: 1em;
+	border-left: 10px solid #ccc;
+	p+p {
+		text-indent: 0;
+		margin-top: 0;
+	}
+}
+/* Footnotes ============================================= */
+.footnotes {
+	font-size: 90%;
+}
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@ -0,0 +1,19 @@
+// TYPOGRAPHY ================================================
+@basefont: 'PT Serif', serif;
+@baseheadingfont: 'PT Sans Narrow', sans-serif;
+@codefont: Monaco, Courier New, monospace;
+
+// COLOR ====================================================
+@bodycolor      : #ebebeb;
+@textcolor      : #333332;
+@basecolor 		: #343434;	  
+@compcolor 		: spin(@basecolor, 180); 
+@bordercolor    : @basecolor;
+@white          : #fff;
+@black          : #000;
+@accentcolor    : @black;
+/* Links ================================================= */
+@linkcolor 		    : #343434;
+@linkcolorhover 	: darken(@linkcolor, 10);
+@linkcolorvisited   : lighten(@linkcolorhover, 20);
+@linkcolorfocus 	: darken(@linkcolorvisited, 10);
--- a/feed.xml
+++ b/feed.xml
@ -0,0 +1,36 @@
+---
+layout: none
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
+<title type="text">{{ site.title }}</title>
+<subtitle type="text">{{ site.tagline }}</subtitle>
+<generator uri="https://github.com/mojombo/jekyll">Jekyll</generator>
+<link rel="self" type="application/atom+xml" href="{{ site.url }}/feed.xml" />
+<link rel="alternate" type="text/html" href="{{ site.url }}" />
+<updated>{{ site.time | date_to_xmlschema }}</updated>
+<id>{{ site.url }}/</id>
+<author>
+  <name>{{ site.owner.name }}</name>
+  <uri>{{ site.url }}/</uri>
+  <email>{{ site.owner.email }}</email>
+</author>
+{% for post in site.posts limit:20 %}
+
+<entry>
+  <title type="html"><![CDATA[{{ post.title | cdata_escape }}]]></title>
+  <link rel="alternate" type="text/html" href="{{ site.url }}{{ post.url }}" />
+  <id>{{ site.url }}{{ post.id }}</id>
+  {% if post.modified %}<updated>{{ post.modified | date_to_xmlschema }}</updated>
+  <published>{{ post.date | date_to_xmlschema }}</published>
+  {% else %}<updated>{{ post.date | date_to_xmlschema }}</updated>{% endif %}
+  <author>
+    <name>{{ site.owner.name }}</name>
+    <uri>{{ site.url }}/</uri>
+    <email>{{ site.owner.email }}</email>
+  </author>
+  <content type="html">{{ post.content | xml_escape }}
+  &lt;p&gt;&lt;a href=&quot;{{ site.url }}{{ post.url }}&quot;&gt;{{ post.title }}&lt;/a&gt; was originally published by {{ site.owner.name }} at &lt;a href=&quot;{{ site.url }}&quot;&gt;{{ site.title }}&lt;/a&gt; on {{ post.date | date: "%B %d, %Y" }}.&lt;/p&gt;</content>
+</entry>
+{% endfor %}
+</feed>
--- a/images/1024x300.png
+++ b/images/1024x300.png
--- a/images/1024x400.png
+++ b/images/1024x400.png
--- a/images/200x200.png
+++ b/images/200x200.png
--- a/images/texture-feature-01.jpg
+++ b/images/texture-feature-01.jpg
--- a/images/texture-feature-02.jpg
+++ b/images/texture-feature-02.jpg
--- a/images/texture-feature-03.jpg
+++ b/images/texture-feature-03.jpg
--- a/images/texture-feature-04.jpg
+++ b/images/texture-feature-04.jpg
--- a/images/texture-feature-05.jpg
+++ b/images/texture-feature-05.jpg
--- a/images/texture-l-10
+++ b/images/texture-l-10
--- a/images/texture-l-17.jpg
+++ b/images/texture-l-17.jpg
--- a/index.md
+++ b/index.md
@ -0,0 +1,7 @@
+---
+layout: home
+description: "Unique page description text goes here."
+tags: [blog, graphic design]
+image:
+  feature: texture-feature-01.jpg
+---
--- a/sitemap.xml
+++ b/sitemap.xml
@ -0,0 +1,15 @@
+---
+layout: nil
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>{{ site.url }}</loc>
+    </url>
+    
+    {% for post in site.posts %}
+    <url>
+        <loc>{{ site.url }}{{ post.url }}</loc>
+    </url>
+    {% endfor %}
+</urlset>
--- a/theme-setup.md
+++ b/theme-setup.md
@ -0,0 +1,103 @@
+---
+layout: page
+permalink: /theme-setup/index.html
+title: Theme Setup
+tags: [Jekyll, theme, responsive]
+image:
+  feature: texture-feature-02.jpg
+---
+
+General notes and suggestions for customizing Minimal Mistakes.
+
+## Basic Setup
+
+1. [Install Jekyll](http://jekyllrb.com) if you haven't already.
+2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/)
+3. Make it your own and customize, customize, customize.
+
+<a markdown="0" href="http://github.com/mmistakes/minimal-mistakes" class="btn">Minimal Mistakes on GitHub</a>
+
+~~~ text
+minimal-mistakes/
+├── _includes
+|    ├── author-bio.html  //bio stuff goes here
+|    ├── chrome-frame.html  //displays on IE8 and less
+|    ├── footer.html  //site footer
+|    ├── head.html  //site head
+|    ├── navigation.html //site top nav
+|    └── scripts.html  //jQuery, plugins, GA, etc.
+├── _layouts
+|    ├── home.html  //homepage layout
+|    ├── page.html  //page layout
+|    ├── post-index.html  //post listing layout
+|    └── post.html  //post layout
+├── _posts
+├── assets
+|    ├── css  //preprocessed less styles. good idea to minify
+|    ├── img  //images and graphics used in css and js
+|    ├── js
+|    |   ├── main.js  //jQuery plugins and settings
+|    |   └── vendor  //all 3rd party scripts
+|    └── less 
+├── images  //images for posts and pages
+├── about.md  //about page
+├── articles.md  //lists all posts from latest to oldest
+└── index.md  //homepage. lists 5 most recent posts
+~~~
+
+## Customization
+
+### _config.yml
+
+Variables you want to update are: site name, description, url[^1], owner info, and your Google Anayltics tracking id and webmaster tool verifications. Most of these variables are used in the .html files found in *_includes* if you need to add or remove anything.
+
+### Adding Posts and Pages
+
+There are two main content layouts: *post.html* (for posts) and *page.html* (for pages). Both have large **feature images** that span the full-width of the screen, and both are meant for text heavy blog posts (or articles). 
+
+#### Feature Images
+
+A good rule of thumb is to keep feature images nice and wide so you don't push the body text too far down. An image cropped around around 1024 x 512 pixels will keep file size down with an acceptable resolution for most devices. On my personal site I use [Picturefill](https://github.com/scottjehl/picturefill) to serve the same image responsively in four different flavors (small, medium, large, and extra large). In the interest of keeping things simple with this theme I left that script out, but you can certainly [add it back in](https://github.com/mmistakes/made-mistakes#articles-and-pages) or give [Adaptive Images](http://adaptive-images.com/) a try.
+
+The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so. 
+
+~~~ yaml
+image:
+  feature: feature-image-filename.jpg
+  thumb: thumbnail-image.jpg #keep it square 200x200 px is good
+~~~
+
+#### Thumbnails for OG and Twitter Cards
+
+Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
+
+#### Table of Contents
+
+Any article or page that you want a *table of contents* to render insert the following HTML in your post before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into a contents list.
+
+**PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only shows on tablets and desktop viewports...
+{: .notice}
+
+~~~ html
+<section id="table-of-contents" class="toc">
+  <header>
+    <h3 class="delta">Contents</h3>
+  </header>
+<div id="drawer" markdown="1">
+*  Auto generated table of contents
+{:toc}
+</div>
+</section><!-- /#table-of-contents -->
+~~~
+
+#### Videos
+
+Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
+
+Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
+
+~~~ html
+<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
+~~~
+
+[^1]: Used to generate absolute urls in *sitemap.xml*, *feed.xml*, and for canonical urls in *head.html*. Don't include a trailing `\` in your base url ie: http://mademistakes.com
				`@ -0,0 +1 @@`
				`<!--[if lt IE 9]><div class="chrome-frame alert alert-info"><strong>Your browser is really old!</strong> <a href="http://browsehappy.com/">Why not upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better enjoy this site?</div><![endif]-->`
				`@ -0,0 +1 @@`
				`<h6>© {{ site.time \| date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</h6>`