Merge branch 'release/v1.1.0' into develop

2013-09-07 12:58:22 -04:00 · 2013-09-07 12:58:22 -04:00 · b86bf97cae
parent 194642eaa0 3086e9d8d7
commit b86bf97cae
37 changed files with 5435 additions and 1794 deletions
--- a/README.md
+++ b/README.md
@ -28,7 +28,7 @@ General notes and suggestions for customizing Minimal Mistakes.
 minimal-mistakes/
 ├── _includes
 |    ├── author-bio.html  //bio stuff goes here
-|    ├── chrome-frame.html  //displays on IE8 and less
+|    ├── browser-upgrade.html  //displays on IE8 and less
 |    ├── footer.html  //site footer
 |    ├── head.html  //site head
 |    ├── navigation.html //site top nav
@ -112,6 +112,15 @@ image:

 The large texture images used in *Minimal Mistakes* are from [Love Textures](http://lovetextures.com), probably a good idea to swap these out with your own photos...

+If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
+
+``` yaml
+image:
+  feature: feature-image-filename.jpg
+  credit: Michael Rose #name of the person or site you want to credit
+  creditlink: http://mademistakes.com #url to their site or licensing
+```
+
 #### Categories

 In the sample `_posts` folder you may have noticed `category: articles` in the front matter. I like keeping all posts grouped in the same folder. If you decide to rename or add categories you will need to modify the permalink in `articles.md` along with the filename (if renaming).
--- a/_includes/author-bio.html
+++ b/_includes/author-bio.html
@ -1,11 +1,11 @@
-<img src="{{ site.url }}/images/{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo" width="100" height="100"></a>
-<h4>{{ site.owner.name }}</h4>
+<img src="{{ site.url }}/images/{{ site.owner.avatar }}" class="bio-photo" alt="{{ site.owner.name }} bio photo"></a>
+<h3>{{ site.owner.name }}</h3>
 <p>{{ site.owner.bio }}</p>
-{% if site.owner.twitter %}<p style="text-indent:0;margin-top:1.5em;"><a href="http://twitter.com/{{ site.owner.twitter }}" target="_blank"><i class="icon-twitter"></i> Twitter</a></p>{% endif %}
-{% if site.owner.facebook %}<p style="text-indent:0;"><a href="http://facebook.com/{{ site.owner.facebook }}" target="_blank"><i class="icon-facebook"></i> Facebook</a></p>{% endif %}
-{% if site.owner.google_plus %}<p style="text-indent:0;"><a href="{{ site.owner.google_plus }}" target="_blank"><i class="icon-google-plus"></i> Google+</a></p>{% endif %}
-{% if site.owner.linkedin %}<p style="text-indent:0;"><a href="http://linkedin.com/in/{{ site.owner.linkedin }}" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a></p>{% endif %}
-{% if site.owner.instagram %}<p style="text-indent:0;"><a href="http://instagram.com/{{ site.owner.instagram }}" target="_blank"><i class="icon-instagram"></i> Instagram</a></p>{% endif %}
-{% if site.owner.github %}<p style="text-indent:0;"><a href="http://github.com/{{ site.owner.github }}" target="_blank"><i class="icon-github"></i> Github</a></p>{% endif %}
-{% if site.owner.lastfm %}<p style="text-indent:0;"><a href="http://lastfm.com/{{ site.owner.lastfm }}" target="_blank"><i class="icon-lastfm"></i> Last.fm</a></p>{% endif %}
-{% if site.owner.tumblr %}<p style="text-indent:0;"><a href="http://{{ site.owner.tumblr }}.tumblr.com" target="_blank"><i class="icon-tumblr"></i> Tumblr</a></p>{% endif %}
+{% if site.owner.twitter %}<a href="http://twitter.com/{{ site.owner.twitter }}" class="author-social" target="_blank"><i class="icon-twitter"></i> Twitter</a>{% endif %}
+{% if site.owner.facebook %}<a href="http://facebook.com/{{ site.owner.facebook }}" class="author-social" target="_blank"><i class="icon-facebook"></i> Facebook</a>{% endif %}
+{% if site.owner.google_plus %}<a href="{{ site.owner.google_plus }}" class="author-social" target="_blank"><i class="icon-google-plus"></i> Google+</a>{% endif %}
+{% if site.owner.linkedin %}<a href="http://linkedin.com/in/{{ site.owner.linkedin }}" class="author-social" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a>{% endif %}
+{% if site.owner.instagram %}<a href="http://instagram.com/{{ site.owner.instagram }}" class="author-social" target="_blank"><i class="icon-instagram"></i> Instagram</a>{% endif %}
+{% if site.owner.github %}<a href="http://github.com/{{ site.owner.github }}" class="author-social" target="_blank"><i class="icon-github"></i> Github</a>{% endif %}
+{% if site.owner.lastfm %}<a href="http://lastfm.com/{{ site.owner.lastfm }}" class="author-social" target="_blank"><i class="icon-lastfm"></i> Last.fm</a>{% endif %}
+{% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" class="author-social" target="_blank"><i class="icon-tumblr"></i> Tumblr</a>{% endif %}
--- a/_includes/browser-upgrade.html
+++ b/_includes/browser-upgrade.html
@ -0,0 +1 @@
+<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
--- a/_includes/chrome-frame.html
+++ b/_includes/chrome-frame.html
@ -1 +0,0 @@
-<!--[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
@ -1 +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>
+<span>&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.</span>
--- a/_layouts/home.html
+++ b/_layouts/home.html
@ -9,26 +9,21 @@

 <body class="home" itemscope itemtype="http://schema.org/WebPage">

-{% include chrome-frame.html %}
+{% include browser-upgrade.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="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
-</div><!-- /.image-wrap -->
+{% if page.image.feature %}<div class="image-wrap">
+  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
+</div><!-- /.image-wrap -->{% endif %}

 <div class="article-author-top">
  {% include author-bio.html %}
 </div>

 <div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
-  <a href="{{ site.url}}/articles" class="btn btn-small pull-right">View all articles</a>
-  <h3>Latest Articles</h3>
-  <hr />
+  <h3><a href="{{ site.url}}/articles">Articles</a></h3>
  {% for post in site.categories.articles limit:5 %}    
  <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
    <h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -9,12 +9,13 @@

 <body class="page" itemscope itemtype="http://schema.org/WebPage">

-{% include chrome-frame.html %}
+{% include browser-upgrade.html %}

 {% include navigation.html %}

 {% if page.image.feature %}<div class="image-wrap">
  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
 </div><!-- /.image-wrap -->{% endif %}

 <div id="main" role="main"  itemprop="mainContentOfPage">
@ -22,9 +23,7 @@
    {% include author-bio.html %}
  </div>
  <article itemscope itemtype="http://schema.org/CreativeWork">
-    <div class="headline-wrap">
-      <h1 itemprop="headline">{{ page.title }}</h1>
-    </div><!--/ .headline-wrap -->
+    <h1 itemprop="name">{{ page.title }}</h1>
    <div class="article-wrap" itemprop="text">
      {{ content }}
    </div><!-- /.article-wrap -->
--- a/_layouts/post-index.html
+++ b/_layouts/post-index.html
@ -9,33 +9,29 @@

 <body class="articles" itemscope itemtype="http://schema.org/WebPage">

-{% include chrome-frame.html %}
+{% include browser-upgrade.html %}

 {% include navigation.html %}

-<div class="image-wrap">
-  <div class="headline-wrap">
-    <h1>{{ page.title }}</h1>
-    {% if page.tagline %}<h2 class="hidden-phone">{{ page.tagline }}</h2>{% endif %}
-  </div><!--/ .headline-wrap -->
-  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
-</div><!-- /.image-wrap -->
+{% if page.image.feature %}<div class="image-wrap">
+  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
+</div><!-- /.image-wrap -->{% endif %}

 <div class="article-author-top">
  {% include author-bio.html %}
 </div>

 <div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
+  <h1 itemprop="name">{{ page.title }}</h1>
  {% for post in site.posts %}  
  {% unless post.next %}
    <h3>{{ post.date | date: '%Y' }}</h3>
-    <hr />
    {% else %}
      {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
      {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
      {% if year != nyear %}
        <h3>{{ post.date | date: '%Y' }}</h3>
-        <hr />
      {% endif %}
    {% endunless %}
    <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -9,12 +9,13 @@

 <body class="article" itemscope itemtype="http://schema.org/WebPage">

-{% include chrome-frame.html %}
+{% include browser-upgrade.html %}

 {% include navigation.html %}

 {% if page.image.feature %}<div class="image-wrap">
  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
 </div><!-- /.image-wrap -->{% endif %}

 <div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
@ -23,7 +24,7 @@
  </div>
  <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
    <div class="headline-wrap">
-      <h1 itemprop="headline">{{ page.title }}</h1>
+      <h1 itemprop="name">{{ page.title }}</h1>
      <h2>{{ page.tagline }}</h2>
    </div><!--/ .headline-wrap -->
    <div class="article-wrap" itemprop="text">
@ -40,7 +41,7 @@
 </div><!-- /#main -->

 <div class="footer-wrap">
-  {% if site.related_posts.size %}<div class="related-articles">
+  {% if site.related_posts.size > 0 %}<div class="related-articles">
  <h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/articles">View all articles</a>)</small></h4>
    <ul>
    {% for post in site.related_posts limit:3 %}
--- a/_posts/2011-03-10-sample-post.md
+++ b/_posts/2011-03-10-sample-post.md
@ -7,6 +7,8 @@ category: articles
 tags: [intro, beginner, jekyll, tutorial]
 image:
  feature: texture-feature-05.jpg
+  credit: Texture Lovers
+  creditlink: http://texturelovers.com
 ---

 <section id="table-of-contents" class="toc">
@ -40,7 +42,7 @@ Below is just about everything you'll need to style in the theme. Check the sour
 Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.

 ![Smithsonian Image]({{ site.url }}/images/3953273590_704e3899d5_m.jpg)
-{: .pull-right}
+{: .image-pull-right}

 *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.

@ -93,10 +95,4 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c

 Make any link standout more when applying the `.btn` class.

-<div markdown="0"><a href="#" class="btn">This is a button</a></div>
-
-<div markdown="0"><a href="#" class="btn btn-inverse">This is an inverse button</a></div>
-
-<div markdown="0"><a href="#" class="btn btn-small">This is small button</a></div>
-
-<div markdown="0"><a href="#" class="btn btn-inverse btn-small">Small inverse button</a></div>
+<div markdown="0"><a href="#" class="btn">This is a button</a></div>
--- a/_posts/2013-05-23-readability-feature-post.md
+++ b/_posts/2013-05-23-readability-feature-post.md
@ -7,6 +7,8 @@ category: articles
 tags: [sample post, readability, test]
 image:
  feature: texture-feature-04.jpg
+  credit: Texture Lovers
+  creditlink: http://texturelovers.com
 ---

 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.
--- a/_posts/2013-08-16-code-highlighting-post.md
+++ b/_posts/2013-08-16-code-highlighting-post.md
@ -0,0 +1,114 @@
+---
+layout: post
+title: Syntax Highlighting Post
+description: "Demo post displaying the various ways of highlighting code in Markdown."
+category: articles
+tags: [sample post, code, highlighting]
+---
+
+[Syntax highlighting](http://en.wikipedia.org/wiki/Syntax_highlighting) is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.
+
+### Pygments Code Blocks
+
+To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`.
+
+{% highlight css %}
+#container {
+    float: left;
+    margin: 0 -240px 0 0;
+    width: 100%;
+}
+{% endhighlight %}
+
+Line numbering enabled:
+
+{% highlight html linenos %}
+{% raw %}
+<nav class="pagination" role="navigation">
+    {% if page.previous %}
+        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+    {% endif %}
+    {% if page.next %}
+        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+    {% endif %}
+</nav><!-- /.pagination -->
+{% endraw %}
+{% endhighlight %}
+
+{% highlight ruby %}
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}"
+      self.data['description'] = "An archive of posts tagged #{tag}."
+    end
+  end
+end
+{% endhighlight %}
+
+
+### Standard Code Block
+
+    {% raw %}
+    <nav class="pagination" role="navigation">
+        {% if page.previous %}
+            <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+        {% endif %}
+        {% if page.next %}
+            <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+        {% endif %}
+    </nav><!-- /.pagination -->
+    {% endraw %}
+
+
+### Fenced Code Blocks
+
+To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`.
+
+~~~ css
+#container {
+    float: left;
+    margin: 0 -240px 0 0;
+    width: 100%;
+}
+~~~
+
+~~~ html
+{% raw %}<nav class="pagination" role="navigation">
+    {% if page.previous %}
+        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+    {% endif %}
+    {% if page.next %}
+        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+    {% endif %}
+</nav><!-- /.pagination -->{% endraw %}
+~~~
+
+~~~ ruby
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}"
+      self.data['description'] = "An archive of posts tagged #{tag}."
+    end
+  end
+end
+~~~
--- a/about.md
+++ b/about.md
@ -6,6 +6,8 @@ tagline: Minimal Mistakes, a Jekyll Theme
 tags: [about, Jekyll, theme, responsive]
 image:
  feature: texture-feature-02.jpg
+  credit: Texture Lovers
+  creditlink: http://texturelovers.com
 ---

 Jekyll is pretty rad and figured releasing a cleaned up version of [my site](http://mademistakes.com) as a theme for others to hack and build on would be fun. So here be that theme --- I call it **Minimal Mistakes**, a responsive Jekyll theme with large featured images and solid typography. 
--- a/articles.md
+++ b/articles.md
@ -4,6 +4,4 @@ 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/less/1382.less
+++ b/assets/less/1382.less
@ -18,6 +18,9 @@
 		.prefix(12,1);
 	}
 }
+.image-credit {
+	.grid(12,8.5);
+}
 #main article {
 	.grid(12,4.5);
 }
--- a/assets/less/480.less
+++ b/assets/less/480.less
@ -3,6 +3,14 @@
 // TEXTURE ====================================================
 // ELEMENTS ===================================================
 // LAYOUT =====================================================
+.article-author-top,
+.article-author-bottom {
+	.transition(all .2s ease);
+	.opacity(.7);
+	&:hover {
+		.opacity(1);
+	}
+}
 .image-grid {
 	li {
 		width: 33.333333%;
--- a/assets/less/600.less
+++ b/assets/less/600.less
@ -1,7 +1,4 @@
 // ROOT =======================================================
-html {
-	font-size: 95%;
-}
 // TYPOGRAPHY =================================================
 // TEXTURE ====================================================
 // ELEMENTS ===================================================
@ -23,6 +20,11 @@ html {
 .image-wrap .headline-wrap {
 	margin-left: 0;
 }
+.image-credit {
+	.grid(12,9);
+	.prefix(12,0);
+	.suffix(12,0);
+}
 #main article {
 	.grid(12,6);
 	.prefix(12,0);
--- a/assets/less/768.less
+++ b/assets/less/768.less
@ -1,7 +1,4 @@
 // ROOT =======================================================
-html {
-	font-size: 100%;
-}
 // TYPOGRAPHY =================================================
 // TEXTURE ====================================================
 // ELEMENTS ===================================================
--- a/assets/less/992.less
+++ b/assets/less/992.less
@ -1,11 +1,16 @@
 // ROOT =======================================================
-html {
-	font-size: 112.5%;
-}
 // TYPOGRAPHY =================================================
 // TEXTURE ====================================================
 // ELEMENTS ===================================================
 // LAYOUT =====================================================
+.article-author-top,
+.article-author-bottom {
+	img.bio-photo {
+		width: 150px;
+		height: 150px;
+		.rounded(150px);
+	}
+}
 /* Image Grid ============================================== */
 .image-grid {
 	li {
--- a/assets/less/coderay.less
+++ b/assets/less/coderay.less
@ -1,14 +1,13 @@
 .CodeRay {
  background-color: #efefef;
-  font-family: @codefont;
-  font-size: 80%;
+  font-family: @code-font;
+  .font(12);
  color: #333332;
  margin-bottom: 1.5em;
-}
-
-.CodeRay pre {
-  margin: 0px;
-  padding: 1em;
+  pre {
+    margin: 0px;
+    padding: 1em;
+  }
 }

 div.CodeRay { }
--- a/assets/less/elements.less
+++ b/assets/less/elements.less
@ -38,49 +38,26 @@ svg:not(:root) {
    .grid(12,12);
  }
 }
-/* Buttons =============================================== */
+/* Buttons ============================================== */
 .btn {
  display: inline-block;
-  *display: inline;
-  /* IE7 inline-block hack */
-  *zoom: 1;
-  padding: 12px 24px;
-  margin-bottom: 2em;
-  line-height: 1;
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-  border: 4px double @textcolor;
-  .rounded(50px);
-  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;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  .font-rem(14);
  background-color: @black;
+  color: @white;
+  border: 2px solid @black !important;
+  .rounded(20px);
  &:visited {
    color: @white;
-    border-color: @white;
  }
  &:hover {
-    color: @white;
-    border-color: @white;
+    background-color: @white;
+    color: @black;
+  }
+  &:active {
+    .translate(0, 2px);
  }
-}
-.btn-small {
-  font-size: 60%;
-  padding: 6px 12px;
 }
 /* Well ================================================= */
 .well {
--- a/assets/less/forms.less
+++ b/assets/less/forms.less
@ -40,7 +40,7 @@ input,
 button,
 select,
 textarea {
-	font-family: @basefont; 
+	font-family: @base-font; 
 	.box-sizing(border-box); 
 }
 label {
--- a/assets/less/ie.less
+++ b/assets/less/ie.less
@ -11,8 +11,6 @@
 /* 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";
--- a/assets/less/main.less
+++ b/assets/less/main.less
@ -11,11 +11,11 @@
 /* Site wide styles (html, body, global classes) =========== */
@import "site.less";
 // TYPOGRAPHY =================================================
-/* Typeplate.com typographic starter pack ================== */
-@import "typeplate.less";
@import "typography.less";
 /* Pygments Syntax highlighting ============================= */
@import "pygments.less";
+// Coderay Syntax highlighting ===============================
+@import "coderay.less";
 // MIXINS =====================================================
@import "mixins.less";
@import "grid.less";
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@ -1,76 +1,126 @@
-// ===========================================================
+// UTILITY MIXINS
+// --------------------------------------------------

-// 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
+// Clearfix
+// --------------------
+// For clearing floats like a boss h5bp.com/q
+.clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}

-// ===========================================================/
+// Webkit-style focus
+// --------------------
+.tab-focus() {
+  // Default
+  outline: thin dotted #333;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}

-// ROOT =====================================================
-// TYPOGRAPHY ===============================================
-.font-size(@font-size: 16){
-@rem: (@font-size / 10);
-font-size : @font-size * 1px;
-font-size : ~"@{rem}rem"; }
+// Center-align a block level element
+// ----------------------------------
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

-.lineheight(@font-size: 16){
-@rem: (@font-size / 10);
-line-height: @font-size * 1px;
-line-height: ~"@{rem}rem"; }
+// TYPOGRAPHY
+// --------------------------------------------------
+
+// Full-fat vertical rhythm
+// ------------------------
+.font-size(@size) {
+  font-size: 0px + @size;
+  font-size: 0rem + @size / @doc-font-size;
+  line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
+  margin-bottom: 0px + @doc-line-height;
+  margin-bottom: 0rem + (@doc-line-height / @doc-font-size);
+}
+
+// Just the REMs
+// -------------
+.font-rem(@size) {
+  font-size: 0px + @size;
+  font-size: 0rem + @size / @doc-font-size;
+}
+
+// Just font-size and line-height
+// ------------------------------
+.font(@size) {
+  font-size: 0px + @size;
+  font-size: 0rem + @size / @doc-font-size;
+  line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
+}

 .text-overflow() {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap; }

-// COLOR ====================================================
-// TEXTURE ==================================================
-/* Gradients ============================================= */
+@indent-var: 0rem + (@doc-line-height / @doc-font-size);
+
+// 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-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-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-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-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(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); ====================================== */
+// ROUND CORNERS
+// --------------------------------------------------
+
+// .rounded(VALUE);
 .rounded(@radius:4px) {
 -webkit-border-radius : @radius;
 -moz-border-radius : @radius;
 border-radius : @radius; }

-/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */
+// .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;
@ -88,29 +138,32 @@ border-top-left-radius : @topleft;
 -moz-background-clip : padding;  
 background-clip : padding-box; }

-/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */
+// .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(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();
 .text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
 text-shadow : @shadow; }

-/* .opacity(VALUE); ======================================= */
+// .opacity(VALUE);
 .opacity(@opacity : .5) {
 -webkit-opacity : @opacity;
 -moz-opacity : @opacity;
 opacity : @opacity; }

-/* .rotate(VALUEdeg); ===================================== */
+// TRANSFORMATIONS
+// --------------------------------------------------
+
+// .rotate(VALUEdeg);
 .rotate(@deg) {
 -webkit-transform : rotate(@deg);
 -moz-transform : rotate(@deg);
@ -118,7 +171,7 @@ opacity : @opacity; }
 -o-transform : rotate(@deg);
 transform : rotate(@deg); }

-/* .scale(VALUE); ========================================= */
+// .scale(VALUE);
 .scale(@ratio) {
 -webkit-transform : scale(@ratio);
 -moz-transform : scale(@ratio);
@ -126,7 +179,7 @@ transform : rotate(@deg); }
 -o-transform : scale(@ratio);
 transform : scale(@ratio); }

-/* .skew(VALUE, VALUE); =================================== */
+// .skew(VALUE, VALUE);
 .skew(@x: 0, @y: 0) {
 -webkit-transform : skew(@x, @y);
 -moz-transform : skew(@x, @y);
@ -134,7 +187,7 @@ transform : scale(@ratio); }
 -o-transform : skew(@x, @y);
 transform : skew(@x, @y); }

-/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
+// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
 .transition(@transition) {
 -webkit-transition : @transition;
 -moz-transition : @transition;
@ -142,7 +195,7 @@ transform : skew(@x, @y); }
 -o-transition : @transition;
 transition : @transition; }

-/* .translate(VALUE, VALUE) =============================== */
+// .translate(VALUE, VALUE)
 .translate(@x: 0, @y: 0) {
 -webkit-transform : translate(@x, @y);
 -moz-transform : translate(@x, @y);
@ -157,51 +210,46 @@ transform : translate(@x, @y); }
 -o-transform : translate(@x, @y, @z);
 transform : translate(@x, @y, @z); }

-// ELEMENTS ==================================================
-/* .background-alpha(VALUE VALUE); ======================== */
+.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
+  -webkit-animation: @name @duration @delay @ease;
+  -moz-animation:    @name @duration @delay @ease;
+  -ms-animation:     @name @duration @delay @ease;
+}
+
+// BACKGROUND
+// --------------------------------------------------
+
+// .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(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(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(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 ================================== */
+// For image replacement
 .hide-text() {
 text-indent : 100%;
 white-space : nowrap;
 overflow : hidden; }

-/* Hide from visual and speaking browsers ================= */
+// Hide from visual and speaking browsers
 .hidden() {
 display : none !important; 
 visibility : hidden; }
@ -210,23 +258,23 @@ visibility : hidden; }
  visibility: hidden;
 }

-/* Hide but maintain layout =============================== */
+// Hide but maintain layout
 .invisible() { 
 visibility : hidden; }

-/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
+// .resize(VALUE) (none, both, horizontal, vertical, inherit)
 .resize(@direction: both) {
 resize : @direction;
 overflow : auto; }

-/* .userselect(VALUE) (all, element, none, text) ========== */
+// .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 ============== */
+// Hidden but available to speaking browsers
 .visuallyhidden() { 
 overflow : hidden; 
 position : absolute;
@ -237,7 +285,7 @@ margin : -1px;
 padding : 0; 
 border : 0; }

-/* Make visuallyhidden focusable with a keyboard ========== */
+// Make visuallyhidden focusable with a keyboard
 .visuallyhidden.focusable:active, 
 .visuallyhidden.focusable:focus { 
 position : static;
@ -245,55 +293,4 @@ 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; }
+overflow: visible; }
--- a/assets/less/normalize.less
+++ b/assets/less/normalize.less
@ -171,7 +171,7 @@ samp {
 */

 pre {
-    white-space: pre-wrap;
+    white-space: pre;
 }

 /**
--- a/assets/less/page.less
+++ b/assets/less/page.less
@ -1,13 +1,12 @@
-html {
+body {
 	background-color: @bodycolor;
-	font-family: @basefont;
+	font-family: @base-font;
 	font-color: @textcolor;
-	font-size: 90%;
 }
 .navigation-wrapper {
 	.container();
 	padding: 2em 0 3em;
-	font-family: @baseheadingfont;
+	font-family: @heading-font;
 	font-weight: 700;
 	text-transform: uppercase;
 }
@ -62,10 +61,16 @@ html {
 	.prefix(12,1);
 	.suffix(12,1);
 	margin-bottom: 2em;
+	h3 {
+		margin: 0;
+		padding-bottom: .5em;
+		.font-rem(28);
+		border-bottom: 1px solid lighten(@black,70);
+	}
 	article {
 		h2 {
-			.delta();
 			margin-bottom: 0;
+			.font-rem(24);
 		}
 		p+p {
 			text-indent: 0;
@ -101,31 +106,14 @@ html {
 		}
 	}
 }
-.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;
+	h3 {
+		margin-bottom: 0;
 	}
 	p {
 		font-size: 80%;
@ -135,17 +123,54 @@ html {
 		border-bottom: 0 solid transparent;
 	}
 	img.bio-photo {
+		width: 100px;
+		height: 100px;
 		.rounded(100px);
 	}
 }
+.author-social {
+  display: block;
+  margin-bottom: 5px;
+  .font-rem(14);
+  color: @black;
+  &:visited {
+    color: @black;
+  }
+  &:hover {
+    .scale(1.1);
+  }
+  &:active {
+    .translate(0, 2px);
+  }
+}
 .article-author-top {
 	display: none;
+	text-align: center;
 }
 .article-author-bottom {
+	margin-bottom: 1em;
 	.bio-photo {
 		float: left;
 		margin-right: 25px;
 	}
+	.author-social {
+		display: inline-block;
+		margin-right: 5px;
+	}
+}
+.article-wrap {
+	// Dotted line underlines for links
+	p > a,
+	li > a {
+		border-bottom: 1px dotted lighten(@link-color, 50);
+		&:hover {
+			border-bottom-style: solid;
+		}
+	}
+	p > a.reversefootnote, 
+	li > a.reversefootnote {
+		border-bottom-width: 0;
+	}
 }
 .toc {
 	display: none;
@ -176,7 +201,7 @@ html {
 		display: block;
 		margin: 0;
 		padding: 0;
-		font-family: @baseheadingfont;
+		font-family: @heading-font;
 		border-bottom: 1px solid darken(@white, 50);
 		&:last-child {
 			border-bottom: 0 solid transparent;
@ -223,7 +248,7 @@ html {
 	}
 }
 .holder {
-	font-family: @baseheadingfont;
+	font-family: @heading-font;
 	a {
 		cursor: pointer;
 		margin: 0 5px;
@ -267,9 +292,13 @@ html {
 	p,
 	h4,
 	h5,
-	h6 {
+	h6,
+	span {
 		color: darken(@white, 25);
 	}
+	span { 
+		.font-rem(14);
+	}
 	a {
 		border-bottom: 0 solid transparent;
 		&:hover {
@ -287,8 +316,9 @@ html {
 	.grid(12,10);
 	.prefix(12,1);
 	.suffix(12,1);
+	margin-bottom: 2em;
 	h4 {
-		.epsilon();
+		
 		text-transform: uppercase;
 		margin-bottom: 0;
 	}
@ -302,7 +332,6 @@ html {
 		display: inline-block;
 		padding-right: 5px;
 		a {
-			.delta();
 			color: lighten(@basecolor, 40%);
 			.transition(.4s linear);
 			&:hover {
@ -335,7 +364,10 @@ html {
 		}
 	}
 }
-.chrome-frame {
+
+// Browser Upgrade
+// --------------------------------------------------
+.browser-upgrade {
 	background: #000;
 	text-align: center;
 	margin: 0 0 2em 0;
@ -350,4 +382,34 @@ html {
 			border-bottom: 1px solid @white;
 		}
 	}
+}
+
+// Google Search
+// --------------------------------------------------
+#goog-fixurl {
+	ul {
+		list-style: none;
+		margin-left: 0;
+		padding-left: 0;
+		li {
+			list-style-type: none;
+		}
+	}
+}
+#goog-wm-qt {
+	width: auto;
+	margin-right: 10px;
+	margin-bottom: 20px;
+	padding: 8px 20px;
+	display: inline-block;
+	.font-rem(14);
+	background-color: @white;
+	color: @black;
+	border-width: 2px !important;
+	border-style: solid !important;
+	border-color: lighten(@black,50);
+	.rounded(3px);
+}
+#goog-wm-sb {
+	.btn();
 }
--- a/assets/less/pygments.less
+++ b/assets/less/pygments.less
@ -1,74 +1,74 @@
 .highlight {
-  background-color: #efefef;
-  font-family: @codefont;
-  font-size: 80%;
-  color: #333332;
-  margin-bottom: 1.5em;
-}
-
-.highlight pre {
-  margin: 0px;
-  padding: 1em;
-}
-
-.hll { background-color: #ffffcc }
-.c { color: #999988; font-style: italic } /* Comment */
-.err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.k { color: #000000; font-weight: bold } /* Keyword */
-.o { color: #000000; font-weight: bold } /* Operator */
-.cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
-.c1 { color: #999988; font-style: italic } /* Comment.Single */
-.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.ge { color: #000000; font-style: italic } /* Generic.Emph */
-.gr { color: #aa0000 } /* Generic.Error */
-.gh { color: #999999 } /* Generic.Heading */
-.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.go { color: #888888 } /* Generic.Output */
-.gp { color: #555555 } /* Generic.Prompt */
-.gs { font-weight: bold } /* Generic.Strong */
-.gu { color: #aaaaaa } /* Generic.Subheading */
-.gt { color: #aa0000 } /* Generic.Traceback */
-.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
-.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
-.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
-.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
-.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
-.kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.m { color: #009999 } /* Literal.Number */
-.s { color: #d01040 } /* Literal.String */
-.na { color: #008080 } /* Name.Attribute */
-.nb { color: #0086B3 } /* Name.Builtin */
-.nc { color: #445588; font-weight: bold } /* Name.Class */
-.no { color: #008080 } /* Name.Constant */
-.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
-.ni { color: #800080 } /* Name.Entity */
-.ne { color: #990000; font-weight: bold } /* Name.Exception */
-.nf { color: #990000; font-weight: bold } /* Name.Function */
-.nl { color: #990000; font-weight: bold } /* Name.Label */
-.nn { color: #555555 } /* Name.Namespace */
-.nt { color: #000080 } /* Name.Tag */
-.nv { color: #008080 } /* Name.Variable */
-.ow { color: #000000; font-weight: bold } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #009999 } /* Literal.Number.Float */
-.mh { color: #009999 } /* Literal.Number.Hex */
-.mi { color: #009999 } /* Literal.Number.Integer */
-.mo { color: #009999 } /* Literal.Number.Oct */
-.sb { color: #d01040 } /* Literal.String.Backtick */
-.sc { color: #d01040 } /* Literal.String.Char */
-.sd { color: #d01040 } /* Literal.String.Doc */
-.s2 { color: #d01040 } /* Literal.String.Double */
-.se { color: #d01040 } /* Literal.String.Escape */
-.sh { color: #d01040 } /* Literal.String.Heredoc */
-.si { color: #d01040 } /* Literal.String.Interpol */
-.sx { color: #d01040 } /* Literal.String.Other */
-.sr { color: #009926 } /* Literal.String.Regex */
-.s1 { color: #d01040 } /* Literal.String.Single */
-.ss { color: #990073 } /* Literal.String.Symbol */
-.bp { color: #999999 } /* Name.Builtin.Pseudo */
-.vc { color: #008080 } /* Name.Variable.Class */
-.vg { color: #008080 } /* Name.Variable.Global */
-.vi { color: #008080 } /* Name.Variable.Instance */
-.il { color: #009999 } /* Literal.Number.Integer.Long */
+	background-color: #efefef;
+	font-family: @code-font;
+	.font(12);
+	color: #333332;
+	margin-bottom: 1.5em;
+	pre {
+		position: relative;
+		margin: 0;
+		padding: 1em;
+	}
+	.lineno { padding-right: 24px; color: lighten(#333332,50);}
+	.hll { background-color: #ffffcc }
+	.c { color: #999988; font-style: italic } /* Comment */
+	.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+	.k { color: #000000; font-weight: bold } /* Keyword */
+	.o { color: #000000; font-weight: bold } /* Operator */
+	.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+	.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+	.c1 { color: #999988; font-style: italic } /* Comment.Single */
+	.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+	.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+	.ge { color: #000000; font-style: italic } /* Generic.Emph */
+	.gr { color: #aa0000 } /* Generic.Error */
+	.gh { color: #999999 } /* Generic.Heading */
+	.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+	.go { color: #888888 } /* Generic.Output */
+	.gp { color: #555555 } /* Generic.Prompt */
+	.gs { font-weight: bold } /* Generic.Strong */
+	.gu { color: #aaaaaa } /* Generic.Subheading */
+	.gt { color: #aa0000 } /* Generic.Traceback */
+	.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+	.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+	.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+	.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+	.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+	.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+	.m { color: #009999 } /* Literal.Number */
+	.s { color: #d01040 } /* Literal.String */
+	.na { color: #008080 } /* Name.Attribute */
+	.nb { color: #0086B3 } /* Name.Builtin */
+	.nc { color: #445588; font-weight: bold } /* Name.Class */
+	.no { color: #008080 } /* Name.Constant */
+	.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+	.ni { color: #800080 } /* Name.Entity */
+	.ne { color: #990000; font-weight: bold } /* Name.Exception */
+	.nf { color: #990000; font-weight: bold } /* Name.Function */
+	.nl { color: #990000; font-weight: bold } /* Name.Label */
+	.nn { color: #555555 } /* Name.Namespace */
+	.nt { color: #000080 } /* Name.Tag */
+	.nv { color: #008080 } /* Name.Variable */
+	.ow { color: #000000; font-weight: bold } /* Operator.Word */
+	.w { color: #bbbbbb } /* Text.Whitespace */
+	.mf { color: #009999 } /* Literal.Number.Float */
+	.mh { color: #009999 } /* Literal.Number.Hex */
+	.mi { color: #009999 } /* Literal.Number.Integer */
+	.mo { color: #009999 } /* Literal.Number.Oct */
+	.sb { color: #d01040 } /* Literal.String.Backtick */
+	.sc { color: #d01040 } /* Literal.String.Char */
+	.sd { color: #d01040 } /* Literal.String.Doc */
+	.s2 { color: #d01040 } /* Literal.String.Double */
+	.se { color: #d01040 } /* Literal.String.Escape */
+	.sh { color: #d01040 } /* Literal.String.Heredoc */
+	.si { color: #d01040 } /* Literal.String.Interpol */
+	.sx { color: #d01040 } /* Literal.String.Other */
+	.sr { color: #009926 } /* Literal.String.Regex */
+	.s1 { color: #d01040 } /* Literal.String.Single */
+	.ss { color: #990073 } /* Literal.String.Symbol */
+	.bp { color: #999999 } /* Name.Builtin.Pseudo */
+	.vc { color: #008080 } /* Name.Variable.Class */
+	.vg { color: #008080 } /* Name.Variable.Global */
+	.vi { color: #008080 } /* Name.Variable.Instance */
+	.il { color: #009999 } /* Literal.Number.Integer.Long */
+}
--- a/assets/less/site.less
+++ b/assets/less/site.less
@ -18,7 +18,11 @@
 	float: left;
 }
 .pull-right {
-	float:right;
+	float: right;
+}
+.image-pull-right {
+	float: right;
+	margin-top: 0;
 }
 .clearfix {
 	*zoom: 1;
@ -38,4 +42,9 @@
 	li {
 		list-style-type: none;
 	}
+}
+
+/* Global Transition ==================================== */
+b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
+	.transition(all .2s ease);
 }
--- a/assets/less/typeplate.less
+++ b/assets/less/typeplate.less
@ -1,727 +0,0 @@
-/*!
-+---------------------------------------------------------------------+
-|        _                               _         _                  |
-|       | |_  _   _  _ __    ___  _ __  | |  __ _ | |_  ___           |
-|       | __|| | | || '_ \  / _ \| '_ \ | | / _` || __|/ _ \          |
-|       | |_ | |_| || |_) ||  __/| |_) || || (_| || |_|  __/          |
-|        \__| \__, || .__/  \___|| .__/ |_| \__,_| \__|\___|          |
-|             |___/ |_|          |_|                                  |
-|                                                                     |
-|                                                                     |
-| 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
@ -1,25 +1,48 @@
-/* Headings ============================================== */
-h1, h2, h3, h4, h5, h6 {
-	font-family: @baseheadingfont;
-	font-weight: 700;
-}
-h6 {
-	font-weight: 400;
+// Body
+// --------------------------------------------------
+body {
+	font-family: @base-font;
+	color: @text-color;
 }

-/* Links ================================================= */
+// Headings
+// --------------------------------------------------
+h1, h2, h3, h4, h5, h6 {
+	font-family: @heading-font;
+}
+h1 {
+	.font-size(32)
+}
+h2 {
+	.font-size(28)
+}
+h3 {
+	.font-size(24)
+}
+h4 {
+	.font-size(18)
+}
+h5 {
+	.font-size(16)
+}
+h6 {
+	.font-size(14);
+}
+
+// Links
+// --------------------------------------------------
 a { 
 	text-decoration: none;
-	color: @linkcolor; 
+	color: @link-color; 
 	&:visited { 
-		color: @linkcolorvisited; 
+		color: lighten(@link-color, 20); 
 	}
 	&:hover { 
-		color: @linkcolorhover; 
+		color: darken(@link-color, 20); 
 	}
 	&:focus { 
 		outline: thin dotted; 
-		color: @linkcolorfocus; 
+		color: darken(@link-color, 20);
 	}
 	&:hover, 
 	&:active { 
@ -27,88 +50,94 @@ a {
 	}
 }

-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 ===================================== */
+// Figures
+// --------------------------------------------------
 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) ": ";
+	padding-top: 10px;
+	.font(14);
+	line-height: 1.3;
+	color: lighten(@text-color, 10);
+}
+
+// Feature Image Caption
+// --------------------------------------------------
+.image-credit {
+	.grid(12,10);
+	.prefix(12,1);
+	.suffix(12,1);
+	display: block;
+	text-align: right;
+	.font(12);
+	line-height: 1.3;
+	font-style: italic;
+	color: lighten(@text-color, 30);
+	a {
+		color: lighten(@text-color, 30);
 	}
 }

-/* Notice ============================================== */
+// Note text
+// --------------------------------------------------
 .notice {
 	margin-top: 1.5em;
 	padding: .5em 1em;
 	text-indent: 0;
-	font-size: 90%;
-	background-color: #ddd;
-	border-left: 10px solid #ccc;
+	.font-rem(14);
+	background-color: @body-color;
+	border: 1px solid darken(@body-color,20);
+	.rounded(3px);
 }
-/* Blockquote =========================================== */
+
+// Blockquotes
+// --------------------------------------------------
 blockquote {
+	margin-left: -28px;
+	padding-left: 20px;
+	border-left: 8px solid @border-color;
+	font-family: @alt-font;
 	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;
+	.font-rem(24);
+}
+
+// Footnotes
+// --------------------------------------------------
+.footnotes {
+	ol, li, p {
+		.font-size(14);
 	}
 }
-/* Footnotes ============================================= */
-.footnotes {
-	font-size: 90%;
+
+// Paragraphs
+// --------------------------------------------------
+p {
+	margin: 0 0 @indent-var;
+	& + p {
+		//siblings indentation
+		text-indent: @indent-var;
+		margin-top: -(@indent-var);
+	}
 }
-/* Code ================================================== */
+
+// Code
+// --------------------------------------------------
 tt, code, kbd, samp, pre {
-	font-family: @codefont;
+	font-family: @code-font;
+}
+p,
+li { 
+	code {
+		.font-rem(12);
+		line-height: 1.5;
+		white-space: nowrap;
+		margin: 0 2px;
+		padding: 0 5px;
+		border: 1px solid lighten(@black, 90);
+		background-color: lighten(@black, 95);
+		.rounded(3px);
+	}
+}
+pre {
+	.font-rem(12);
+	line-height: 1.5;
+	overflow-x: auto;
 }
-p code {
-	font-size: 80%;
-	white-space: nowrap;
-	margin: 0 2px;
-	padding: 0 5px;
-	border: 1px solid lighten(@black, 90);
-	background-color: lighten(@black, 95);
-	.rounded(3px);
-}
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@ -1,19 +1,26 @@
 // TYPOGRAPHY ================================================
-@basefont: 'PT Serif', serif;
-@baseheadingfont: 'PT Sans Narrow', sans-serif;
-@codefont: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+@doc-font-size: 16;
+@doc-line-height: 26;
+@base-font: 'PT Serif', serif;
+@heading-font: 'PT Sans Narrow', sans-serif;
+@code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+@alt-font: @base-font;

 // COLOR ====================================================
@bodycolor      : #fff;
+@body-color: @bodycolor;
@textcolor      : #333332;
+@text-color     : @textcolor;
+@border-color: @text-color;
@basecolor 		: #343434;	  
@compcolor 		: spin(@basecolor, 180); 
@bordercolor    : @basecolor;
@white          : #fff;
-@black          : #000;
+@black          : #111;
@accentcolor    : @black;
 /* Links ================================================= */
@linkcolor 		    : #343434;
+@link-color: @linkcolor;
@linkcolorhover 	: darken(@linkcolor, 10);
@linkcolorvisited   : lighten(@linkcolorhover, 20);
@linkcolorfocus 	: darken(@linkcolorvisited, 10);
--- a/images/bio-photo.jpg
+++ b/images/bio-photo.jpg
--- a/index.md
+++ b/index.md
@ -4,4 +4,6 @@ description: "A responsive Jekyll theme with editorial tendencies by designer Mi
 tags: [Jekyll, theme, responsive, blog, template]
 image:
  feature: texture-feature-01.jpg
+  credit: Texture Lovers
+  creditlink: http://texturelovers.com
 ---
--- a/theme-setup.md
+++ b/theme-setup.md
@ -6,6 +6,8 @@ description: "Instructions on how to install and customize the Jekyll theme Mini
 tags: [Jekyll, theme, responsive]
 image:
  feature: texture-feature-02.jpg
+  credit: Texture Lovers
+  creditlink: http://texturelovers.com
 ---

 <section id="table-of-contents" class="toc">
@ -32,7 +34,7 @@ General notes and suggestions for customizing Minimal Mistakes.
 minimal-mistakes/
 ├── _includes
 |    ├── author-bio.html  //bio stuff goes here
-|    ├── chrome-frame.html  //displays on IE8 and less
+|    ├── browser-upgrade.html  //displays on IE8 and less
 |    ├── footer.html  //site footer
 |    ├── head.html  //site head
 |    ├── navigation.html //site top nav
@ -60,7 +62,7 @@ minimal-mistakes/

 ### _config.yml

-Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out `url` or else you will get a bunch of broken links because they are absolute and prefixed with `{{ site.url }}` in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**...
+Most of the variables found here are used in the .html files found in `_includes` if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out `url` or else you will get a bunch of broken links because they are absolute and prefixed with `{{ "{{ site.url " }}}}` in the various `_includes` and `_layouts`. Just remember to uncomment `url` when building for deployment or pushing to **gh-pages**...

 #### Owner/Author Information

@ -106,6 +108,15 @@ image:
  thumb: thumbnail-image.jpg #keep it square 200x200 px is good
 {% endhighlight %}

+If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
+
+{% highlight yaml %}
+image:
+  feature: feature-image-filename.jpg
+  credit: Michael Rose #name of the person or site you want to credit
+  creditlink: http://mademistakes.com #url to their site or licensing
+{% endhighlight %}
+
 #### 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.
				`@ -0,0 +1 @@`
				`<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->`
				`@ -1 +0,0 @@`
				`<!--[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]-->`