From 6f2e669873366c37503631b801f1fcb105e37e39 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Jul 2014 21:22:47 +0200
Subject: [PATCH] MEGA COMMIT, final stylus refactoring

---
 Gruntfile.js                                  |  11 +-
 _config.yml                                   |   4 +-
 _src/_includes/articles.html                  |  30 +-
 _src/_includes/comments.html                  |   2 +-
 _src/_includes/featured.html                  |  13 +
 _src/_includes/footer.html                    |  12 +-
 _src/_includes/header.html                    |  22 +-
 _src/_includes/sticky.html                    |  13 -
 _src/_layouts/link.html                       |   4 +-
 _src/_posts/2008-04-04-aperture-file-types.md |   2 +-
 _src/_posts/2008-06-01-chives.md              |   2 +-
 ...and-the-history-of-the-first-photograph.md |   2 +-
 ...3-niepces-camera-obscura-wallpaper-pack.md |   2 +-
 ...mac-file-server-and-time-machine-volume.md |   6 +-
 _src/_posts/2008-08-26-icy-box-icons.md       |   4 +-
 ...9-23-futurama-mars-university-wallpaper.md |   4 +-
 _src/_posts/2008-10-23-coffee-cup-icon.md     |   4 +-
 _src/_posts/2009-02-17-out-of-whale-oil.md    |   2 +-
 ...imate-coda-wordpress-share-link-bonanza.md |  22 +-
 _src/_posts/2009-06-04-twitter-crisp.md       |   2 +-
 _src/_posts/2009-06-24-adiumeetie.md          |   2 +-
 _src/_posts/2009-09-05-delibar.md             |   2 +-
 _src/_posts/2010-02-04-ipixelpad.md           |   2 +-
 _src/_posts/2010-07-03-momcorp.md             |   4 +-
 _src/_posts/2011-12-15-badged.md              |   4 +-
 _src/_posts/2012-05-15-wp-icons-template.md   |   2 +-
 ...2012-07-16-using-kbd-for-fun-and-profit.md |   4 +-
 _src/_posts/2012-08-07-projectpurple.md       |   4 +-
 _src/assets/less/alerts.less                  |  41 ---
 _src/assets/less/animations.less              |  52 ----
 _src/assets/less/buttons.less                 | 137 ----------
 _src/assets/less/code.less                    |  55 ----
 _src/assets/less/comments.less                |  17 --
 _src/assets/less/content-link.less            |  27 --
 _src/assets/less/content-photo.less           |  77 ------
 _src/assets/less/content-related.less         |  37 ---
 _src/assets/less/content.less                 | 191 -------------
 _src/assets/less/forms.less                   |  48 ----
 _src/assets/less/grid.less                    |  78 ------
 _src/assets/less/icons.less                   | 115 --------
 _src/assets/less/kremalicious3.less           |  72 -----
 _src/assets/less/media.less                   |  53 ----
 _src/assets/less/mixins.less                  | 258 ------------------
 _src/assets/less/navigation.less              | 246 -----------------
 _src/assets/less/page-404.less                |  73 -----
 _src/assets/less/page-about.less              |  41 ---
 _src/assets/less/poststyle-2300.less          | 102 -------
 _src/assets/less/print.less                   |  65 -----
 _src/assets/less/scaffolding.less             | 252 -----------------
 _src/assets/less/sticky.less                  |  40 ---
 _src/assets/less/syntax.less                  |  66 -----
 _src/assets/less/tables.less                  |  47 ----
 _src/assets/less/typography.less              | 226 ---------------
 _src/assets/less/utilities.less               | 105 -------
 _src/assets/less/variables.less               |  68 -----
 _src/assets/styl/alerts.styl                  |  26 +-
 _src/assets/styl/animations.styl              |  44 +++
 _src/assets/styl/buttons.styl                 | 142 +++++-----
 _src/assets/styl/code.styl                    |   6 +-
 _src/assets/styl/comments.styl                |  21 ++
 _src/assets/styl/content-featured.styl        |  33 +++
 _src/assets/styl/content-link.styl            |  19 ++
 _src/assets/styl/content-photo.styl           |  73 +++++
 _src/assets/styl/content-related.styl         |  35 +++
 _src/assets/styl/content.styl                 |  83 +++---
 _src/assets/styl/footer.styl                  |  76 ++++++
 _src/assets/styl/forms.styl                   |   2 +-
 _src/assets/styl/grid.styl                    |  70 +++--
 _src/assets/styl/header.styl                  |  75 +++++
 _src/assets/styl/icons.styl                   |  82 +++---
 _src/assets/styl/kremalicious3.styl           |  56 ++--
 _src/assets/styl/media.styl                   |  30 +-
 _src/assets/styl/mixins.styl                  | 110 +++++---
 _src/assets/styl/navigation.styl              | 148 ++++++++++
 _src/assets/styl/page-404.styl                |  68 +++++
 _src/assets/styl/page-about.styl              |  44 +++
 _src/assets/styl/poststyle-2300.styl          |  73 +++++
 _src/assets/styl/print.styl                   |  80 ++++++
 _src/assets/styl/scaffolding.styl             | 198 +-------------
 _src/assets/styl/search.styl                  |  62 +++++
 _src/assets/styl/tables.styl                  |  26 +-
 _src/assets/styl/typography.styl              | 139 +++++-----
 _src/assets/styl/variables.styl               |  16 +-
 _src/index.html                               |   8 +-
 84 files changed, 1353 insertions(+), 3268 deletions(-)
 create mode 100644 _src/_includes/featured.html
 delete mode 100644 _src/_includes/sticky.html
 delete mode 100644 _src/assets/less/alerts.less
 delete mode 100644 _src/assets/less/animations.less
 delete mode 100644 _src/assets/less/buttons.less
 delete mode 100644 _src/assets/less/code.less
 delete mode 100644 _src/assets/less/comments.less
 delete mode 100644 _src/assets/less/content-link.less
 delete mode 100644 _src/assets/less/content-photo.less
 delete mode 100644 _src/assets/less/content-related.less
 delete mode 100644 _src/assets/less/content.less
 delete mode 100644 _src/assets/less/forms.less
 delete mode 100644 _src/assets/less/grid.less
 delete mode 100644 _src/assets/less/icons.less
 delete mode 100644 _src/assets/less/kremalicious3.less
 delete mode 100644 _src/assets/less/media.less
 delete mode 100644 _src/assets/less/mixins.less
 delete mode 100644 _src/assets/less/navigation.less
 delete mode 100644 _src/assets/less/page-404.less
 delete mode 100644 _src/assets/less/page-about.less
 delete mode 100644 _src/assets/less/poststyle-2300.less
 delete mode 100644 _src/assets/less/print.less
 delete mode 100644 _src/assets/less/scaffolding.less
 delete mode 100644 _src/assets/less/sticky.less
 delete mode 100644 _src/assets/less/syntax.less
 delete mode 100644 _src/assets/less/tables.less
 delete mode 100644 _src/assets/less/typography.less
 delete mode 100644 _src/assets/less/utilities.less
 delete mode 100644 _src/assets/less/variables.less
 create mode 100644 _src/assets/styl/animations.styl
 create mode 100644 _src/assets/styl/comments.styl
 create mode 100644 _src/assets/styl/content-featured.styl
 create mode 100644 _src/assets/styl/content-link.styl
 create mode 100644 _src/assets/styl/content-photo.styl
 create mode 100644 _src/assets/styl/content-related.styl
 create mode 100644 _src/assets/styl/footer.styl
 create mode 100644 _src/assets/styl/header.styl
 create mode 100644 _src/assets/styl/navigation.styl
 create mode 100644 _src/assets/styl/page-404.styl
 create mode 100644 _src/assets/styl/page-about.styl
 create mode 100644 _src/assets/styl/poststyle-2300.styl
 create mode 100644 _src/assets/styl/print.styl
 create mode 100644 _src/assets/styl/search.styl

diff --git a/Gruntfile.js b/Gruntfile.js
index 97bfc6b3..a027f26e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -66,13 +66,14 @@ module.exports = function(grunt){
         stylus: {
             compile: {
                 options: {
-                    include css: true
-                }
+                    'include css': true,
+                    compress: false
+                },
                 files: {
                     '<%= config.site %>/<%= config.assets.css %>/kremalicious3.min.css' : '<%= config.src %>/<%= config.assets.stylus %>/kremalicious3.styl',
                     '<%= config.site %>/<%= config.assets.css %>/poststyle-2300.min.css' : '<%= config.src %>/<%= config.assets.stylus %>/poststyle-2300.styl'
-                },
-            },
+                }
+            }
         },
 
         // combine css media queries
@@ -167,7 +168,7 @@ module.exports = function(grunt){
             },
             stylus: {
                 files: ['<%= config.src %>/<%= config.assets.stylus %>/*.styl'],
-                tasks: ['stylus','cmq','cssmin']
+                tasks: ['stylus', 'cmq', 'cssmin']
             },
             js: {
                 files: ['<%= config.src %>/<%= config.assets.js %>/*.js'],
diff --git a/_config.yml b/_config.yml
index 295cd82c..181abe6b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -68,10 +68,10 @@ picture:
         width: "480"
       source_default:
         width: "320"
-    sticky:
+    featured:
       ppi: [1, 2]
       attr:
-        class: "sticky-image"
+        class: "featured-image"
         itemprop: "image"
       source_default:
         width: "190"
\ No newline at end of file
diff --git a/_src/_includes/articles.html b/_src/_includes/articles.html
index 3a2bb875..9489a6a7 100644
--- a/_src/_includes/articles.html
+++ b/_src/_includes/articles.html
@@ -5,7 +5,7 @@
     	<header>
     		<h1 class="entry-title">
                 <a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
-                    {{ post.title | titlecase }} <i class="icon-forward"></i>
+                    {{ post.title | titlecase }} <i class="icon icon-forward"></i>
                     <span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
                 </a>
             </h1>
@@ -14,7 +14,7 @@
         <section class="entry-content">
             {{ post.content | markdownify }}
     		<p>
-    			<a class="more-link" href="{{ post.linkurl }}">Go to source <i class="icon-forward"></i></a>
+    			<a class="more-link" href="{{ post.linkurl }}">Go to source <i class="icon icon-forward"></i></a>
                 <a class="permalink-link" href="{{ post.url | append: '/' }}" rel="tooltip" title="Permalink">&#8734;</a>
     		</p>
         </section>
@@ -26,58 +26,58 @@
 
         <a class="photo-link" href="{{ post.url }}">
         	<figure class="hmedia">
-            
+
                 {% picture {{ post.image }} %}
-            
+
         		<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
         	</figure>
         </a>
 
     </article>
 
-{% else %}                
-    
+{% else %}
+
     <article class="hentry format-post">
     	<header>
     		<h1 class="entry-title"><a href="{{ post.url | append: '/' }}">{{ post.title | titlecase }}</a></h1>
     	</header>
 
         <section class="entry-content">
-    
+
             {% if post.image %}
                 <a href="{{ post.url | append: '/' }}">
                     {% picture {{ post.image }} class="teaser" %}
                 </a>
             {% endif %}
-    
+
             {% capture has_more %}{{ post.content | has_more }}{% endcapture %}
-    
+
             {% if has_more == 'true' %}
-                {{ post.content | post.excerpt | excerpt | markdownify }}            
+                {{ post.content | post.excerpt | excerpt | markdownify }}
             {% else %}
                 {% unless post.categories contains "goodies" and page.path contains "goodies" %}
                     {{ post.excerpt | markdownify }}
                 {% endunless %}
             {% endif %}
-            
+
             {% if post.categories contains "goodies" and page.path contains "goodies" %}
                 <footer class="goodie-actions">
 
                     <p class="info col3">
-                        <a class="btn icon-info" href="{{ post.url | append: '/' }}">Release Post</a>
+                        <a class="btn icon icon-info" href="{{ post.url | append: '/' }}">Release Post</a>
                     </p>
 
                     {% if post.download %}
                     <p class="download col3">
-                        <a class="btn icon-download" href="/media/{{ post.download }}">Download <span>zip</span></a>
+                        <a class="btn icon icon-download" href="/media/{{ post.download }}">Download <span>zip</span></a>
                     </p>
                     {% endif %}
 
                 </footer>
             {% endif %}
-            
+
             {% unless page.path contains "goodies" %}
-                <a class="more-link" href="{{ post.url | append: '/' }}">Continue reading <i class="icon-arrow-right"></i></a>
+                <a class="more-link" href="{{ post.url | append: '/' }}">Continue reading <i class="icon icon-arrow-right"></i></a>
             {% endunless %}
 
         </section>
diff --git a/_src/_includes/comments.html b/_src/_includes/comments.html
index cb5a96da..ed924a9e 100644
--- a/_src/_includes/comments.html
+++ b/_src/_includes/comments.html
@@ -2,6 +2,6 @@
 <aside class="comments">
 
     <p>You should tweet this post</p>
-    <p class="btn-wrap"><a class="btn twitter-share icon-twitter" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom,ezeep">Tweet</a></p>
+    <p class="btn-wrap"><a class="btn twitter-share icon icon-twitter" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom,ezeep">Tweet</a></p>
 
 </aside>
\ No newline at end of file
diff --git a/_src/_includes/featured.html b/_src/_includes/featured.html
new file mode 100644
index 00000000..9a49a0f7
--- /dev/null
+++ b/_src/_includes/featured.html
@@ -0,0 +1,13 @@
+
+<aside class="row featured">
+    {% for post in site.posts %}
+        {% if post.featured %}
+        <article class="col2">
+            <a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
+                {% picture featured {{ post.image }} %}
+                <h1 class="featured-title">{{ post.title | titlecase }}</h1>
+            </a>
+        </article>
+        {% endif %}
+    {% endfor %}
+</aside>
\ No newline at end of file
diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html
index efa91d73..c48c128b 100644
--- a/_src/_includes/footer.html
+++ b/_src/_includes/footer.html
@@ -1,7 +1,7 @@
 <footer role="contentinfo" class="footer container">
-	
+
 	<div class="row">
-		
+
 		<div class="vcard author">
 			<img class="avatar photo" src="/assets/img/avatar.jpeg" />
 	        <p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author }}</a>
@@ -10,10 +10,10 @@
         <aside class="subscribe">
             <h1 class="subscribe-title">Subscribe</h1>
             <p>
-                <a class="btn rss icon-rss" href="http://kremalicious.com/feed"></a> 
-                <a class="btn twitter icon-twitter" href="https://twitter.com/kremaliciouscom"></a> 
-                <a class="btn google icon-googleplus" href="https://plus.google.com/100015950464424503954" rel="publisher"></a> 
-                <a class="btn facebook icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
+                <a class="btn rss icon icon-rss" href="http://kremalicious.com/feed"></a>
+                <a class="btn twitter icon icon-twitter" href="https://twitter.com/kremaliciouscom"></a>
+                <a class="btn google icon icon-googleplus" href="https://plus.google.com/100015950464424503954" rel="publisher"></a>
+                <a class="btn facebook icon icon-facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"></a>
             </p>
         </aside>
 	</div>
diff --git a/_src/_includes/header.html b/_src/_includes/header.html
index a36762f4..e007f325 100644
--- a/_src/_includes/header.html
+++ b/_src/_includes/header.html
@@ -1,7 +1,7 @@
 
 <div class="topbar container">
     <div class="row">
-        
+
         <header role="banner" class="banner">
         	<h1 class="banner-title">
         	    <a class="banner-logo" href="/">kremalicious</a>
@@ -9,23 +9,23 @@
         </header>
 
         <nav role="navigation" class="nav-main">
-            <a class="menu-btn icon-list" href="#"></a>
+            <a class="menu-btn icon icon-list" href="#"></a>
             <div class="nav-popover hide">
-                <a class="nav-link goodies icon-gift" href="/goodies/">goodies</a>
-                <a class="nav-link photos icon-pictures" href="/photos/">photos</a>
-                <a class="nav-link personal icon-user" href="/personal/">personal</a>
-                <a class="nav-link design icon-tools" href="/design/">design</a>
-                <a class="nav-link photography icon-camera" href="/photography/">photography</a>
+                <a class="nav-link goodies icon icon-gift" href="/goodies/">goodies</a>
+                <a class="nav-link photos icon icon-pictures" href="/photos/">photos</a>
+                <a class="nav-link personal icon icon-user" href="/personal/">personal</a>
+                <a class="nav-link design icon icon-tools" href="/design/">design</a>
+                <a class="nav-link photography icon icon-camera" href="/photography/">photography</a>
             </div>
         </nav>
-        
+
         <section class="site-search">
-            <a class="search-btn icon-search" href="#"></a>
+            <a class="search-btn icon icon-search" href="#"></a>
             <div class="search-area">
-                <input type="search" class="input-search search-field" placeholder="Search everything">
+                <input type="search" class="form-control input-search search-field" placeholder="Search everything">
                 <a class="search-close close" href="#">x</a>
             </div>
         </section>
-        
+
     </div>
 </div>
\ No newline at end of file
diff --git a/_src/_includes/sticky.html b/_src/_includes/sticky.html
deleted file mode 100644
index 5b7a1dba..00000000
--- a/_src/_includes/sticky.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-<aside class="row sticky">
-    {% for post in site.posts %}
-        {% if post.sticky %}
-        <article class="col2">
-            <a class="sticky-link" href="{{ post.url }}" title="{{ post.title }}">
-                {% picture sticky {{ post.image }} %}
-                <h1 class="sticky-title">{{ post.title | titlecase }}</h1>
-            </a>
-        </article>
-        {% endif %}
-    {% endfor %}
-</aside>
\ No newline at end of file
diff --git a/_src/_layouts/link.html b/_src/_layouts/link.html
index 0cf76de4..652dd1da 100644
--- a/_src/_layouts/link.html
+++ b/_src/_layouts/link.html
@@ -8,7 +8,7 @@ layout: base
     	<header>
     		<h1 class="entry-title">
                 <a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
-                    {{ page.title | titlecase }} <i class="icon-forward"></i>
+                    {{ page.title | titlecase }} <i class="icon icon-forward"></i>
                     <span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
                 </a>
             </h1>
@@ -17,7 +17,7 @@ layout: base
         <section class="entry-content">
             {{ content }}
     		<p>
-    			<a class="more-link" href="{{ page.linkurl }}">Go to source <i class="icon-forward"></i></a>
+    			<a class="more-link" href="{{ page.linkurl }}">Go to source <i class="icon icon-forward"></i></a>
                 <a class="permalink-link" href="{{ page.url | append: '/' }}" rel="tooltip" title="Permalink">&#8734;</a>
     		</p>
         </section>
diff --git a/_src/_posts/2008-04-04-aperture-file-types.md b/_src/_posts/2008-04-04-aperture-file-types.md
index 071f5e7e..65ff4379 100644
--- a/_src/_posts/2008-04-04-aperture-file-types.md
+++ b/_src/_posts/2008-04-04-aperture-file-types.md
@@ -21,6 +21,6 @@ These icons are free for your personal use and include icons for all file types
 
 Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
 
-<a class="btn btn-block icon-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
+<a class="btn btn-block icon icon-download" href="/media/aperturefiletypes_by_kremalicious.zip">Download</a>
 
 And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).
diff --git a/_src/_posts/2008-06-01-chives.md b/_src/_posts/2008-06-01-chives.md
index 6900c5eb..4ef1207c 100644
--- a/_src/_posts/2008-06-01-chives.md
+++ b/_src/_posts/2008-06-01-chives.md
@@ -17,6 +17,6 @@ I have added my first wallpaper to the Goodies section on this website. It's a s
 
 You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.
 
-<a class="btn btn-block icon-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
+<a class="btn btn-block icon icon-download" href="/media/chives_by_kremalicious.zip">Download Chives Wallpaper</a>
 
 Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).
diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md b/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
index 64069b42..913b2682 100644
--- a/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
+++ b/_src/_posts/2008-06-03-niepces-camera-obscura-and-the-history-of-the-first-photograph.md
@@ -88,7 +88,7 @@ Brief description of Daguerres role in the invention of photography process by T
 
 This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](http://www.kremalicious.com/goodies/) or directly via this link:
 
-<a class="btn btn-block icon-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
+<a class="btn btn-block icon icon-download" href="/media/niepces_camera_obscura_by_kremalicious.zip">Download </a>
 
 In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
 
diff --git a/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md b/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
index 30904ce6..2bcab602 100644
--- a/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
+++ b/_src/_posts/2008-06-03-niepces-camera-obscura-wallpaper-pack.md
@@ -17,7 +17,7 @@ In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have
 
 All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden ;-) To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro).
 
-<a class="btn btn-block icon-download" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
+<a class="btn btn-block icon icon-download" href="/media/niepces_camera_obscura_wallpaper_pack_by_kremalicious.zip">Download Niépce's Camera Obscura Wallpaper</a>
 
 Here are the details:
 
diff --git a/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md b/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
index 1d29c810..8df2b080 100644
--- a/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
+++ b/_src/_posts/2008-06-19-ubuntu-as-mac-file-server-and-time-machine-volume.md
@@ -316,13 +316,13 @@ In short you have to allow communications over port 548 and 5353.
 
 ## "Connection Failed"
 
-If you get one of those errors: 
+If you get one of those errors:
 
 ````
 Connection Failed - There was an error connection to the server. Check the server name or IP address and try again
 ```
 
-or 
+or
 
 ```
 There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator.
@@ -419,7 +419,7 @@ Here you can see the icons included in the Server Displays icon pack:
 
 Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
 
-<a class="btn btn-primary icon-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
+<a class="btn btn-primary icon icon-download" href="/media/server_displays_by_kremalicious.zip">Download Server Display Icons <span>zip</span></a>
 
 # How to use the icons
 
diff --git a/_src/_posts/2008-08-26-icy-box-icons.md b/_src/_posts/2008-08-26-icy-box-icons.md
index c1a4d00a..8a16896b 100644
--- a/_src/_posts/2008-08-26-icy-box-icons.md
+++ b/_src/_posts/2008-08-26-icy-box-icons.md
@@ -18,11 +18,11 @@ As always these desktop icons are free for you personal and non-commercial use.
 
 The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons [from my Goodies page.](http://www.kremalicious.com/goodies/#icons) Have fun!
 
-<a class="btn btn-primary icon-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
+<a class="btn btn-primary icon icon-download" href="http://cdn2.kremalicious.com/media/icybox_by_kremalicious.zip">Download Icy Box Icons</a>
 
   * Replacement icons for the silver and black Icy Box external aluminium case with USB interface
   * Mac + Win + Linux + iContainer
-  * Leopard ready (512x512)	
+  * Leopard ready (512x512)
   * including 7 icons with 2 Time Machine versions
 
 [![Icy Box Icons](/media/icybox_teaser2_small.png)](/media/icybox_teaser2.jpg)
diff --git a/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md b/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md
index c66ff591..3c56cf0c 100644
--- a/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md
+++ b/_src/_posts/2008-09-23-futurama-mars-university-wallpaper.md
@@ -12,8 +12,8 @@ categories:
 - wallpaper
 ---
 
-Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480). 
+Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480).
 
 As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
 
-<a class="btn btn-primary icon-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>
\ No newline at end of file
+<a class="btn btn-primary icon icon-download" href="/media/mars-u-wall-by-kremalicious.zip">Download Futurama Mars U Wallpaper</a>
\ No newline at end of file
diff --git a/_src/_posts/2008-10-23-coffee-cup-icon.md b/_src/_posts/2008-10-23-coffee-cup-icon.md
index 0e4a1e66..1d451209 100644
--- a/_src/_posts/2008-10-23-coffee-cup-icon.md
+++ b/_src/_posts/2008-10-23-coffee-cup-icon.md
@@ -14,7 +14,7 @@ categories:
 ---
 
 I’ve just released my own coffee cup icon, enjoy:
-	
+
   * Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
   * Mac + Win + Linux + iContainer
   * Leopard ready (512x512)
@@ -23,4 +23,4 @@ I’ve just released my own coffee cup icon, enjoy:
 
 ## Download
 
-<a class="btn btn-primary icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
+<a class="btn btn-primary icon icon-download" href="/media/coffee_cup_by_kremalicious.zip">Download Coffee Cup Icons</a>
diff --git a/_src/_posts/2009-02-17-out-of-whale-oil.md b/_src/_posts/2009-02-17-out-of-whale-oil.md
index bec2b8ad..37bc2bd8 100644
--- a/_src/_posts/2009-02-17-out-of-whale-oil.md
+++ b/_src/_posts/2009-02-17-out-of-whale-oil.md
@@ -29,4 +29,4 @@ Seriously, the pink versions are burning my eyes but the pink is a good referenc
 
 The whole wallpaper pack can be downloaded [from the Goodies section on my website](http://www.kremalicious.com/goodies/) or via this button:
 
-<a class="btn btn-primary icon-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
\ No newline at end of file
+<a class="btn btn-primary icon icon-download" href="/media/out-of-whale-oil-wall-by-kremalicious.zip">Download</a>
\ No newline at end of file
diff --git a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md b/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
index 0dd85bdf..0b1e51e9 100644
--- a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
+++ b/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
@@ -29,7 +29,7 @@ But I think you don't want to load tons of scripts on your websites if you inclu
 
 To make this a bit more straightforward I provide these links compiled within two Coda Clip files for use with [Panic's Coda](http://panic.com/coda). While the first clip group contains all the plain link snippets the second group includes those snippets for use with Wordpress. Just download and add them to your Coda Clips collection:
 
-<a class="btn btn-primary icon-download" href="/media/share-link-bonanza-coda-clips.zip" title="Download Share Links Coda Clips">Download Share Links Coda Clips</a>
+<a class="btn btn-primary icon icon-download" href="/media/share-link-bonanza-coda-clips.zip" title="Download Share Links Coda Clips">Download Share Links Coda Clips</a>
 
 Included are a **total of 40 share links per clip group** for the following social/bookmark sites. This list uses the links provided in the Coda clips so you can test them out here with this article ;-):
 
@@ -42,7 +42,7 @@ _
 
 If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs):
 
-<a class="btn btn-primary icon-download" href="http://www.kremalicious.com/media/coda-clips-icon-files.zip" title="Download Coda Clips Icon">Download Coda Clips Icon</a>
+<a class="btn btn-primary icon icon-download" href="http://www.kremalicious.com/media/coda-clips-icon-files.zip" title="Download Coda Clips Icon">Download Coda Clips Icon</a>
 
 ## 2. Usage
 
@@ -106,7 +106,7 @@ To me a more cleaner solution is to use the css background-image property to inc
 And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
 
 
-{% highlight css %}  
+{% highlight css %}
     .delicious {
     	background: url(delicious.png) no-repeat center center;
     	padding-left: 20px;
@@ -116,7 +116,7 @@ And in your CSS select this class and style it with a background image. Assuming
 
 If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:
 
-{% highlight css %}  
+{% highlight css %}
     .delicious {
     	width: 16px;
     	height: 16px;
@@ -129,13 +129,13 @@ If you want to use just icons and no text you should provide a link text anyway
 
 Sadly Coda's clips aren't in a portable format ([Panic guys](http://panic.com), consider this is a feature request!) so here's a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the Wordpress version for every site. This comes as a downloadable stripped-down HTML file (meaning there's no HTML site structure included) and as a long list within in this article. First, here's the HTML file download. Just open this locally in your browser or in your favorite editor:
 
-<a class="btn btn-primary icon-download" href="http://www.kremalicious.com/media/share-link-bonanza-html.zip" title="Download Share Links HTML File">Download Share Links HTML File</a>
+<a class="btn btn-primary icon icon-download" href="http://www.kremalicious.com/media/share-link-bonanza-html.zip" title="Download Share Links HTML File">Download Share Links HTML File</a>
 
 And here's the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.
 
 Just click the Toggle All Links button to reveal them and click it again to hide the whole list again. If you want to import one of these links into Coda you can just use the [Coda Clips bookmarklet created by kyle](http://www.rayogram.com/coda-clips-bookmarklet), as he points out [in the comments](http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/#comment-42084).
 
-↓ Toggle All Links ↓ 
+↓ Toggle All Links ↓
 
 ## Delicious
 
@@ -188,13 +188,13 @@ Just click the Toggle All Links button to reveal them and click it again to hide
 
 **Plain**
 
-    
-    <code class="html"><!-- Digg This Link 
-    
+
+    <code class="html"><!-- Digg This Link
+
     	Usage:
     	--------------------------------------------------
-    	url		: URL-encode all strings as appropriate. 
-    			  For example: 
+    	url		: URL-encode all strings as appropriate.
+    			  For example:
     			  http%3A%2F%2Fyourwebsite%2Fyourstoryurl.html
     			  Maximum length is 255 characters
     	title	: Also URL-encode the story title
diff --git a/_src/_posts/2009-06-04-twitter-crisp.md b/_src/_posts/2009-06-04-twitter-crisp.md
index f5e7f4b1..765b60e1 100644
--- a/_src/_posts/2009-06-04-twitter-crisp.md
+++ b/_src/_posts/2009-06-04-twitter-crisp.md
@@ -17,7 +17,7 @@ Here's a quick twitter icon for use on your websites which is kind of a by-produ
 
 This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.
 
-<a class="btn btn-primary icon-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
+<a class="btn btn-primary icon icon-download" href="/media/twitter-crisp-by-kremalicious.zip">Download</a>
 
 Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun!
 
diff --git a/_src/_posts/2009-06-24-adiumeetie.md b/_src/_posts/2009-06-24-adiumeetie.md
index 7e0df2ec..7d63ff3d 100644
--- a/_src/_posts/2009-06-24-adiumeetie.md
+++ b/_src/_posts/2009-06-24-adiumeetie.md
@@ -28,7 +28,7 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16
 
 Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
 
-<a class="btn btn-primary icon-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
+<a class="btn btn-primary icon icon-download" href="/media/adiumeetie-by-kremalicious.zip">Download</a>
 
 ## Adium Icon Usage
 
diff --git a/_src/_posts/2009-09-05-delibar.md b/_src/_posts/2009-09-05-delibar.md
index b7d10b4e..ef631526 100644
--- a/_src/_posts/2009-09-05-delibar.md
+++ b/_src/_posts/2009-09-05-delibar.md
@@ -21,7 +21,7 @@ categories:
 
 Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.
 
-<a class="btn btn-primary icon-download" href="/media/delibar-by-kremalicious.zip">Download</a>
+<a class="btn btn-primary icon icon-download" href="/media/delibar-by-kremalicious.zip">Download</a>
 
 ## Icon Usage
 
diff --git a/_src/_posts/2010-02-04-ipixelpad.md b/_src/_posts/2010-02-04-ipixelpad.md
index ab6b0f18..62b22651 100644
--- a/_src/_posts/2010-02-04-ipixelpad.md
+++ b/_src/_posts/2010-02-04-ipixelpad.md
@@ -27,7 +27,7 @@ The homescreen icons pixels in the 16px version needed all more vivid colors to
 
 The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:
 
-<a class="btn btn-primary icon-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
+<a class="btn btn-primary icon icon-download" href="/media/ipixelpad_by_kremalicious.zip">Download</a>
 
 ## License
 
diff --git a/_src/_posts/2010-07-03-momcorp.md b/_src/_posts/2010-07-03-momcorp.md
index e8d4e6e1..bcf63b6c 100644
--- a/_src/_posts/2010-07-03-momcorp.md
+++ b/_src/_posts/2010-07-03-momcorp.md
@@ -13,7 +13,7 @@ categories:
 - wallpaper
 ---
 
-The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode. 
+The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
 
 The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
 
@@ -23,5 +23,5 @@ The wallpaper comes in four versions with two color variations and two text vari
 
 You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
 
-<a class="btn btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
+<a class="btn btn-primary icon icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
 
diff --git a/_src/_posts/2011-12-15-badged.md b/_src/_posts/2011-12-15-badged.md
index 030f23f9..4ed22b77 100644
--- a/_src/_posts/2011-12-15-badged.md
+++ b/_src/_posts/2011-12-15-badged.md
@@ -5,7 +5,7 @@ title: Badged - iOS Style Notification Badges for WordPress
 image: Badged-Teaser-kremalicious@2x.png
 author: Matthias Kretschmann
 updated: 2013-11-10 07:56:46+00:00
-sticky: true
+featured: true
 
 date: 2011-12-15 07:56:46+00:00
 wordpress_id: 1468
@@ -26,7 +26,7 @@ The plugin is localized in english & german, which is only important for the set
 You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
 
 <p class="clearfix">
-<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon-wordpress-alt col2">Plugin Page</a> <a class="btn btn-primary btn-block icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn btn-block col2">Donate</a>
+<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon icon-wordpress-alt col2">Plugin Page</a> <a class="btn btn-primary btn-block icon icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon icon-heart btn btn-block col2">Donate</a>
 </p>
 
 The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
diff --git a/_src/_posts/2012-05-15-wp-icons-template.md b/_src/_posts/2012-05-15-wp-icons-template.md
index 98726f81..8f6d887c 100644
--- a/_src/_posts/2012-05-15-wp-icons-template.md
+++ b/_src/_posts/2012-05-15-wp-icons-template.md
@@ -33,7 +33,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
 
 I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
 
-<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download">Download Template &amp; Code</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
+<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon icon-download">Download Template &amp; Code</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon icon-github btn">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
 
 
 ### Usage
diff --git a/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md b/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
index e2b0c8b5..82956d16 100644
--- a/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
+++ b/_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
@@ -5,7 +5,7 @@ title: Using &lt;kbd&gt; for fun and profit
 image: kremalicious-kbdfun-teaser.png
 style: poststyle-2300.min.css
 author: Matthias Kretschmann
-sticky: true
+featured: true
 
 date: 2012-07-16 14:36:58+00:00
 wordpress_id: 2300
@@ -22,7 +22,7 @@ The above picture might be blurry depending on the device you're using so here's
 
 They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
 
-<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn btn-primary icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> <a class="btn icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
+<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn btn-primary icon icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> <a class="btn icon icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
 
 ## Usage
 
diff --git a/_src/_posts/2012-08-07-projectpurple.md b/_src/_posts/2012-08-07-projectpurple.md
index be02505b..684c9cf8 100644
--- a/_src/_posts/2012-08-07-projectpurple.md
+++ b/_src/_posts/2012-08-07-projectpurple.md
@@ -5,7 +5,7 @@ title: Project Purple
 image: Teaser-Project-Purple.png
 download: project-purple-kremalicious.zip
 author: Matthias Kretschmann
-sticky: true
+featured: true
 
 date: 2012-08-07 13:15:44+00:00
 wordpress_id: 2350
@@ -33,7 +33,7 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple
 
 Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
 
-<a class="btn btn-block icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
+<a class="btn btn-block icon icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
 
   * [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
   * [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)
diff --git a/_src/assets/less/alerts.less b/_src/assets/less/alerts.less
deleted file mode 100644
index f9599921..00000000
--- a/_src/assets/less/alerts.less
+++ /dev/null
@@ -1,41 +0,0 @@
-/////////////////////////////////////
-// Alerts
-/////////////////////////////////////
-
-.alert {
-	font-size: @font-size-small;
-	padding: .5em 1em;
-	color: #8a6d3d;
-	background: #fcf8e3;
-	border: 1px solid #d7cab9;
-	border-radius: 4px;
-}
-
-.alert-success {
-	color: #468847;
-	background: #dff0d8;
-	border-color: #b5c6a8;
-}
-
-.alert-danger,
-.alert-error {
-	color: #b94a48;
-	background: #f2dede;
-	border-color: #dcc5ca;
-}
-
-.alert-info {
-	color: #3a87ad;
-	background: #d9edf7;
-	border-color: #a6ced8;
-}
-
-.alert-block {
-	padding-top: 1em;
-	padding-bottom: 1em;
-
-    > p,
-    > ul { margin-bottom: 0; }
-
-    p + p { margin-top: 5px; }
-}
\ No newline at end of file
diff --git a/_src/assets/less/animations.less b/_src/assets/less/animations.less
deleted file mode 100644
index a81472bc..00000000
--- a/_src/assets/less/animations.less
+++ /dev/null
@@ -1,52 +0,0 @@
-// Buttery Smooth(tm)
-////////////////////////////////////
-
-.gpuacceleration {
-    -webkit-transform: translate3d(0,0,0);
-    -webkit-backface-visibility: hidden;
-    -webkit-perspective: 1000;
-}
-
-
-// Masonry
-////////////////////////////////////
-
-.masonry,
-.masonry .masonry-brick {
-	.transition-duration(0.7s);
-}
-
-.masonry {
-	.transition-property(~"height, width");
-}
-
-.masonry .masonry-brick {
-	.transition-property(~"left, right, top");
-}
-
-
-// Loading Thingy
-////////////////////////////////////
-
-.loading {
-	.animation(loadingThingy .2s infinite);
-    .gpuacceleration;
-}
-
-@keyframes loadingThingy {
- from {
- 	opacity: 1;
- }
- to {
- 	opacity: 0
- }
-}
-
-@-webkit-keyframes loadingThingy {
-    from {
-    	opacity: 1;
-    }
-    to {
-    	opacity: 0
-    }
-}
\ No newline at end of file
diff --git a/_src/assets/less/buttons.less b/_src/assets/less/buttons.less
deleted file mode 100644
index f316d0e8..00000000
--- a/_src/assets/less/buttons.less
+++ /dev/null
@@ -1,137 +0,0 @@
-/////////////////////////////////////
-// BUTTONS CSS FOR KREMALICIOUS.COM
-/////////////////////////////////////
-
-.btn {
-    font-family: @headings-font-family;
-    font-weight: @headings-font-weight;
-    font-size: .85em;
-	line-height: 1em;
-	text-align: center;
-    text-transform: uppercase;
-    vertical-align: middle;
-    cursor: pointer;
-	display: inline-block;
-	padding: @line-height-computed/2 2em;
-	margin-bottom: @line-height-computed;
-	background: rgba(255,255,255,.1);
-	border: 1px solid rgba(94,131,162,.3);
-	border-bottom-color: rgba(94,131,162,.4);
-	.border-radius;
-	.box-shadow(~"0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)");
-	.transition;
-
-	&:hover {
-		background-color: rgba(255,255,255,.5);
-	}
-
-	&:active {
-		background-color: transparent;
-		border-top-color: rgba(94,131,162,.5);
-		outline: 0;
-		.box-shadow(0 1px 0 #fff);
-		.transition(none);
-	}
-
-	span {
-		font-size: .9em;
-		color: rgba(19, 56, 50, .6);
-		margin-left: .3em;
-	}
-}
-
-.btn-primary,
-a.btn-primary:visited {
-	color: darken(@link-color, 30%);
-	text-shadow: 0 1px 0 rgba(255,255,255,.3);
-	background: lighten(@link-color, 15%);
-	border-color: rgba(40,101,93,.4);
-	border-bottom-color: rgba(40,101,93,.5);
-	.box-shadow(~"0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.4)");
-
-	&:hover {
-		color: darken(@link-color, 30%);
-		background-color: lighten(@link-color, 25%);
-		text-shadow: 0 1px 0 rgba(255,255,255,.3);
-	}
-
-	&:active {
-		color: darken(@link-color, 30%);
-		background-color: lighten(@link-color, 15%);
-		border-top-color: rgba(40,101,93,.9);
-		.box-shadow(~"0 1px 0 #fff,inset 0 0 18px rgba(43,100,92,.3)");
-		.transition(none);
-	}
-
-}
-
-.more-link {
-	.btn;
-	background: none;
-	border: none;
-	.box-shadow(none);
-	padding: 0;
-	margin: 0;
-
-    i:before {
-        top: .15em;
-        position: relative;
-    }
-
-	&:hover {
-		background: none;
-	}
-    &:active {
-        background: @link-color;
-        .box-shadow(none);
-    }
-}
-
-.btn-block {
-	display: block;
-}
-
-
-//
-// Tweet button
-//
-.btn.twitter-share {
-    display: inline-block;
-    padding: 1px 3px 0 3px;
-    height: 21px;
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	font: bold 11px/17px Helvetica, Arial, sans-serif;
-	text-align: left;
-	color: #333;
-	text-transform: none;
-    text-decoration: none;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-	background-color: #f8f8f8;
-	#gradient > .vertical(#fff; 0%; #dedede; 100%);
-	vertical-align: top;
-	.box-shadow(none);
-
-    &:hover,
-    &:focus,
-    &:active {
-        border-color: #bbb;
-        background-color: #d9d9d9;
-        #gradient > .vertical(#f8f8f8; 0%; #d9d9d9; 100%);
-    }
-
-    &:active {
-        top: 0;
-        background-color: #efefef;
-        box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
-    }
-
-    // icon
-	&:before {
-		font-size: 15px;
-        margin-right: 2px;
-        top: 1px;
-        color: #0089cb;
-	}
-
-}
\ No newline at end of file
diff --git a/_src/assets/less/code.less b/_src/assets/less/code.less
deleted file mode 100644
index 84fe8c50..00000000
--- a/_src/assets/less/code.less
+++ /dev/null
@@ -1,55 +0,0 @@
-// CODE
-/////////////////////////////////////
-
-pre, code, kbd, samp {
-	font-family: @font-family-monospace;
-    font-size: 14px;
-    line-height: 1.4em;
-	color: spin(@text-color, 70);
-	background: #f8f8f8;
-	background: rgba(255,255,255,.6);
-	border-radius: @border-radius-base;
-}
-
-code {
-    padding: .3em .6em;
-}
-
-pre {
-	padding: 1em;
-	margin-bottom: 1.5em;
-	display: block;
-	width: auto;
-	overflow: scroll;
-	-webkit-overflow-scrolling: touch;
-	max-height: 300px;
-	white-space: pre; 
-	white-space: pre-wrap;
-	word-wrap: normal;
-	.transition;
-    
-    &:hover {
-    	background: #fff;
-    	background: rgba(255,255,255,.8);
-    }
-    
-    code {
-        border: none;
-        padding: 0;
-        margin: 0;
-        border-radius: 0;
-        background: none;
-    }
-}
-
-code.bash {
-    padding-left: 1.5em;
-    display: block;
-    &:before {
-        content: "$";
-        color: @text-color-dimmed;
-        display: inline-block;
-        margin-left: -1.5em;
-        margin-right: .8em;
-    }    
-}
diff --git a/_src/assets/less/comments.less b/_src/assets/less/comments.less
deleted file mode 100644
index 7df4446f..00000000
--- a/_src/assets/less/comments.less
+++ /dev/null
@@ -1,17 +0,0 @@
-
-.comments {
-    &:extend(.clearfix all, .textcenter);
-    font-size: @font-size-small;
-    font-style: italic;
-    color: @text-color-dimmed;
-    margin-top: @line-height-computed*2;
-    .border-radius;
-
-    p,
-    .btn { margin-bottom: 0; }
-
-    .btn-wrap {
-        margin-top: @line-height-computed/2;
-        height: 27px
-    }
-}
\ No newline at end of file
diff --git a/_src/assets/less/content-link.less b/_src/assets/less/content-link.less
deleted file mode 100644
index 3dbbb58b..00000000
--- a/_src/assets/less/content-link.less
+++ /dev/null
@@ -1,27 +0,0 @@
-// LINK POST
-/////////////////////////////////////
-
-.hentry.format-link {
-
-}
-
-.linkurl {
-    display: block;
-    font-family: @font-family-base;
-    font-size: @font-size-mini;
-    color: @text-color-dimmed;
-    padding: @line-height-computed/3 0;
-    margin-left: auto;
-    margin-right: auto;
-    &:extend(.ellipsis);
-
-    max-width: 70%;
-    @media @breakpoint2 {
-        max-width: 50%;
-    }
-}
-
-.permalink-link {
-	float: right;
-    font-size: 1.1em
-}
\ No newline at end of file
diff --git a/_src/assets/less/content-photo.less b/_src/assets/less/content-photo.less
deleted file mode 100644
index 8b6508f8..00000000
--- a/_src/assets/less/content-photo.less
+++ /dev/null
@@ -1,77 +0,0 @@
-// PHOTO POST
-/////////////////////////////////////
-
-.hentry.format-photo {
-    text-align: center;
-
-    figure {
-        position: relative;
-        display: inline-block;
-        margin-left: auto;
-        margin-right: auto;
-
-        img,
-        figcaption {
-            margin-bottom: 0;
-        }
-
-        img { max-height: 540px }
-
-        figcaption {
-            position: absolute;
-            left: 0;
-            top: 25%;
-            max-width: 55%;
-            min-width: 45%;
-            text-align: right;
-        	font-family: @headings-font-family;
-        	font-weight: @headings-font-weight;
-            font-style: normal;
-        	font-size: .9em;
-            padding: @line-height-computed/3;
-            background: @link-color;
-            background: fade(@link-color, 70%);
-            color: #fff;
-            text-shadow: 0 1px 0 #000;
-
-            opacity: 0;
-            .translate(0,-20px);
-            .transition;
-        }
-
-        &:hover figcaption {
-            opacity: 1;
-            .translate(0,0);
-        }
-    }
-
-    .entry-content { text-align: left; }
-
-    .page-single & {
-
-        padding-top: @line-height-computed*2;
-        padding-bottom: @line-height-computed*3;
-
-    	@media @breakpoint2 {
-            padding-top: @line-height-computed*4;
-            padding-bottom: @line-height-computed*6;
-    	}
-
-        figure img { max-height: none }
-
-        figcaption {
-            opacity: 1;
-            .translate(0,0);
-            top: auto;
-            bottom: 0;
-            background: #000;
-            background: fade(#000, 40%);
-        }
-    }
-}
-
-.photo-link {
-    display: block;
-
-    &:active { background: none }
-}
\ No newline at end of file
diff --git a/_src/assets/less/content-related.less b/_src/assets/less/content-related.less
deleted file mode 100644
index aa4f3812..00000000
--- a/_src/assets/less/content-related.less
+++ /dev/null
@@ -1,37 +0,0 @@
-// Related Posts
-/////////////////////////////////////
-
-.related-posts {
-    .row { margin-top: 0 }
-}
-
-.related-posts-title {
-    &:extend(.heading-band, .h3);
-    margin-bottom: @line-height-computed;
-}
-
-.related-post {
-
-    .post-title {
-        &:extend(.h6);
-        margin-top: @line-height-computed;
-        margin-bottom: @line-height-computed;
-    }
-
-    .post-title,
-    .post-title-link {
-        color: @brand-grey-light;
-        .transition;
-
-        &:hover,
-        &:focus { color: @link-color }
-
-        &:active {
-            color: #fff;
-            .transition(none);
-        }
-    }
-
-    .post-title-link { display: block }
-
-}
\ No newline at end of file
diff --git a/_src/assets/less/content.less b/_src/assets/less/content.less
deleted file mode 100644
index 82ecfe3e..00000000
--- a/_src/assets/less/content.less
+++ /dev/null
@@ -1,191 +0,0 @@
-.page-title {
-    &:extend(.h2, .heading-band);
-    color: @brand-grey-light;
-    margin-top: @line-height-computed/2;
-    margin-bottom: @line-height-computed/2;
-
-    // icons
-    &:before {
-        font-size: 32px;
-        color: fade(@text-color-dimmed, 70%);
-        margin-right: .5em
-    }
-
-    @media @breakpoint2 {
-        margin-left: -108%;
-        .page-photos & { margin-bottom: @line-height-computed*4; }
-    }
-}
-
-.hentry {
-    &:extend(.divider-bottom);
-	padding: @line-height-computed*2 0;
-
-	@media @breakpoint2 {
-		padding: @line-height-computed*4 0;
-	}
-
-	&:first-child {
-        padding-top: @line-height-computed;
-    }
-
-    .page-single & {
-        padding-bottom: @line-height-computed*2;
-        border: none;
-        &:before { .hide; }
-    }
-}
-
-// post title
-.entry-title {
-    &:extend(.h1, .textcenter);
-	color: @headings-color;
-	margin-top: 0;
-	margin-bottom: @line-height-computed;
-
-	.format-link & { &:extend(.h3); }
-}
-
-// post content
-.entry-content {
-	h1, h2 {
-        &:extend(.heading-band);
-	}
-    h1 { font-size: ceil(@font-size-base * 2.5) }
-
-    p:last-child {
-        margin-bottom: 0;
-    }
-}
-
-
-// post category icons
-/////////////////////////////////////
-
-.posttype {
-	display: block;
-	width: 20px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: @line-height-computed/2;
-	margin-top: -@line-height-computed;
-
-	// icon adjustments
-	&:before {
-		font-size: 20px;
-		color: @text-color-light
-	}
-
-	&:hover:before {
-		color: @link-color
-	}
-}
-
-// POST META
-/////////////////////////////////////
-
-.entry-meta {
-    &:extend(.clearfix all);
-    margin-top: @line-height-computed*2;
-    font-size: @font-size-small;
-}
-
-.byline,
-time,
-.categories {
-    &:extend(.textcenter);
-}
-
-.byline,
-time {
-	font-style: italic;
-	color: @text-color-light;
-}
-
-.byline {
-	margin-bottom: 0;
-
-    .by { display: block }
-}
-
-time {
-    display: block;
-    color: @text-color-dimmed
-}
-
-.categories {
-    margin-top: @line-height-computed;
-}
-
-.avatar {
-    width: 80px;
-    height: 80px;
-    .border-radius(80px);
-    border: 2px solid #fff;
-}
-
-//
-// Goodies download
-//
-.goodie-actions {
-    &:extend(.clearfix all);
-    max-width: 640px;
-    margin: 0 auto;
-
-    p,
-    .btn { margin-bottom: 0 }
-
-    .btn { display: block; }
-
-    .download {
-        margin-top: @line-height-computed/2;
-
-        @media @breakpoint2 {
-            margin-top: 0;
-            text-align: right
-        }
-    }
-}
-
-
-
-// Masonry
-
-.masonry {
-
-    @media @breakpoint2 {
-        width: 125%;
-        margin-left: -12.5%;
-        .clearfix();
-    }
-
-    .hentry {
-
-        @media @breakpoint1 {
-            width: 49%;
-    		float: left;
-    		clear: none;
-    		padding-top: 0;
-    		padding-bottom: 0;
-    		margin-bottom: .7em;
-    		margin-top: 0;
-    		margin-left: 0;
-    		margin-right: 1%;
-    		border: none;
-
-    		&:before { display: none; }
-
-            &:nth-child(2n+1) {  margin-right: 0; }
-
-    		&:last-child { margin-bottom: 3em; }
-        }
-    }
-}
-
-.grid-sizer {
-    width: 100%;
-
-    @media screen and (min-width: 480px) {
-        width: 50%;
-    }
-}
\ No newline at end of file
diff --git a/_src/assets/less/forms.less b/_src/assets/less/forms.less
deleted file mode 100644
index 0470137e..00000000
--- a/_src/assets/less/forms.less
+++ /dev/null
@@ -1,48 +0,0 @@
-/////////////////////////////////////
-// FORMS CSS FOR KREMALICIOUS.COM
-/////////////////////////////////////
-
-// Make all forms have space below them
-form {
-	margin: 0 0 @line-height-computed;
-}
-
-label {
-	display: block;
-	color: rgba(46, 79, 92, .7);
-	margin-bottom: 0;
-	// Indicate that 'label' will shift focus to the associated form element
-	cursor: pointer;
-}
-
-select,
-textarea,
-.input-text,
-.input-search {
-	font-size: @font-size-base;
-	line-height: @line-height-computed;
-	font-family: @font-family-base;
-	color: @text-color;
-	font-weight: 700;
-	display: inline-block;
-	padding: .5em;
-	background: #fff;
-	background: rgba(255,255,255,.3);
-	border: 0;
-	width: 100%;
-	.transition();
-	-webkit-appearance: none;
-	
-	&:hover {
-	    background: rgba(255,255,255,.5)
-	}
-    
-	&:focus {
-		background: rgba(255,255,255,.7);
-		outline: 0;
-		outline: thin dotted \9; /* IE6-9 */
-	}
-	
-	// placeholder
-	.placeholder(rgba(46, 79, 92, .3));
-}
diff --git a/_src/assets/less/grid.less b/_src/assets/less/grid.less
deleted file mode 100644
index c26e340b..00000000
--- a/_src/assets/less/grid.less
+++ /dev/null
@@ -1,78 +0,0 @@
-// Prevents padding to be added
-* {
-	.box-sizing(border-box);
-}
-
-// 320px and up
-.container {
-	padding: 0 7%;
-	width: 100%; }
-
-.row {
-	margin-top: @line-height-computed;
-	margin-bottom: @line-height-computed;
-}
-
-.col1, .col2, .col3, .col4, .col5, .col6 {
-	width: 100%;
-	margin-left: 0;
-	// ensures empty columns won't collapse
-	min-height: 1px; }
-
-// clear trick
-.container:before, .row:before,
-.container:after, .row:after { display: table; content: ""; }
-.container:after, .row:after { clear: both; }
-
-@media @breakpoint1 {
-
-	.col1,
-	.col2,
-	.col3,
-	.col4,
-	.col5,
-	.col6 {  }
-
-}
-
-@media @breakpoint2 {
-    
-    .container { padding: 0 15%; }
-    
-	.row {
-	    max-width: 35em;
-	    margin: @line-height-computed*2 auto;
-	    padding-left: 0;
-	    padding-right: 0;
-	}
-
-	.col1,
-	.col2,
-	.col3,
-	.col4,
-	.col5,
-	.col6 {
-		float: left;
-		margin-left: 4%; }
-
-	.col1:first-child,
-	.col2:first-child,
-	.col3:first-child,
-	.col4:first-child,
-	.col5:first-child,
-	.col6,
-    .col3:nth-child(2n+3),
-    .col2:nth-child(3n+4),
-    .col1:nth-child(6n+7) { 
-        margin-left: 0;
-        clear: both
-    }
-
-	.col1 { width: 13%; }
-	.col2 { width: 30.6%; }
-	.col3 { width: 48%; }
-	.col4 { width: 65%; }
-	.col5 { width: 82%; }
-	.col6 { width: 100%; }
-
-}
\ No newline at end of file
diff --git a/_src/assets/less/icons.less b/_src/assets/less/icons.less
deleted file mode 100644
index dfac0832..00000000
--- a/_src/assets/less/icons.less
+++ /dev/null
@@ -1,115 +0,0 @@
-//////////////////////
-// ICONS
-//////////////////////
-
-@font-face {
-	font-family: 'entypo';
-	src:url('../fonts/entypo.eot');
-	src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
-		url('../fonts/entypo.woff') format('woff'),
-		url('../fonts/entypo.ttf') format('truetype'),
-		url('../fonts/entypo.svg#entypo') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
-[class*="icon-"]:before {
-	color: @text-color-light;
-	font-size: 20px;
-	font-family: 'entypo';
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-.btn[class*="icon-"]:before {
-    font-size: 18px;
-	margin-right: .3em;
-    top: .1em;
-    position: relative;
-	vertical-align: baseline;
-	line-height: inherit;
-}
-
-.btn-primary[class*="icon-"]:before {
-	color: darken(@link-color, 15%);
-}
-
-.icon-twitter:before {
-	content: "\e600";
-}
-.icon-rss:before {
-	content: "\e603";
-}
-.icon-user:before,
-.icon-personal:before {
-	content: "\e604";
-}
-.icon-leaf:before {
-	content: "\e605";
-}
-.icon-link:before {
-	content: "\e606";
-}
-.icon-pictures:before,
-.icon-photos:before {
-	content: "\e607";
-}
-.icon-camera:before,
-.icon-photography:before {
-	content: "\e608";
-}
-.icon-arrow-down-circle:before,
-.icon-download:before {
-	content: "\e609";
-}
-.icon-forward:before {
-	content: "\e60a";
-}
-.icon-heart:before {
-	content: "\e60b";
-}
-.icon-info:before {
-	content: "\e60c";
-}
-.icon-github:before {
-	content: "\e60e";
-}
-.icon-star:before,
-.entry-content ul li:before {
-	content: "\e60d";
-}
-.icon-search:before {
-	content: "\e60f";
-}
-.icon-googleplus:before {
-	content: "\e601";
-}
-.icon-facebook:before {
-	content: "\e602";
-}
-.icon-list:before {
-	content: "\e610";
-}
-.icon-tools:before,
-.icon-design:before {
-	content: "\e611";
-}
-.icon-arrow-down:before {
-	content: "\e612";
-}
-.icon-arrow-right:before {
-	content: "\e614";
-}
-.icon-arrow-left:before {
-	content: "\e615";
-}
-.icon-gift:before,
-.icon-goodies:before {
-	content: "\e613";
-}
\ No newline at end of file
diff --git a/_src/assets/less/kremalicious3.less b/_src/assets/less/kremalicious3.less
deleted file mode 100644
index d13fca50..00000000
--- a/_src/assets/less/kremalicious3.less
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-
- MAIN CSS FOR KREMALICIOUS.COM
- -----------------------------------------------------------------
-
- Copyright (c) 2013 Matthias Kretschmann | http://mkretschmann.com
-
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-*/
-
-
-// Normalize all the things
-@import (less) 'bower_components/normalize-css/normalize.css';
-
-// grid
-@import 'grid.less';
-
-// Core variables and mixins
-@import 'variables.less';
-@import 'mixins.less';
-
-// Typography
-@import 'typography.less';
-
-// Scaffolding
-@import 'scaffolding.less';
-
-// Icons
-@import 'icons.less';
-
-// Forms & Buttons
-@import 'forms.less';
-@import 'buttons.less';
-
-// Media: images, video etc.
-@import 'media.less';
-
-// Code
-@import 'code.less';
-@import 'syntax.less';
-
-// Content
-@import 'tables.less';
-@import 'content.less';
-@import 'content-photo.less';
-@import 'content-link.less';
-@import 'content-related.less';
-@import 'comments.less';
-@import 'sticky.less';
-
-@import 'page-about.less';
-@import 'page-404.less';
-
-// Alerts
-@import 'alerts.less';
-
-// Navigation
-@import 'navigation.less';
-
-// Animations
-@import 'animations.less';
-
-// Utility classes
-@import 'utilities.less';
-
-// Print
-@import 'print.less';
\ No newline at end of file
diff --git a/_src/assets/less/media.less b/_src/assets/less/media.less
deleted file mode 100644
index 8ed343e1..00000000
--- a/_src/assets/less/media.less
+++ /dev/null
@@ -1,53 +0,0 @@
-/////////////////////////////////////
-// MEDIA CSS FOR KREMALICIOUS.COM
-/////////////////////////////////////
-
-
-// IMAGES
-/////////////////////////////////////
-
-img,
-figure {
-	max-width: 100%;
-	height: auto;
-	.border-radius;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-img {
-	vertical-align: middle;
-	.box-shadow(0 1px 3px rgba(0,0,0,.2));
-}
-
-.teaser,
-.teaser img {
-    margin-top: @line-height-computed*1.5;
-    margin-bottom: @line-height-computed*1.5;
-}
-
-
-//
-// Media Positioning
-//
-
-img.alignleft,
-img.alignright,
-img.aligncenter {
-	float: none;
-	display: block;
-	margin: @line-height-computed auto;
-}
-
-@media @breakpoint2 {
-	img.alignleft { 
-        margin: 0 @line-height-computed @line-height-computed 0; 
-        float: left;
-    }
-	
-	img.alignright { 
-        margin: 0 0 @line-height-computed @line-height-computed; 
-        float: right;
-    }
-}
\ No newline at end of file
diff --git a/_src/assets/less/mixins.less b/_src/assets/less/mixins.less
deleted file mode 100644
index 205e35a6..00000000
--- a/_src/assets/less/mixins.less
+++ /dev/null
@@ -1,258 +0,0 @@
-/////////////////////////////////////
-//	MIXINS
-/////////////////////////////////////
-
-
-// Dimmed Text
-/////////////////////////////////////
-.dimmed {
-	color: @text-color-dimmed;
-	p { color: @text-color-dimmed; }
-	li { color: @text-color-dimmed; }
-}
-
-// Text overflow
-/////////////////////////////////////
-
-.ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-	overflow: hidden
-}
-
-// Dashed Dividers
-/////////////////////////////////////
-
-.divider-top,
-.divider-bottom {
-    position: relative;
-
-    &:before {
-		content: "";
-		position: absolute;
-		left: 0;
-        height: 1px;
-    }
-}
-
-.divider-top {
-	border-top: 1px dashed #afc3cb;
-	padding-top: 1em;
-
-	&:after {
-		content: "";
-		position: absolute;
-		left: 0;
-        height: 1px;
-		top: 0;
-		width: 100%;
-		border-top: 1px dashed #fff;
-	}
-}
-
-.divider-bottom {
-	border-bottom: 1px dashed #afc3cb;
-	padding-bottom: 1em;
-
-	&:before {
-		bottom: -2px;
-		width: 100%;
-		border-bottom: 1px dashed #fff;
-	}
-}
-
-
-// Heading band
-/////////////////////////////////////
-
-.heading-band {
-	display: inline-block;
-	clear: both;
-	background: rgba(255,255,255,.55);
-	padding: @line-height-computed/2 @line-height-computed @line-height-computed/2 100%;
-	margin-left: -100%;
-	.border-right-radius(@border-radius-base);
-}
-
-
-// Lead paragraph
-/////////////////////////////////////
-
-.lead {
-    font-size: @font-size-large;
-    line-height: @line-height-computed*1.15
-}
-
-/////////////////////////////////////
-// CSS3 PROPERTIES
-/////////////////////////////////////
-
-// Border Radius
-.border-radius(@radius: @border-radius-base) {
-    border-radius: @radius;
-    background-clip: padding-box;
-}
-
-// Single side border-radius
-.border-top-radius(@radius: @border-radius-base) {
-  border-top-right-radius: @radius;
-   border-top-left-radius: @radius;
-}
-.border-right-radius(@radius: @border-radius-base) {
-  border-bottom-right-radius: @radius;
-     border-top-right-radius: @radius;
-}
-.border-bottom-radius(@radius: @border-radius-base) {
-  border-bottom-right-radius: @radius;
-   border-bottom-left-radius: @radius;
-}
-.border-left-radius(@radius: @border-radius-base) {
-  border-bottom-left-radius: @radius;
-     border-top-left-radius: @radius;
-}
-
-// Drop shadows
-.box-shadow(@shadow) {
-  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
-          box-shadow: @shadow;
-}
-
-// Transitions
-.transition(@transition: all .2s ease-in-out 0s) {
-  -webkit-transition: @transition;
-          transition: @transition;
-}
-.transition-delay(@transition-delay) {
-  -webkit-transition-delay: @transition-delay;
-          transition-delay: @transition-delay;
-}
-.transition-duration(@transition-duration) {
-  -webkit-transition-duration: @transition-duration;
-          transition-duration: @transition-duration;
-}
-.transition-property(@property) {
-	-webkit-transition-property: @property;
-	        transition-property: @property;
-}
-
-// Animations
-.animation(@animation) {
-  -webkit-animation: @animation;
-          animation: @animation;
-}
-.animation-delay(@delay) {
-  -webkit-animation-delay: @delay;
-          animation-delay: @delay;
-}
-
-// Transformations
-.rotate(@degrees) {
-  -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
-          transform: rotate(@degrees);
-}
-.scale(@ratio) {
-  -webkit-transform: scale(@ratio);
-      -ms-transform: scale(@ratio);
-          transform: scale(@ratio);
-}
-.translate(@x, @y) {
-  -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y);
-          transform: translate(@x, @y);
-}
-.skew(@x, @y) {
-  -webkit-transform: skew(@x, @y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-          transform: skew(@x, @y);
-}
-.translate3d(@x, @y, @z) {
-  -webkit-transform: translate3d(@x, @y, @z);
-          transform: translate3d(@x, @y, @z);
-}
-
-// Backface visibility
-// Prevent browsers from flickering when using CSS 3D transforms.
-// Default value is `visible`, but can be changed to `hidden
-// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
-.backface-visibility(@visibility){
-	-webkit-backface-visibility: @visibility;
-	   -moz-backface-visibility: @visibility;
-	        backface-visibility: @visibility;
-}
-
-// Background clipping
-.background-clip(@clip) {
-  -webkit-background-clip: @clip;
-     -moz-background-clip: @clip;
-          background-clip: @clip;
-}
-
-// Box sizing
-.box-sizing(@boxmodel) {
-  -webkit-box-sizing: @boxmodel;
-     -moz-box-sizing: @boxmodel;
-          box-sizing: @boxmodel;
-}
-
-// User select
-// For selecting text on the page
-.user-select(@select) {
-  -webkit-user-select: @select;
-     -moz-user-select: @select;
-      -ms-user-select: @select;
-          user-select: @select;
-}
-
-// Resize anything
-.resizable(@direction) {
-  resize: @direction; // Options: horizontal, vertical, both
-  overflow: auto; // Safari fix
-}
-
-// CSS3 Content Columns
-.content-columns(@column-count, @column-gap: @grid-gutter-width) {
-  -webkit-column-count: @column-count;
-     -moz-column-count: @column-count;
-          column-count: @column-count;
-  -webkit-column-gap: @column-gap;
-     -moz-column-gap: @column-gap;
-          column-gap: @column-gap;
-}
-
-// Optional hyphenation
-.hyphens(@mode: auto) {
-  word-wrap: break-word;
-  -webkit-hyphens: @mode;
-     -moz-hyphens: @mode;
-      -ms-hyphens: @mode;
-          hyphens: @mode;
-}
-
-// GRADIENTS
-/////////////////////////////////////
-
-#gradient {
-
-  // Horizontal gradient, from left to right
-  //
-  // Creates two color stops, start and end, by specifying a color and position for each color stop.
-  // Color stops are not available in IE9 and below.
-  .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
-    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
-    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
-    background-repeat: repeat-x;
-  }
-
-  // Vertical gradient, from top to bottom
-  //
-  // Creates two color stops, start and end, by specifying a color and position for each color stop.
-  // Color stops are not available in IE9 and below.
-  .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
-    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
-    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
-    background-repeat: repeat-x;
-  }
-}
\ No newline at end of file
diff --git a/_src/assets/less/navigation.less b/_src/assets/less/navigation.less
deleted file mode 100644
index 7e976e3e..00000000
--- a/_src/assets/less/navigation.less
+++ /dev/null
@@ -1,246 +0,0 @@
-/////////////////////////////////////
-// NAVIGATION
-/////////////////////////////////////
-
-.menu-btn,
-.search-btn {
-    line-height: 1em;
-    text-align: center;
-    vertical-align: middle;
-    display: inline-block;
-    margin: 0;
-    
-    position: absolute;
-    right: 0;
-    top: 0;
-    
-    // icons
-    &:before { 
-        color: @link-color;
-        .transition;
-    }
-    &:hover:before {
-        color: @link-color-hover
-    }
-    &:active:before {
-        .transition(none);
-        color: #fff
-    }
-}
-.search-btn { right: 50px }
-
-
-//
-// Main Navigation
-//
-
-.nav-main {
-    .menu-btn {
-        margin-right: -.5em;
-        padding: .5em .7em;
-        &:before { font-size: 26px; }
-    }
-    
-    li { display: inline-block; }
-}
-
-.nav-popover {
-    padding: @line-height-computed*1.5 0;
-    width: 100%;
-    background: @body-bg;
-    .clearfix;
-}
-
-.nav-link {
-    .h6;
-    display: block;
-    padding: .5em 1em;
-    width: 50%;
-    @media @breakpoint2 { width: 33.3% }
-    
-    float: left;
-    text-align: center;
-    padding: 1em;
-    color: @link-color;
-    line-height: @line-height-computed;
-    text-transform: uppercase;
-    font-size: .8em;
-    
-    // the icons
-    &:before {
-        display: block;
-        width: 100%;
-        text-align: center;
-        font-size: 32px;
-        height: 32px;
-        color: fade(@text-color-dimmed, 70%);
-        .transition;
-    }
-    
-    &:hover,
-    &:hover:before {
-        color: @link-color;
-        border-bottom-color: @link-color
-    }
-    
-    &:hover { background: rgba(255,255,255,.5); }
-    
-    &:active { 
-        background: @link-color;
-        top: 0;
-    }
-    
-    &:active:before { 
-        color: #fff;
-        .transition(none)
-    }
-}
-
-
-//
-// Site Search
-//
-
-.site-search {
-    margin-right: 4%;
-    
-    .nav-popover {
-        left: 0;
-        width: 100%;
-    }
-}
-
-.search-btn {
-    padding: .65em .85em;
-}
-
-.search-close {
-    position: absolute;
-    right: 1em;
-    
-    &,
-    &:active { top: 1em; }
-}
-
-.topbar .search-area {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: -3px;
-    z-index: 3;
-    background: #f1f4f7;
-    
-    // hidden by default
-    .translate(0, -60px);
-    .transition;
-    
-    &.ready {
-        .translate(0, 0);
-    }
-}
-
-.topbar .search-field {
-    width: 97%;
-    border: none;
-    .box-shadow(none);
-    background: transparent;
-    
-    &:hover,
-    &:focus {
-        background: rgba(255,255,255,.7) !important;
-    }
-}
-
-.search-results {
-    .clearfix;
-    
-    .nav-link {
-        @media @breakpoint2 {
-            width: 50%;
-            float: left;
-            font-size: .85em;
-            line-height: 1.3em
-        }
-    }
-}
-
-.popover {
-    position: absolute;
-    left: 0;
-    top: 71px;
-    z-index: 6;
-    
-    background: lighten(@page-bg, 3%);
-    border-bottom: 1px solid rgba(255,255,255,.7);
-    box-shadow: 0 1px 4px fade(@brand-dark, 10%);
-    
-    @media @breakpoint2 { 
-        top: 0;
-        
-        .row { 
-            margin-top: @line-height-computed;
-            margin-bottom: @line-height-computed
-        }
-    }
-}
-
-
-//
-// Paginator
-//
-
-.paginator {
-	.clearfix;
-    
-	p { position: relative;	}
-	a { display: block; }
-    
-	i {
-		position: absolute;
-		left: 0;
-		top: 0;
-	}
-    
-	.next { 
-        text-align: right; 
-        float: right;
-        
-        a { margin-right: 1.5em; }
-        
-        i { 
-            margin-left: .5em;
-    		left: auto;
-    		right: 0;
-        }
-    }
-    
-    .previous {
-        float: left;
-        
-        a { margin-left: 1.5em; }
-        i { margin-right: .5em; }
-    }
-}
-
-
-// Infinite Loader
-/////////////////////////////////////
-
-.infiniteLoader .next {
-	width: 100%;
-    float: none;
-    margin-left: 0;
-    
-    a {
-    	.btn;
-    	.aligncenter;
-        padding-top: @line-height-computed/1.5;
-        padding-bottom: @line-height-computed/1.5;
-    }
-}
-
-.infiniteLoader .previous,
-.infiniteLoader .pagenumber,
-.infiniteLoader i {
-	.hide;
-}
\ No newline at end of file
diff --git a/_src/assets/less/page-404.less b/_src/assets/less/page-404.less
deleted file mode 100644
index 52d483e0..00000000
--- a/_src/assets/less/page-404.less
+++ /dev/null
@@ -1,73 +0,0 @@
-
-.page-404 {
-    text-align: center;
-    
-    .entry-title { .hide; }
-}
-
-.srverror-title {
-    font-size: 2em;
-    margin-bottom: @line-height-computed/2;
-    color: @text-color-light;
-}
-.srverror-text {
-    font-size: 1.2em;
-    letter-spacing: .01em;
-    color: @text-color-dimmed
-}
-
-@hal-size: 72px;
-
-.hal-9000 {
-    width: @hal-size;
-    height: @hal-size;
-    .border-radius(@hal-size);
-    background: #444;
-    padding: 1.5em;
-    margin: @line-height-computed auto;
-    text-align: center;
-    position: relative;
-    border: 4px solid #ccc;
-    box-shadow: inset 0 0 10px #000;
-    
-    // eye
-    &:before {
-        content: " ";
-        width: 100%;
-        height: 100%;
-        .border-radius(100%);
-        display: block;
-        background: red;
-        box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red;
-        .animation(halpulse 7s infinite);
-    }
-    
-    // gloss
-    &:after {
-        content: "";
-        position: absolute;
-        width: @hal-size;
-        height: @hal-size;
-        .border-radius(@hal-size);
-        position: absolute;
-        left: 0;
-        top: 0;
-        
-        background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0) 41%);
-        background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
-        background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
-        background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);
-        background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%);                
-    }
-}
-
-@-webkit-keyframes halpulse {
-    0%   { opacity: 1  }
-    50%  { opacity: .6 }
-    100% { opacity: 1  }
-}
-@keyframes halpulse {
-    0%   { opacity: 1  }
-    50%  { opacity: .6 }
-    100% { opacity: 1  }
-}
\ No newline at end of file
diff --git a/_src/assets/less/page-about.less b/_src/assets/less/page-about.less
deleted file mode 100644
index 4a60b5b6..00000000
--- a/_src/assets/less/page-about.less
+++ /dev/null
@@ -1,41 +0,0 @@
-
-.page-about {
-    .entry-title { .visuallyhidden; }
-    
-    .entry-content { text-align: center; }
-    
-    .footer {
-        .avatar,
-        .footer-description { .hide; }
-        
-        .subscribe-title { margin-top: 0; }
-    }
-    
-    @media only screen and (min-width: 40.625em) and (min-height: 650px) {
-        .document {
-            margin-bottom: 350px
-        }
-        .footer { height: 350px }
-    }
-}
-
-.intro-1,
-.intro-2 {
-    .divider-bottom;
-    @media @breakpoint2 {
-        max-width: 50%;
-        margin-left: auto;
-        margin-right: auto;
-    }
-}
-
-.intro-1 {
-    font-size: 2em;
-    color: @text-color-light;
-}
-
-.intro-2 {
-    font-size: 1.2em;
-    letter-spacing: .01em;
-    color: @text-color-dimmed
-}
\ No newline at end of file
diff --git a/_src/assets/less/poststyle-2300.less b/_src/assets/less/poststyle-2300.less
deleted file mode 100644
index 57b21ed2..00000000
--- a/_src/assets/less/poststyle-2300.less
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
-KBDFUN
-
-*/
-
-/*  Le kbd
----------------------- */
-
-kbd {
-	font-size: 18px;
-	color: #444444;
-	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
-	font-weight: normal;
-	font-style: normal;
-	text-align: center;
-	line-height: 1em;
-	text-shadow: 0 1px 0 #fff;
-	display: inline;
-	padding: .3em .55em;
-	-webkit-border-radius: 6px;
-	-moz-border-radius: 6px;
-	border-radius: 6px;
-	-moz-background-clip: padding;
-	-webkit-background-clip: padding-box;
-	background-clip: padding-box;
-	border: 1px solid #bbb;
-	background-color: #f7f7f7;
-	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
-	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-	background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-	background-repeat: repeat-x;
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
-	box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
-}
-
-kbd.dark {
-	color: #eeeeee;
-	text-shadow: 0 -1px 0 #000000;
-	border-color: #000;
-	background-color: #4d4c4c;
-	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.5)), color-stop(80%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
-	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
-	background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
-	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
-	background-repeat: no-repeat;
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=0);
-	box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727;
-}
-
-kbd.ios {
-	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
-	color: #000;
-	border-color: rgba(0, 0, 0, 0.6);
-	border-top-color: rgba(0, 0, 0, 0.4);
-	background-color: ##b7b7bc;
-	background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
-	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
-	background-image: -webkit-linear-gradient(top, #efeff0, #b7b7bc);
-	background-image: -o-linear-gradient(top, #efeff0, #b7b7bc);
-	background-image: linear-gradient(top, #efeff0, #b7b7bc);
-	background-repeat: repeat-x;
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefeff0', endColorstr='#ffb7b7bc', GradientType=0);
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
-}
-
-kbd.android {
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	color: #ffffff;
-	text-shadow: none;
-	padding: .3em;
-	border: 1px solid rgba(0, 0, 0, 0.05);
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
-	-moz-background-clip: padding;
-	-webkit-background-clip: padding-box;
-	background-clip: padding-box;
-	background: #5e5e5e;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686;
-}
-
-kbd.android.dark {
-	background: #222222;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050;
-}
-
-kbd.android.color {
-	background: #083c5b;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b;
-}
-
-@font-face {
-	font-family: 'RobotoRegular';
-	src: url('../fonts/Roboto-Regular-webfont.eot');
-	src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
diff --git a/_src/assets/less/print.less b/_src/assets/less/print.less
deleted file mode 100644
index 9c6af790..00000000
--- a/_src/assets/less/print.less
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
-/* ==|== print styles =======================================================
-   Print styles.
-   Inlined to avoid required HTTP connection: h5bp.com/r
-   ========================================================================== */
-
-@media print {
-    
-  * { 
-      background: transparent; 
-      color: black !important; 
-      box-shadow:none !important; 
-      text-shadow: none !important; 
-  }
-    
-  .entry-content a[href]:after { 
-      content: " (" attr(href) ")";
-      text-transform: none;
-      font-size: 0.8em;
-  }
-  
-  // hide stuff in article view
-  .related-posts,
-  .footer .row:first-child,
-  .hentry:before {
-      .hide;
-  }
-  .topbar { .visuallyhidden; }
-  
-  .hentry { border: none }
-  
-  .footer {
-      color: #ccc !important;
-      
-      .footer-copyright {
-          border-top: 1px solid #000 !important;
-          
-          &:after { .hide; }
-      }
-  }
-  
-  abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
-  
-  pre, blockquote { page-break-inside: avoid; }
-  
-  thead { display: table-header-group; } /* h5bp.com/t */
-  
-  tr, img { page-break-inside: avoid; }
-  
-  img { max-width: 100% !important; }
-  
-  @page { margin: 5.5cm; }
-  
-  p, h2, h3 { orphans: 3; widows: 3; }
-  
-  .hentry {
-      h1 { page-break-before: always; }
-      &:first-child h1 { page-break-before: avoid; }
-  }
-
-  h2, h3 { page-break-after: avoid; }
-}
\ No newline at end of file
diff --git a/_src/assets/less/scaffolding.less b/_src/assets/less/scaffolding.less
deleted file mode 100644
index 9fc8c471..00000000
--- a/_src/assets/less/scaffolding.less
+++ /dev/null
@@ -1,252 +0,0 @@
-html {
-	-webkit-tap-highlight-color: fade(@link-color, 20%);
-	tap-highlight-color: fade(@link-color, 20%);
-}
-
-body {
-	background-color: @body-bg;
-}
-
-.document { position: relative }
-
-
-//
-// Topbar
-//
-.topbar {
-    .clearfix;
-    background: @body-bg;
-    border-bottom: 1px solid rgba(255,255,255,.7);
-    box-shadow: inset 0 1px 4px fade(@brand-dark, 20%), inset 0 -1px 4px fade(@brand-dark, 20%);
-    
-    .row { 
-        margin-top: @line-height-computed/2;
-        margin-bottom: @line-height-computed/2;
-        position: relative;
-    }
-}
-
-
-//
-// Banner
-//
-
-.banner {
-	float: left;
-    
-    @media @breakpoint2 {
-        margin-left: -54px
-    }
-    
-	.banner-title { 
-        margin-top: .1em;
-        margin-bottom: 0;
-		// display toned down logo
-		// by default
-		.logo;
-	}
-	
-	.banner-logo {
-		.ir;
-		
-		// repeat logo
-		// but display hover version
-		.logo;
-		background-position: left bottom;
-
-		// hide by default
-		opacity: 0;
-		// show smooooothly on hover
-		&:hover { opacity: 1 }
-		&:active { top: 0 }
-	}
-}
-
-// Logo
-/////////////////////////////////////
-.logo {
-	display: block;
-	background-image: data-uri('../img/logo.png');
-	background-repeat: no-repeat;
-	background-position: left top;
-    width: 47px;
-	height: 31px;
-    
-    @media @breakpoint2 {
-        width: 183px;
-    }
-    
-    @media @highDPI {
-    	background-image: url('../img/logo@2x.png');
-    	background-size: 183px 62px;
-    }
-    @media @highDPI_3x {
-    	background-image: url('../img/logo@3x.png');
-    	background-size: 183px 62px;
-    }
-}
-
-//
-// close button
-//
-
-a.close,
-.close {
-    width: 16px;
-    height: 16px;
-    line-height: 12px;
-    font-size: 16px;
-    padding: 0;
-    .border-radius(16px);
-    text-align: center;
-    display: block;
-    background: @brand-grey-light;
-    color: #fff;
-    
-    &:hover { background: @link-color-hover }
-}
-
-
-// Footer
-/////////////////////////////////////
-
-.footer {
-	text-align: center;
-	background: fade(@brand-dark, 5%);
-    border-top: 1px solid rgba(255,255,255,.7);
-    box-shadow: inset 0 1px 4px fade(@brand-dark, 20%);
-    
-    .gravatar {
-        margin-bottom: @line-height-computed/2;
-    }
-    
-    .footer-description {
-        .h5;
-        a { display: block; }
-    }
-    
-    &,
-    .footer-description {
-        color: @text-color-light;
-        line-height: @line-height-computed;
-    }
-    
-	.footer-copyright {
-		.divider-top;
-		padding-top: @line-height-computed;
-		padding-bottom: @line-height-computed;
-		p {
-			margin-bottom: 0;
-			font-size: @font-size-mini;
-		}
-	}
-}
-
-// Subscribe component
-.subscribe {
-	margin: @line-height-computed auto;
-	p {
-		margin: 0;
-		.clearfix;
-        text-align: center;
-	}
-    
-	.btn {
-        width: 48px;
-        height: 40px;
-        line-height: 34px;
-        padding: 0;
-		margin: 0;
-		display: inline-block;
-		color: @text-color-light;
-        text-align: center;
-        
-		&:first-child { margin-left: 0 }
-		&:last-child  { margin-right: 0 }
-        
-    	&:before {	
-    		// Icon resets for color animations
-    		.transition(color .3s ease-in-out);
-			color: inherit;
-			margin: 0 !important;
-    	}
-	}
-}
-
-.subscribe-title {
-    .h5;
-    color: @text-color-dimmed;
-    margin-bottom: @line-height-computed/2;
-}
-
-.footer:hover .subscribe .rss:before {
-	color: #e15a00;
-}
-
-.footer:hover .subscribe .twitter:before {
-	color: #019ad2;
-}
-
-.footer:hover .subscribe .google:before {
-	color: #c63b1e;
-}
-
-.footer:hover .subscribe .facebook:before {
-	color: #3b5998;
-}
-
-
-//
-// topbar and footer as fixed 
-// site background
-//
-.topbar {
-    height: 71px;
-    
-    .menu-open & {
-        height: auto
-    }
-}
-.document {
-    background-color: @page-bg;
-}
-
-@media only screen and (min-width: 40.625em) and (min-height: 650px) {
-    body {
-        position: relative
-    } 
-    .document {
-        z-index: 2;
-        margin-top: 71px;
-        .transition;
-        
-        .menu-open & {
-            margin-top: 300px;
-        }
-        margin-bottom: 580px;
-        
-        border-top: 1px solid rgba(255,255,255,.7);
-        border-bottom: 1px solid rgba(255,255,255,.7);
-        box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
-    }
-    .topbar,
-    .footer {
-        position: fixed;
-        border: none;
-    }
-    .topbar {
-        z-index: 1;
-        top: 0;
-        box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
-        border: none;
-    }
-    
-    .footer {
-        z-index: 0;
-        height: 580px;
-        bottom: 0;
-        box-shadow: none;
-        
-        .menu-open & { .hide; }
-    }
-}
\ No newline at end of file
diff --git a/_src/assets/less/sticky.less b/_src/assets/less/sticky.less
deleted file mode 100644
index 72ef6783..00000000
--- a/_src/assets/less/sticky.less
+++ /dev/null
@@ -1,40 +0,0 @@
-/////////////////////////////////////
-// Sticky posts styles
-/////////////////////////////////////
-
-.sticky {
-    .divider-bottom;
-    padding-top: @line-height-computed;
-    padding-bottom: @line-height-computed;
-    
-    @media @breakpoint2 { 
-        padding-bottom: @line-height-computed*3;
-    }
-}
-
-.sticky-link {
-    display: block;
-    margin-bottom: @line-height-computed;
-    .transition-property(none);
-    
-    @media @breakpoint2 { 
-        margin-bottom: 0;
-        
-        &:hover {
-            .scale(1.03);
-        }
-    }
-}
-
-.sticky-title {
-    .h6;
-    font-size: .8em;
-    margin: 0;
-    .visuallyhidden;
-}
-
-.sticky-image {
-    display: block;
-
-    img { margin-bottom: 0; }
-}
\ No newline at end of file
diff --git a/_src/assets/less/syntax.less b/_src/assets/less/syntax.less
deleted file mode 100644
index 3f1f3881..00000000
--- a/_src/assets/less/syntax.less
+++ /dev/null
@@ -1,66 +0,0 @@
-//
-// Colorful
-// https://github.com/richleland/pygments-css
-//
-
-.highlight .hll { background-color: #ffffcc }
-.highlight .c { color: #808080 } /* Comment */
-.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */
-.highlight .k { color: #008000; font-weight: bold } /* Keyword */
-.highlight .o { color: #303030 } /* Operator */
-.highlight .cm { color: #808080 } /* Comment.Multiline */
-.highlight .cp { color: #507090 } /* Comment.Preproc */
-.highlight .c1 { color: #808080 } /* Comment.Single */
-.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
-.highlight .gd { color: #A00000 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #FF0000 } /* Generic.Error */
-.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.highlight .gi { color: #00A000 } /* Generic.Inserted */
-.highlight .go { color: #808080 } /* Generic.Output */
-.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.highlight .gt { color: #0040D0 } /* Generic.Traceback */
-.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */
-.highlight .s { background-color: #fff0f0 } /* Literal.String */
-.highlight .na { color: #0000C0 } /* Name.Attribute */
-.highlight .nb { color: #007020 } /* Name.Builtin */
-.highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */
-.highlight .no { color: #003060; font-weight: bold } /* Name.Constant */
-.highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */
-.highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */
-.highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */
-.highlight .nl { color: #907000; font-weight: bold } /* Name.Label */
-.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
-.highlight .nt { color: #007000 } /* Name.Tag */
-.highlight .nv { color: #906030 } /* Name.Variable */
-.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */
-.highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */
-.highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */
-.highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */
-.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
-.highlight .sc { color: #0040D0 } /* Literal.String.Char */
-.highlight .sd { color: #D04020 } /* Literal.String.Doc */
-.highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */
-.highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
-.highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
-.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */
-.highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */
-.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
-.highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */
-.highlight .ss { color: #A06000 } /* Literal.String.Symbol */
-.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #306090 } /* Name.Variable.Class */
-.highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */
-.highlight .vi { color: #3030B0 } /* Name.Variable.Instance */
-.highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/_src/assets/less/tables.less b/_src/assets/less/tables.less
deleted file mode 100644
index 260da4ac..00000000
--- a/_src/assets/less/tables.less
+++ /dev/null
@@ -1,47 +0,0 @@
-
-// TABLES
-/////////////////////////////////////
-
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-	width: 100%;
-	max-width: 100%;
-	background-color: transparent;
-	border-collapse: collapse;
-	border-spacing: 0;
-	margin-bottom: 1.5em;
-	border-bottom: 1px solid #cfd9e1;
-}
-
-td { vertical-align: top; }
-
-th,
-td {
-	padding: .7em .3em;
-	text-align: left;
-	vertical-align: top;
-	border-top: 1px solid #cfd9e1;
-}
-
-th {
-	font-weight: bold;
-}
-
-thead th {
-	vertical-align: bottom;
-}
-
-table tbody + tbody {
-  border-top: 2px solid #cfd9e1;
-}
-
-table tbody tr:nth-child(odd) td,
-table tbody tr:nth-child(odd) th {
-  background-color: rgba(255,255,255,.2);
-}
-
-table tbody tr:hover td,
-table tbody tr:hover th {
-  background-color: #f5f5f5;
-}
\ No newline at end of file
diff --git a/_src/assets/less/typography.less b/_src/assets/less/typography.less
deleted file mode 100644
index aeac187d..00000000
--- a/_src/assets/less/typography.less
+++ /dev/null
@@ -1,226 +0,0 @@
-/////////////////////////////////////
-// TYPOGRAPHY CSS FOR KREMALICIOUS.COM
-/////////////////////////////////////
-
-body {
-    font-family: @font-family-base;
-	font-weight: @font-weight-base;
-    color: @text-color;
-	word-wrap: break-word;
-
-    font-size: @font-size-base;
-    line-height: @line-height-base;
-
-    @media @breakpoint1 {
-        line-height: @line-height-computed;
-    }
-
-	@media @breakpoint3 {
-		font-size: 125%;
-		line-height: 1.6em;
-	}
-}
-
-
-// HEADINGS
-/////////////////////////////////////
-
-h1,h2,h3,h4,h5,h6,
-.h1,.h2,.h3,.h4,.h5,.h6 {
-    font-family: @headings-font-family;
-    font-weight: @headings-font-weight;
-    line-height: @headings-line-height;
-	color: @headings-color;
-}
-
-h1,
-h2 {
-  margin-top: @line-height-computed*2;
-  margin-bottom: @line-height-computed*2;
-}
-h3,
-h4,
-h5,
-h6 {
-  margin-top: @line-height-computed;
-  margin-bottom: @line-height-computed;
-}
-
-h1, .h1 { font-size: ceil(@font-size-base * 2.75); }
-h2, .h2 { font-size: ceil(@font-size-base * 2); }
-h3, .h3 { font-size: ceil(@font-size-base * 1.75); }
-h4, .h4 { font-size: ceil(@font-size-base * 1.35); }
-h5, .h5 { font-size: ceil(@font-size-base * 1.1); }
-h6, .h6 { font-size: @font-size-base; }
-
-
-// LINKS
-/////////////////////////////////////
-
-a,
-a:visited {
-	text-decoration: none;
-	color: @link-color;
-	.transition;
-	position: relative;
-}
-
-a:hover,
-h1 a:visited:hover,
-h2 a:visited:hover,
-h3 a:visited:hover {
-	color: @link-color-hover;
-}
-
-a:active,
-h1 a:visited:active {
-    .transition(none);
-	top: 1px;
-    background: @link-color;
-    color: #fff;
-    text-shadow: none;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h1 a:visited,
-h2 a:visited,
-h3 a:visited {
-	color: @headings-color;
-}
-
-
-// TEXT ELEMENTS
-/////////////////////////////////////
-
-p,ul,ol,blockquote,pre,td,th,label,img {
-	margin: 0 0 @line-height-computed;
-}
-
-p, li {
-	.hyphens(auto);
-}
-
-b, strong,
-.bold {
-	font-weight: 700;
-	font-style: normal;
-}
-
-em {
-	font-style: italic;
-}
-
-hr {
-    border: 0;
-    .divider-bottom;
-    margin-bottom: @line-height-computed*2
-}
-
-
-// QUOTES
-/////////////////////////////////////
-
-blockquote,
-blockquote > p {
-	font-style: italic;
-	color: @text-color-light;
-}
-
-blockquote {
-    padding: (@line-height-computed / 2) @line-height-computed;
-    margin: 0 0 @line-height-computed;
-	border-left: 2px solid @text-color-dimmed;
-    p:last-child {
-        margin-bottom: 0;
-    }
-}
-
-
-// LISTS
-/////////////////////////////////////
-
-// Unordered and Ordered lists
-ul,
-ol {
-    margin-top: 0;
-    margin-bottom: @line-height-computed;
-    list-style: none;
-    padding-left: 2em;
-}
-
-ul li {
-	position: relative;
-	margin-bottom: .5em;
-
-	&:before {
-		font-size: 14px;
-		font-family: 'entypo';
-		color: @text-color-light;
-		speak: none;
-		font-style: normal;
-		font-weight: normal;
-		font-variant: normal;
-		text-transform: none;
-		line-height: 1;
-		-webkit-font-smoothing: antialiased;
-
-		position: absolute;
-		left: -2em;
-		top: .5em;
-	}
-}
-
-ol {
-	counter-reset: ol-counter;
-
-    li {
-        position: relative;
-
-        &:before {
-        	position: absolute;
-        	left: -2em;
-        	top: 0;
-        	color: #fff;
-        	content: counter(ol-counter);
-        	counter-increment: ol-counter;
-        	font-style: italic;
-            font-size: 14px;
-        	background: @text-color-dimmed;
-
-        	width: 20px;
-            height: 20px;
-            border-radius: 20px;
-            line-height: 20px;
-        	display: block;
-        	text-align: center;
-        	top: .2em;
-        	.box-shadow(0 1px 0 rgba(255,255,255,.7));
-        }
-    }
-}
-
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin-bottom: 0;
-}
-
-// List options
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-nav ul, nav ol {
-    &:extend(.list-unstyled);
-}
-
-
-// SELECTION
-/////////////////////////////////////
-
-::-moz-selection { background: #2e4f5c; color: #fff; }
-::selection { background: #2e4f5c; color: #fff; }
\ No newline at end of file
diff --git a/_src/assets/less/utilities.less b/_src/assets/less/utilities.less
deleted file mode 100644
index 7f762e76..00000000
--- a/_src/assets/less/utilities.less
+++ /dev/null
@@ -1,105 +0,0 @@
-/////////////////////////////////////
-// Utilities
-/////////////////////////////////////
-
-// Clear stuff
-.clearfix {
-	clear: both;
-	&:before,
-	&:after {
-		content: "";
-		display: table;
-	}
-	&:after {
-		clear: both;
-	}
-}
-
-// Quick floats
-/////////////////////////////////////
-
-.alignleft { float: left; }
-.alignright { float: right; }
-.aligncenter {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-// Text alignment
-/////////////////////////////////////
-
-.textcenter {
-	text-align: center
-}
-
-
-// Placeholder text
-/////////////////////////////////////
-
-.placeholder(@color: @placeholder-text) {
-  &:-moz-placeholder {
-    color: @color;
-    font-weight: @font-weight-base;
-  }
-  &:-ms-input-placeholder {
-    color: @color;
-    font-weight: @font-weight-base;
-  }
-  &::-webkit-input-placeholder {
-    color: @color;
-    font-weight: @font-weight-base;
-  }
-}
-
-// Toggling content
-/////////////////////////////////////
-
-// Hide from both screenreaders and browsers: h5bp.com/u
-.hide {
-	display: none !important;
-	visibility: hidden;
-}
-.show {
-	display: block;
-	visibility: visible;
-}
-
-// Hide only visually, but have it available for screenreaders: h5bp.com/v
-.visuallyhidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	// Extends the .visuallyhidden class to allow the
-	// element to be focusable when navigated to via the keyboard: h5bp.com/p
-	&.focusable:active,
-	&.focusable:focus {
-		clip: auto;
-		height: auto;
-		margin: 0;
-		overflow: visible;
-		position: static;
-		width: auto;
-	}
-}
-
-// Hide visually and from screenreaders, but maintain layout
-.invisible {
-	visibility: hidden;
-}
-
-// CSS image replacement
-/////////////////////////////////////
-.ir,
-.hide-text {
-	font: 0/0 a;
-	color: transparent;
-	text-shadow: none;
-	background-color: transparent;
-	border: 0;
-}
\ No newline at end of file
diff --git a/_src/assets/less/variables.less b/_src/assets/less/variables.less
deleted file mode 100644
index 5d7ce12c..00000000
--- a/_src/assets/less/variables.less
+++ /dev/null
@@ -1,68 +0,0 @@
-// Colors
-/////////////////////////////////////
-
-@brand-dark:            	#015565;
-@brand-light:           	#e7eef4;
-@brand-cyan:            	#3a9085;
-@brand-grey:            	#56666e;
-@brand-grey-light:			#96a6ad;
-
-
-// Typography
-/////////////////////////////////////
-
-@font-family-monospace:   	Menlo, Monaco, Consolas, 'Courier New', monospace;
-
-@font-family-base:        	'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-@font-weight-base:			400;
-
-@font-size-base:          	18px;
-@font-size-large:         	ceil(@font-size-base * 1.15);
-@font-size-small:         	ceil(@font-size-base * 0.8);
-@font-size-mini:          	ceil(@font-size-base * 0.7);
-
-@line-height-base:			1.5;
-@line-height-computed:    	floor(@font-size-base * @line-height-base);
-
-@headings-font-family:    	'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
-@headings-font-weight:    	500; // Medium
-@headings-line-height:    	1.2;
-
-
-// Text Colors
-/////////////////////////////////////
-
-@text-color:				lighten(@brand-grey, 5%);
-@text-color-light:			darken(@brand-grey-light, 5%);
-@text-color-dimmed:			lighten(@brand-grey-light, 5%);
-@headings-color:         	@brand-dark;
-
-
-// Scaffolding
-/////////////////////////////////////
-
-@body-bg:        			#dfe8ef;
-@page-bg:                   @brand-light;
-@border-radius-base:		3px;
-
-
-// Links
-/////////////////////////////////////
-
-@link-color:				lighten(@brand-cyan, 5%);
-@link-color-hover:			lighten(@link-color, 10%);
-
-
-// Responsive breakpoints
-/////////////////////////////////////
-
-@breakpoint1:           	~"only screen and (min-width: 30em)";
-@breakpoint2:           	~"only screen and (min-width: 40.625em)";
-@breakpoint3:           	~"only screen and (min-width: 87.500em)";
-
-
-// High dpi media query
-/////////////////////////////////////
-
-@highDPI:				    ~"print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) ";
-@highDPI_3x:				~"print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) ";
\ No newline at end of file
diff --git a/_src/assets/styl/alerts.styl b/_src/assets/styl/alerts.styl
index 2f621dd7..a235dd10 100644
--- a/_src/assets/styl/alerts.styl
+++ b/_src/assets/styl/alerts.styl
@@ -1,15 +1,15 @@
 //
 // kremalicious3
 // --------------
-// Mixins
+// Alerts
 //
 
 .alert
-    padding: $padding-base-horizontal
+    padding: $padding-base-vertical $padding-base-horizontal
     margin-bottom: $line-height-computed
     border-radius: $border-radius-base
-	font-size: $font-size-small
-	border: 1px solid transparent
+    font-size: $font-size-small
+    border: 1px solid transparent
 
     // alignment and spacing of inner content
     > p,
@@ -19,17 +19,17 @@
         margin-top: 5px
 
 .alert-success
-	color: #468847
-	background: #dff0d8
-	border-color: #b5c6a8
+    color: #468847
+    background: #dff0d8
+    border-color: #b5c6a8
 
 .alert-danger,
 .alert-error
-	color: #b94a48
-	background: #f2dede
-	border-color: #dcc5ca
+    color: #b94a48
+    background: #f2dede
+    border-color: #dcc5ca
 
 .alert-info
-	color: #3a87ad
-	background: #d9edf7
-	border-color: #a6ced8
\ No newline at end of file
+    color: #3a87ad
+    background: #d9edf7
+    border-color: #a6ced8
\ No newline at end of file
diff --git a/_src/assets/styl/animations.styl b/_src/assets/styl/animations.styl
new file mode 100644
index 00000000..2220c93d
--- /dev/null
+++ b/_src/assets/styl/animations.styl
@@ -0,0 +1,44 @@
+//
+// kremalicious3
+// --------------
+// Animations
+//
+
+// Buttery Smooth(tm)
+////////////////////////////////////
+
+gpuacceleration()
+    -webkit-transform: translate3d(0,0,0)
+    -webkit-backface-visibility: hidden
+    -webkit-perspective: 1000
+
+.gpuacceleration
+    gpuacceleration()
+
+
+// Masonry
+////////////////////////////////////
+
+.masonry
+    transition-property: height, width
+
+    &,
+    .masonry-brick
+        transition-duration: 0.7s
+
+    .masonry-brick
+        transition-property: left, right, top
+
+
+// Loading Thingy
+////////////////////////////////////
+
+.loading
+    @extend .gpuacceleration
+    animation: loadingThingy .2s infinite
+
+@keyframes loadingThingy
+    0%
+        opacity: 1
+    100%
+        opacity: 0
diff --git a/_src/assets/styl/buttons.styl b/_src/assets/styl/buttons.styl
index 034c7f29..91cb547d 100644
--- a/_src/assets/styl/buttons.styl
+++ b/_src/assets/styl/buttons.styl
@@ -17,7 +17,7 @@
     transition: all .2s ease-in-out
 
     // Default Button
-    button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base)
+    button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height-base, $border-radius-base)
     background-color: rgba(255,255,255,.1)
     border: 1px solid rgba(94,131,162,.3)
     border-bottom-color: rgba(94,131,162,.4)
@@ -25,81 +25,69 @@
     font-weight: $headings-font-weight
     color: $brand-grey
     text-transform: uppercase
-	box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)
+    box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)
 
-	&:hover,
+    &:hover,
     &:focus
-		background-color: rgba(255,255,255,.5)
+        background-color: rgba(255,255,255,.5)
 
-	&:active
-		background-color: transparent
-		border-top-color: rgba(94,131,162,.5)
-		box-shadow: 0 1px 0 #fff
-		transition: none
+    &:active
+        background-color: transparent
+        border-top-color: rgba(94,131,162,.5)
+        box-shadow: 0 1px 0 #fff
+        transition: none
 
     &:focus
        outline: 0
        border-color: $input-border-focus
 
-   // Disabled State
-   &.disabled,
-   &[disabled],
-   fieldset[disabled] &
-       cursor: not-allowed
-       pointer-events: none // Future-proof disabling of clicks
-       opacity: .6
-       box-shadow: none
+    // Disabled State
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] &
+        cursor: not-allowed
+        pointer-events: none // Future-proof disabling of clicks
+        opacity: .6
+        box-shadow: none
 
 .btn span
-	font-size: .9em
-	color: rgba(19, 56, 50, .6)
-	margin-left: .3em
+    font-size: .9em
+    color: rgba(19, 56, 50, .6)
+    margin-left: .3em
 
 // Primary Button
 .btn-primary
-	color: darken($link-color, 30%)
-	text-shadow: 0 1px 0 rgba(255,255,255,.3)
-	background: lighten(@link-color, 15%)
-	border-color: rgba(40,101,93,.4)
-	border-bottom-color: rgba(40,101,93,.5)
-	box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.4)
+    color: darken($link-color, 50%)
+    text-shadow: 0 1px 0 rgba(255,255,255,.3)
+    background: lighten($link-color, 15%)
+    border-color: $link-color
+    box-shadow: 0 1px 3px $brand-grey-light, inset 0 1px 0 rgba(255,255,255,.4)
 
-	&:hover,
+    &:hover,
     &:focus
-		color: darken($link-color, 30%)
-		background-color: lighten($link-color, 25%)
-		text-shadow: 0 1px 0 rgba(255,255,255,.3)
-
-	&:active
-		color: darken(@link-color, 30%)
-		background-color: lighten(@link-color, 15%)
-		border-top-color: rgba(40,101,93,.9)
-		box-shadow: 0 1px 0 #fff, inset 0 0 18px rgba(43,100,92,.3)
+        color: darken($link-color, 50%)
+        background-color: lighten($link-color, 25%)
+        text-shadow: 0 1px 0 rgba(255,255,255,.3)
 
+    &:active
+        color: darken($link-color, 50%)
+        background-color: lighten($link-color, 15%)
+        box-shadow: 0 1px 0 #fff, inset 0 2px 5px rgba(43,100,92,.5)
 
 .more-link
-    @extend .btn
-	background: none
-	border: none
-	box-shadow: none
-	padding: 0
-	margin: 0
+    font-family: $headings-font-family
+    font-weight: $headings-font-weight
+    font-size: $font-size-small
+    color: $link-color
+    text-transform: uppercase
 
+    // icon
     i:before
         top: .15em
         position: relative
 
-	&:hover,
-    &:focus
-		background: none
-
-    &:active
-        background: $link-color
-        box-shadow: none
-
-
 .btn-block
-	display: block
+    display: block
 
 
 //
@@ -109,34 +97,54 @@
     display: inline-block
     padding: 1px 3px 0 3px
     height: 21px
-	border: 1px solid #ccc
-	border-radius: 3px
-	font: bold 11px/17px Helvetica, Arial, sans-serif
-	text-align: left
-	color: #333
-	text-transform: none
+    border: 1px solid #ccc
+    border-radius: 3px
+    font: bold 11px/17px Helvetica, Arial, sans-serif
+    text-align: left
+    color: #333
+    text-transform: none
     text-decoration: none
-	text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
-	background-color: #f8f8f8
-    background-image: linear-gradient(top, #fff, #dedede);
-	vertical-align: top
-	box-shadow: none
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
+    background-color: #f8f8f8
+    background-image: linear-gradient(top, #fff, #dedede)
+    vertical-align: top
+    box-shadow: none
 
     &:hover,
     &:focus,
     &:active
         border-color: #bbb
         background-color: #d9d9d9
-        background-image: linear-gradient(top, #f8f8f8, #d9d9d9);
+        background-image: linear-gradient(top, #f8f8f8, #d9d9d9)
 
     &:active
         top: 0
         background-color: #efefef
-        box-shadow: inset 0 3px 5px rgba(0,0,0,0.1)
+        box-shadow: inset 0 3px 5px rgba(0,0,0, .1)
 
     // icon
-	&:before
-		font-size: 15px
+    &:before
+        font-size: 15px
         margin-right: 2px
         top: 1px
         color: #0089cb
+
+
+// Close button
+/////////////////////////////////////
+
+a.close,
+.close
+    @extend .textcenter
+    width: 16px
+    height: 16px
+    line-height: 12px
+    font-size: 16px
+    padding: 0
+    border-radius: 16px
+    display: block
+    background: $brand-grey-light
+    color: #fff
+
+    &:hover
+        background: $link-color-hover
\ No newline at end of file
diff --git a/_src/assets/styl/code.styl b/_src/assets/styl/code.styl
index 276c91fb..3443b87a 100644
--- a/_src/assets/styl/code.styl
+++ b/_src/assets/styl/code.styl
@@ -40,9 +40,9 @@ pre
     border-radius: $border-radius-base
 
     // make 'em scrollable
-	overflow: scroll
-	-webkit-overflow-scrolling: touch
-	max-height: 300px
+    overflow: scroll
+    -webkit-overflow-scrolling: touch
+    max-height: 300px
 
     // Account for some code outputs that place code tags in pre tags
     code
diff --git a/_src/assets/styl/comments.styl b/_src/assets/styl/comments.styl
new file mode 100644
index 00000000..ba0ba6a6
--- /dev/null
+++ b/_src/assets/styl/comments.styl
@@ -0,0 +1,21 @@
+//
+// kremalicious3
+// --------------
+// Comments
+//
+
+.comments
+    @extend .clearfix, .textcenter
+    font-size: $font-size-small
+    font-style: italic
+    color: $text-color-dimmed
+    margin-top: $line-height-computed*2
+    border-radius: $border-radius-base
+
+    p,
+    .btn
+        margin-bottom: 0
+
+    .btn-wrap
+        margin-top: $line-height-computed/2
+        height: 27px
\ No newline at end of file
diff --git a/_src/assets/styl/content-featured.styl b/_src/assets/styl/content-featured.styl
new file mode 100644
index 00000000..fb4efdc8
--- /dev/null
+++ b/_src/assets/styl/content-featured.styl
@@ -0,0 +1,33 @@
+//
+// kremalicious3
+// --------------
+// Content - Featured Posts
+//
+
+.featured
+    @extend .divider-bottom
+    padding-top: $line-height-computed
+    padding-bottom: $line-height-computed
+
+    @media $breakpoint2
+        padding-bottom: ($line-height-computed*3)
+
+.featured-link
+    display: block
+    margin-bottom: $line-height-computed
+    transition-property: none
+
+    @media $breakpoint2
+        margin-bottom: 0
+
+        &:hover
+            transform: scale(1.03)
+
+.featured-title
+    @extend .visuallyhidden
+
+.featured-image
+    display: block
+
+    img
+        margin-bottom: 0
diff --git a/_src/assets/styl/content-link.styl b/_src/assets/styl/content-link.styl
new file mode 100644
index 00000000..f9442656
--- /dev/null
+++ b/_src/assets/styl/content-link.styl
@@ -0,0 +1,19 @@
+//
+// kremalicious3
+// --------------
+// Content - Link Post
+//
+
+.linkurl
+    @extend .ellipsis, .aligncenter
+    font-family: $font-family-base
+    font-size: $font-size-mini
+    color: $text-color-dimmed
+    padding: ($line-height-computed/3) 0
+    max-width: 70%
+
+    @media $breakpoint2
+        max-width: 50%
+
+.permalink-link
+    @extend .alignright
\ No newline at end of file
diff --git a/_src/assets/styl/content-photo.styl b/_src/assets/styl/content-photo.styl
new file mode 100644
index 00000000..08a7697c
--- /dev/null
+++ b/_src/assets/styl/content-photo.styl
@@ -0,0 +1,73 @@
+//
+// kremalicious3
+// --------------
+// Content - Photo Post
+//
+
+.hentry.format-photo
+    @extend .textcenter
+
+    figure
+        @extend .aligncenter
+        position: relative
+        display: inline-block
+
+        img,
+        figcaption
+            margin-bottom: 0
+
+        img
+            max-height: 540px
+
+        figcaption
+            @extend .transition
+            position: absolute
+            left: 0
+            top: 25%
+            max-width: 55%
+            min-width: 45%
+            text-align: right
+            font-family: $headings-font-family
+            font-weight: $headings-font-weight
+            font-style: normal
+            font-size: $font-size-small
+            padding: ($line-height-computed/3)
+            background: $link-color
+            background: rgba($link-color, .7)
+            color: #fff
+            text-shadow: 0 1px 0 #000
+
+            opacity: 0
+            transform: translate(0, -20px)
+
+        &:hover figcaption
+            opacity: 1
+            transform: translate(0, 0)
+
+    .entry-content
+        text-align: left
+
+    .page-single &
+        padding-top: ($line-height-computed*2)
+        padding-bottom: ($line-height-computed*3)
+
+        @media $breakpoint2
+            padding-top: ($line-height-computed*4)
+            padding-bottom: ($line-height-computed*6)
+
+        figure img
+            max-height: none
+
+        figcaption
+            opacity: 1
+            transform: translate(0,0)
+            top: auto
+            bottom: 0
+            background: #000
+            background: rgba(#000, .4)
+
+.photo-link
+    display: block
+
+    &:active
+        background: none
\ No newline at end of file
diff --git a/_src/assets/styl/content-related.styl b/_src/assets/styl/content-related.styl
new file mode 100644
index 00000000..340a1e8c
--- /dev/null
+++ b/_src/assets/styl/content-related.styl
@@ -0,0 +1,35 @@
+//
+// kremalicious3
+// --------------
+// Content - Related Posts
+//
+
+.related-posts
+    .row
+        margin-top: 0
+
+.related-posts-title
+    @extend .heading-band, .h3
+    margin-bottom: $line-height-computed
+
+.related-post
+
+    .post-title
+        @extend .h6
+        margin-top: $line-height-computed
+        margin-bottom: $line-height-computed
+
+    .post-title,
+    .post-title-link
+        color: $brand-grey-light
+
+        &:hover,
+        &:focus
+            color: $link-color
+
+        &:active
+            color: #fff
+            transition: none
+
+    .post-title-link
+        display: block
\ No newline at end of file
diff --git a/_src/assets/styl/content.styl b/_src/assets/styl/content.styl
index b309c885..097bab2f 100644
--- a/_src/assets/styl/content.styl
+++ b/_src/assets/styl/content.styl
@@ -11,53 +11,56 @@
 .page-title
     @extend .h2, .heading-band
     color: $brand-grey-light
-    margin-top: $line-height-computed/2
-    margin-bottom: $line-height-computed/2
+    margin-top: ($line-height-computed/2)
+    margin-bottom: ($line-height-computed/2)
 
     // icons
     &:before
         font-size: 32px
-        color: fade($text-color-dimmed, 70%)
+        color: rgba($text-color-dimmed, .7)
         margin-right: .5em
 
     @media $breakpoint2
         margin-left: -108%
+
         .page-photos &
-            margin-bottom: $line-height-computed*4
+            margin-bottom: ($line-height-computed*4)
 
 .hentry
     @extend .divider-bottom
-	padding: $line-height-computed*2 0
+    padding: ($line-height-computed*2) 0
 
-	@media $breakpoint2
-		padding: $line-height-computed*4 0
+    @media $breakpoint2
+        padding: ($line-height-computed*4) 0
 
-	&:first-child
+    &:first-child
         padding-top: $line-height-computed
 
     .page-single &
-        padding-bottom: $line-height-computed*2
+        padding-bottom: ($line-height-computed*2)
         border: none
+
         &:before
             @extend .hide
 
 // Post Title
 /////////////////////////////////////
 
-.entry-title {
+.entry-title
     @extend .h1, .textcenter
-	color: $headings-color
-	margin-top: 0
-	margin-bottom: $line-height-computed
+    color: $headings-color
+    margin-top: 0
+    margin-bottom: $line-height-computed
 
-	.format-link &
+    .format-link &
         @extend .h3
 
+
 // Post Content
 /////////////////////////////////////
 
 .entry-content
-	h1,
+    h1,
     h2
         @extend .heading-band
 
@@ -68,30 +71,12 @@
         margin-bottom: 0
 
 
-// post category icons
-/////////////////////////////////////
-
-.posttype
-	@extend .aligncenter
-	width: 20px
-	margin-bottom: $line-height-computed/2
-	margin-top: -$line-height-computed
-
-	// icon adjustments
-	&:before
-		font-size: 20px
-		color: $text-color-light
-
-	&:hover:before
-		color: $link-color
-
-
 // Post meta
 /////////////////////////////////////
 
 .entry-meta
     @extend .clearfix
-    margin-top: $line-height-computed*2
+    margin-top: ($line-height-computed*2)
     font-size: $font-size-small
 
 .byline,
@@ -101,10 +86,10 @@ time,
 
 .byline,
 time
-	font-style: italic
+    font-style: italic
 
 .byline
-	margin-bottom: 0
+    margin-bottom: 0
     color: $text-color-light
 
     .by
@@ -139,7 +124,7 @@ time
         display: block
 
     .download
-        margin-top: $line-height-computed/2
+        margin-top: ($line-height-computed/2)
 
         @media $breakpoint2
             margin-top: 0
@@ -152,28 +137,28 @@ time
     @media $breakpoint2
         width: 125%
         margin-left: -12.5%
-        .clearfix
+        clearfix()
 
     .hentry
         @media $breakpoint1
             width: 49%
-    		float: left
-    		clear: none
-    		padding-top: 0
-    		padding-bottom: 0
-    		margin-bottom: .7em
-    		margin-top: 0
-    		margin-left: 0
-    		margin-right: 1%
-    		border: none
+            float: left
+            clear: none
+            padding-top: 0
+            padding-bottom: 0
+            margin-bottom: .7em
+            margin-top: 0
+            margin-left: 0
+            margin-right: 1%
+            border: none
 
-    		&:before
+            &:before
                 display: none
 
             &:nth-child(2n+1)
                 margin-right: 0
 
-    		&:last-child
+            &:last-child
                 margin-bottom: 3em
 
 .grid-sizer
diff --git a/_src/assets/styl/footer.styl b/_src/assets/styl/footer.styl
new file mode 100644
index 00000000..517d6331
--- /dev/null
+++ b/_src/assets/styl/footer.styl
@@ -0,0 +1,76 @@
+//
+// kremalicious3
+// --------------
+// Footer
+//
+
+.footer
+    @extend .textcenter
+    background: rgba($brand-dark, .05)
+    border-top: 1px solid rgba(255,255,255,.7)
+    box-shadow: inset 0 1px 4px rgba($brand-dark, .2)
+
+    .gravatar
+        margin-bottom: ($line-height-computed/2)
+
+    .footer-description
+        @extend .h5
+        a
+            display: block
+
+    &,
+    .footer-description
+        color: $text-color-light
+        line-height: $line-height-computed
+
+    .footer-copyright
+        @extend .divider-top
+        padding-top: $line-height-computed
+        padding-bottom: $line-height-computed
+
+        p
+            margin-bottom: 0
+            font-size: $font-size-mini
+
+// Subscribe component
+.subscribe
+    margin: $line-height-computed auto
+    p
+        @extend .clearfix, .textcenter
+        margin: 0
+
+    .btn
+        @extend .textcenter
+        width: 48px
+        height: 40px
+        line-height: 34px
+        padding: 0
+        margin: 0
+        display: inline-block
+        color: $text-color-light
+
+        &:first-child
+            margin-left: 0
+
+        &:last-child
+            margin-right: 0
+
+        &:before
+            // Icon resets for color animations
+            transition: color .3s ease-in-out
+            color: inherit
+            margin: 0 !important
+
+.subscribe-title
+    @extend .h5
+    color: $text-color-dimmed
+    margin-bottom: ($line-height-computed/2)
+
+.footer:hover .subscribe .rss:before
+    color: #e15a00
+.footer:hover .subscribe .twitter:before
+    color: #019ad2
+.footer:hover .subscribe .google:before
+    color: #c63b1e
+.footer:hover .subscribe .facebook:before
+    color: #3b5998
\ No newline at end of file
diff --git a/_src/assets/styl/forms.styl b/_src/assets/styl/forms.styl
index 55287e3f..30f839f6 100644
--- a/_src/assets/styl/forms.styl
+++ b/_src/assets/styl/forms.styl
@@ -80,7 +80,7 @@ select[size]
     -webkit-appearance: none // screw you, iOS default inset box-shadow
 
     // Placeholder
-    placeholder(color $input-color-placeholder, font-size $font-size-base, line-height $line-height-base+.3)
+    placeholder(color $input-color-placeholder, font-size $font-size-base, line-height $line-height-base)
 
     &:hover
         lighten($input-bg, 30%)
diff --git a/_src/assets/styl/grid.styl b/_src/assets/styl/grid.styl
index bd12d4e9..e54fe14e 100644
--- a/_src/assets/styl/grid.styl
+++ b/_src/assets/styl/grid.styl
@@ -7,17 +7,16 @@
 
 // Prevents padding to be added
 *
-	box-sizing: border-box
+    box-sizing: border-box
 
 // 320px and up
 .container
-	padding: 0 7%
-	width: 100%
+    padding: 0 7%
+    width: 100%
 
 .row
-	margin-top: $line-height-computed
-	margin-bottom: $line-height-computed
-
+    margin-top: $line-height-computed
+    margin-bottom: $line-height-computed
 
 .col1,
 .col2,
@@ -25,10 +24,10 @@
 .col4,
 .col5,
 .col6
-	width: 100%
-	margin-left: 0
-	// ensures empty columns won't collapse
-	min-height: 1px
+    width: 100%
+    margin-left: 0
+    // ensures empty columns won't collapse
+    min-height: 1px
 
 // clear
 .container,
@@ -36,46 +35,45 @@
     @extend .clearfix
 
 @media $breakpoint2
-
     .container
         padding: 0 15%
 
-	.row
-	    max-width: 35em
-	    margin: $line-height-computed*2 auto
-	    padding-left: 0
-	    padding-right: 0
+    .row
+        max-width: 35em
+        margin: ($line-height-computed*2) auto
+        padding-left: 0
+        padding-right: 0
 
-	.col1,
-	.col2,
-	.col3,
-	.col4,
-	.col5,
-	.col6
-		float: left
-		margin-left: 4%
+    .col1,
+    .col2,
+    .col3,
+    .col4,
+    .col5,
+    .col6
+        float: left
+        margin-left: 4%
 
-	.col1:first-child,
-	.col2:first-child,
-	.col3:first-child,
-	.col4:first-child,
-	.col5:first-child,
-	.col6,
+    .col1:first-child,
+    .col2:first-child,
+    .col3:first-child,
+    .col4:first-child,
+    .col5:first-child,
+    .col6,
     .col3:nth-child(2n+3),
     .col2:nth-child(3n+4),
     .col1:nth-child(6n+7)
         margin-left: 0
         clear: both
 
-	.col1
+    .col1
         width: 13%
-	.col2
+    .col2
         width: 30.6%
-	.col3
+    .col3
         width: 48%
-	.col4
+    .col4
         width: 65%
-	.col5
+    .col5
         width: 82%
-	.col6
+    .col6
         width: 100%
\ No newline at end of file
diff --git a/_src/assets/styl/header.styl b/_src/assets/styl/header.styl
new file mode 100644
index 00000000..43e7e16d
--- /dev/null
+++ b/_src/assets/styl/header.styl
@@ -0,0 +1,75 @@
+//
+// kremalicious3
+// --------------
+// Header
+//
+
+// Topbar
+/////////////////////////////////////
+
+.topbar
+    @extend .clearfix
+    background: $body-bg
+    border-bottom: 1px solid rgba(255,255,255,.7)
+    box-shadow: inset 0 1px 4px rgba($brand-dark, .2), inset 0 -1px 4px rgba($brand-dark, .2)
+
+    .row
+        margin-top: ($line-height-computed/2)
+        margin-bottom: ($line-height-computed/2)
+        position: relative
+
+
+// Logo
+/////////////////////////////////////
+
+.logo
+    display: block
+    background-image: url('../img/logo.png')
+    background-repeat: no-repeat
+    background-position: left top
+    width: 47px
+    height: 31px
+
+    @media $breakpoint2
+        width: 183px
+
+    @media $highDPI
+        background-image: url('../img/logo@2x.png')
+        background-size: 183px 62px
+
+    @media $highDPI_3x
+        background-image: url('../img/logo@3x.png')
+        background-size: 183px 62px
+
+
+// Banner
+/////////////////////////////////////
+
+.banner
+    @extend .alignleft
+
+    @media $breakpoint2
+        margin-left: -54px
+
+    .banner-title
+        margin-top: .1em
+        margin-bottom: 0
+        // display toned down logo
+        // by default
+        @extend .logo
+
+    .banner-logo
+        @extend .ir
+        // repeat logo
+        // but display hover version
+        @extend .logo
+        background-position: left bottom
+
+        // hide by default
+        opacity: 0
+        // show smooooothly on hover
+        &:hover
+            opacity: 1
+
+        &:active
+            top: 0
\ No newline at end of file
diff --git a/_src/assets/styl/icons.styl b/_src/assets/styl/icons.styl
index a4c4aed3..fd927ab3 100644
--- a/_src/assets/styl/icons.styl
+++ b/_src/assets/styl/icons.styl
@@ -6,27 +6,24 @@
 
 
 @font-face
-	font-family: 'entypo'
-	src:url('../fonts/entypo.eot')
-	src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
-		url('../fonts/entypo.woff') format('woff'),
-		url('../fonts/entypo.ttf') format('truetype'),
-		url('../fonts/entypo.svg#entypo') format('svg')
-	font-weight: normal
-	font-style: normal
+    font-family: 'entypo'
+    src: url('../fonts/entypo.eot')
+    src: url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),  url('../fonts/entypo.woff') format('woff'), url('../fonts/entypo.ttf') format('truetype'), url('../fonts/entypo.svg#entypo') format('svg')
+    font-weight: normal
+    font-style: normal
 
-[class*="icon-"]:before
-	color: $text-color-light
-	font-size: 20px
-	font-family: 'entypo'
-	speak: none
-	font-style: normal
-	font-weight: normal
-	font-variant: normal
-	text-transform: none
-	line-height: 1
-	-webkit-font-smoothing: antialiased
-	-moz-osx-font-smoothing: grayscale
+.icon:before
+    color: $text-color-light
+    font-size: 20px
+    font-family: 'entypo'
+    speak: none
+    font-style: normal
+    font-weight: normal
+    font-variant: normal
+    text-transform: none
+    line-height: 1
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
 
     .btn&
         font-size: 18px
@@ -39,76 +36,75 @@
     .btn-primary&
         color: darken($link-color, 15%)
 
-
 .icon-twitter:before
-	content: "\e600"
+    content: "\e600"
 
 .icon-rss:before
-	content: "\e603"
+    content: "\e603"
 
 .icon-user:before,
 .icon-personal:before
-	content: "\e604"
+    content: "\e604"
 
 .icon-leaf:before
-	content: "\e605"
+    content: "\e605"
 
 .icon-link:before
-	content: "\e606"
+    content: "\e606"
 
 .icon-pictures:before,
 .icon-photos:before
-	content: "\e607"
+    content: "\e607"
 
 .icon-camera:before,
 .icon-photography:before
-	content: "\e608"
+    content: "\e608"
 
 .icon-arrow-down-circle:before,
 .icon-download:before
-	content: "\e609"
+    content: "\e609"
 
 .icon-forward:before
-	content: "\e60a"
+    content: "\e60a"
 
 .icon-heart:before
-	content: "\e60b"
+    content: "\e60b"
 
 .icon-info:before
-	content: "\e60c"
+    content: "\e60c"
 
 .icon-github:before
-	content: "\e60e"
+    content: "\e60e"
 
 .icon-star:before,
 .entry-content ul li:before
-	content: "\e60d"
+    content: "\e60d"
 
 .icon-search:before
-	content: "\e60f"
+    content: "\e60f"
 
 .icon-googleplus:before
-	content: "\e601"
+    content: "\e601"
 
 .icon-facebook:before
-	content: "\e602"
+    content: "\e602"
 
 .icon-list:before
-	content: "\e610"
+    content: "\e610"
 
 .icon-tools:before,
 .icon-design:before
-	content: "\e611"
+    content: "\e611"
 
 .icon-arrow-down:before
-	content: "\e612"
+    content: "\e612"
 
 .icon-arrow-right:before
-	content: "\e614"
+    content: "\e614"
 
 .icon-arrow-left:before
-	content: "\e615"
+    content: "\e615"
 
 .icon-gift:before,
 .icon-goodies:before
-	content: "\e613"
\ No newline at end of file
+    content: "\e613"
\ No newline at end of file
diff --git a/_src/assets/styl/kremalicious3.styl b/_src/assets/styl/kremalicious3.styl
index ed5966c9..42b4e9f9 100644
--- a/_src/assets/styl/kremalicious3.styl
+++ b/_src/assets/styl/kremalicious3.styl
@@ -6,57 +6,45 @@
 
 
 // Normalize all the things
-@import 'bower_components/normalize-css/normalize.css'
+@import '../../../bower_components/normalize-css/normalize.css'
+
+// Nib Nib
+@import 'nib'
 
 // Core variables and mixins
 @import 'variables'
 @import 'mixins'
 
-// grid
-@import 'grid'
-
-// Typography
-@import 'typography'
-
-// Scaffolding
+// Core CSS
 @import 'scaffolding'
-
-// Icons
+@import 'typography'
+@import 'grid'
 @import 'icons'
-
-// Forms & Buttons
 @import 'forms'
 @import 'buttons'
-
-// Media: images, video etc.
 @import 'media'
-
-// Tables
 @import 'tables'
-
-// Code
 @import 'code'
 @import 'syntax'
-
-// Alerts
 @import 'alerts'
+@import 'animations'
+
+// Components
+@import 'header'
+@import 'navigation'
+@import 'search'
+@import 'footer'
 
 // Content
 @import 'content'
-@import 'content-photo.less'
-@import 'content-link.less'
-@import 'content-related.less'
-@import 'comments.less'
-@import 'sticky.less'
+@import 'content-photo'
+@import 'content-link'
+@import 'content-featured'
+@import 'content-related'
+@import 'comments'
 
-@import 'page-about.less'
-@import 'page-404.less'
-
-// Navigation
-@import 'navigation.less'
-
-// Animations
-@import 'animations.less'
+@import 'page-about'
+@import 'page-404'
 
 // Print
-@import 'print.less'
\ No newline at end of file
+@import 'print'
diff --git a/_src/assets/styl/media.styl b/_src/assets/styl/media.styl
index 0a9484d5..41c54849 100644
--- a/_src/assets/styl/media.styl
+++ b/_src/assets/styl/media.styl
@@ -9,24 +9,23 @@
 /////////////////////////////////////
 
 figure, img, svg, video, audio, embed, canvas
-	max-width: 100%
-	height: auto
-	margin: 0 auto
-	display: block
+    max-width: 100%
+    height: auto
+    margin: 0 auto
+    display: block
     border-radius: $border-radius-base
 
-
 // Images
 /////////////////////////////////////
 
 img
-	vertical-align: middle;
-	box-shadow: 0 1px 3px rgba(0,0,0,.2)
+    vertical-align: middle;
+    box-shadow: 0 1px 3px rgba(0,0,0,.2)
 
 .teaser,
 .teaser img
-    margin-top: $line-height-computed*1.5
-    margin-bottom: $line-height-computed*1.5
+    margin-top: ($line-height-computed*1.5)
+    margin-bottom: ($line-height-computed*1.5)
 
 
 // Media Positioning
@@ -35,13 +34,12 @@ img
 img.alignleft,
 img.alignright,
 img.aligncenter
-	float: none
-	display: block
-	margin: $line-height-computed auto
+    float: none
+    display: block
+    margin: $line-height-computed auto
 
 @media $breakpoint2
-	img.alignleft
+    img.alignleft
         margin: 0 $line-height-computed $line-height-computed 0
-
-	img.alignright
-        margin: 0 0 $line-height-computed $line-height-computed
+    img.alignright
+        margin: 0 0 $line-height-computed $line-height-computed
\ No newline at end of file
diff --git a/_src/assets/styl/mixins.styl b/_src/assets/styl/mixins.styl
index c253732a..58444261 100644
--- a/_src/assets/styl/mixins.styl
+++ b/_src/assets/styl/mixins.styl
@@ -9,9 +9,11 @@
 /////////////////////////////////////
 
 clearfix()
+    &:before,
     &:after
-        content: ""
+        content: " "
         display: table
+    &:after
         clear: both
 
 .clearfix
@@ -50,26 +52,32 @@ aligncenter()
 /////////////////////////////////////
 
 textcenter()
-	text-align: center
+    text-align: center
 
 .textcenter
-	textcenter()
+    textcenter()
 
 
 // Toggling content
 /////////////////////////////////////
 
 // Hide from both screenreaders and browsers: h5bp.com/u
-.hide
+hide()
     display: none !important
     visibility: hidden
 
-.show
+show()
     display: block
     visibility: visible
 
+.hide
+    hide()
+
+.show
+    show()
+
 // Hide only visually, but have it available for screenreaders: h5bp.com/v
-.visuallyhidden
+visuallyhidden()
     border: 0
     clip: rect(0 0 0 0)
     height: 1px
@@ -90,6 +98,9 @@ textcenter()
         position: static
         width: auto
 
+.visuallyhidden
+    visuallyhidden()
+
 // Hide visually and from screenreaders, but maintain layout
 .invisible
     visibility: hidden
@@ -100,21 +111,21 @@ textcenter()
 
 .ir,
 .hide-text
-	font: 0/0 a
-	color: transparent
-	text-shadow: none
-	background-color: transparent
-	border: 0
+    font: 0/0 a
+    color: transparent
+    text-shadow: none
+    background-color: transparent
+    border: 0
 
 
 // Dimmed Text
 /////////////////////////////////////
 
 dimmed()
-	color: $text-color-dimmed
-	p
+    color: $text-color-dimmed
+    p
         color: $text-color-dimmed
-	li
+    li
         color: $text-color-dimmed
 
 .dimmed
@@ -124,11 +135,23 @@ dimmed()
 // Text overflow
 /////////////////////////////////////
 
-.ellipsis
+ellipsis()
     text-overflow: ellipsis
+    overflow: hidden
     white-space: nowrap
-	overflow: hidden
 
+.ellipsis
+    ellipsis()
+
+
+// Default transition
+/////////////////////////////////////
+
+transition()
+    transition: all ease-in-out .15s
+
+.transition
+    transition()
 
 // Dashed Dividers
 /////////////////////////////////////
@@ -138,52 +161,49 @@ dimmed()
     position: relative
 
     &:before
-		content: ""
-		position: absolute
-		left: 0
+        content: ""
+        position: absolute
+        left: 0
         height: 1px
 
 .divider-top
-	border-top: 1px dashed #afc3cb
-	padding-top: 1em
+    border-top: 1px dashed #afc3cb
+    padding-top: 1em
 
-	&:after
-		content: ""
-		position: absolute
-		left: 0
+    &:after
+        content: ""
+        position: absolute
+        left: 0
         height: 1px
-		top: 0
-		width: 100%
-		border-top: 1px dashed #fff
+        top: 0
+        width: 100%
+        border-top: 1px dashed #fff
 
 .divider-bottom
-	border-bottom: 1px dashed #afc3cb
-	padding-bottom: 1em
-
-	&:before
-		bottom: -2px
-		width: 100%
-		border-bottom: 1px dashed #fff
+    border-bottom: 1px dashed #afc3cb
+    padding-bottom: 1em
 
+    &:before
+        bottom: -2px
+        width: 100%
+        border-bottom: 1px dashed #fff
 
 // Heading band
 /////////////////////////////////////
 
 .heading-band
-	display: inline-block
-	clear: both
-	background: rgba(255,255,255,.55)
-	padding: $line-height-computed/2 $line-height-computed $line-height-computed/2 100%
-	margin-left: -100%;
-	.border-right-radius($border-radius-base)
-
+    display: inline-block
+    clear: both
+    background: rgba(255,255,255,.55)
+    padding: ($line-height-computed/2) $line-height-computed ($line-height-computed/2) 100%
+    margin-left: -100%
 
 // Lead paragraph
 /////////////////////////////////////
 
 .lead
-    font-size: $font-size-large;
-    line-height: $line-height-computed*1.15
+    font-size: $font-size-large
+    line-height: ($line-height-computed*1.15)
 
 
 // Button sizing
@@ -217,4 +237,4 @@ input-size(input-height, padding-vertical, padding-horizontal, font-size, line-h
 
     textarea&,
     select[multiple]&
-        height: auto
\ No newline at end of file
+        height: auto
diff --git a/_src/assets/styl/navigation.styl b/_src/assets/styl/navigation.styl
new file mode 100644
index 00000000..d856dda3
--- /dev/null
+++ b/_src/assets/styl/navigation.styl
@@ -0,0 +1,148 @@
+//
+// kremalicious3
+// --------------
+// Navigation
+//
+
+.menu-btn,
+.search-btn
+    @extend .textcenter
+    line-height: 1em
+    vertical-align: middle
+    display: inline-block
+    margin: 0
+    position: absolute
+    right: 0
+    top: 0
+
+    // icons
+    &:before
+        color: $link-color
+
+    &:hover:before
+        color: $link-color-hover
+
+    &:active:before
+        transition: none
+        color: #fff
+
+.search-btn
+    right: 50px
+
+
+// Main Navigation
+/////////////////////////////////////
+
+.nav-main
+    .menu-btn
+        margin-right: -.5em
+        padding: .5em .7em
+
+        // icon
+        &:before
+            font-size: 26px
+
+    li
+        display: inline-block
+
+.nav-popover
+    @extend .clearfix
+    padding: ($line-height-computed*1.5) 0
+    width: 100%
+    background: $body-bg
+
+.nav-link
+    @extend .h6, .alignleft, .textcenter
+    padding: .5em 1em
+    margin-bottom: 0
+    width: 50%
+    color: $text-color-dimmed
+    line-height: $line-height-computed
+    text-transform: uppercase
+    font-size: $font-size-small
+
+    @media $breakpoint2
+        width: 33.3%
+
+    // the icons
+    &:before
+        @extend .textcenter, .transition
+        display: block
+        width: 100%
+        font-size: 32px
+        height: 32px
+        color: rgba($text-color-dimmed, .7)
+
+    &:hover,
+    &:hover:before
+        color: $link-color
+        border-bottom-color: $link-color
+
+    &:hover
+        background: rgba(255,255,255,.5)
+
+    &:active
+        background: $link-color
+        top: 0
+
+    &:active:before
+        color: #fff
+        transition: none
+
+
+// Paginator
+/////////////////////////////////////
+
+.paginator
+    @extend .clearfix
+
+    p
+        position: relative
+    a
+        display: block
+
+    i
+        position: absolute
+        left: 0
+        top: 0
+
+    .next
+        @extend .alignright
+        text-align: right;
+
+        a
+            margin-right: 1.5em
+
+        i
+            margin-left: .5em
+            left: auto
+            right: 0
+
+    .previous
+        @extend .alignleft
+
+        a
+            margin-left: 1.5em
+        i
+            margin-right: .5em
+
+
+// Infinite Loader
+/////////////////////////////////////
+
+.infiniteLoader
+    .next
+        width: 100%
+        float: none
+        margin-left: 0
+
+        a
+            @extend .btn, .btn-block, .aligncenter
+            color: $link-color
+            padding-top: ($line-height-computed/1.5)
+            padding-bottom: ($line-height-computed/1.5)
+
+    .previous,
+    .pagenumber,
+    i
+        @extend .hide
diff --git a/_src/assets/styl/page-404.styl b/_src/assets/styl/page-404.styl
new file mode 100644
index 00000000..62dd7fdb
--- /dev/null
+++ b/_src/assets/styl/page-404.styl
@@ -0,0 +1,68 @@
+//
+// kremalicious3
+// --------------
+// Page - 404
+//
+
+.page-404
+    @extend .textcenter
+
+    .entry-title
+        @extend .hide
+
+.srverror-title
+    font-size: 2em
+    margin-bottom: $line-height-computed/2
+    color: $text-color-light
+
+.srverror-text
+    font-size: 1.2em
+    letter-spacing: .01em
+    color: $text-color-dimmed
+
+// HAL needs a size
+$hal-size = 72px
+
+.hal-9000
+    @extend .textcenter, .aligncenter
+    width: $hal-size
+    height: $hal-size
+    border-radius: $hal-size
+    background: #444
+    padding: 1.5em
+    margin-top: $line-height-computed
+    margin-bottom: $line-height-computed
+    position: relative
+    border: 4px solid #ccc
+    box-shadow: inset 0 0 10px #000
+
+    // eye
+    &:before
+        content: ""
+        width: 100%
+        height: 100%
+        border-radius: 100%
+        display: block
+        background: red
+        box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red, 0 0 30px red, 0 0 40px red
+        animation: halpulse 7s infinite
+
+    // gloss
+    &:after
+        content: ""
+        position: absolute
+        width: $hal-size
+        height: $hal-size
+        border-radius: $hal-size
+        position: absolute
+        left: 0
+        top: 0
+        background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.07) 40%,rgba(255,255,255,0) 41%)
+
+@keyframes halpulse
+    0%
+        opacity: 1
+    50%
+        opacity: .6
+    100%
+        opacity: 1
diff --git a/_src/assets/styl/page-about.styl b/_src/assets/styl/page-about.styl
new file mode 100644
index 00000000..e090c853
--- /dev/null
+++ b/_src/assets/styl/page-about.styl
@@ -0,0 +1,44 @@
+//
+// kremalicious3
+// --------------
+// Page - About
+//
+
+.page-about
+    .entry-title
+        @extend .visuallyhidden
+
+    .entry-content
+        @extend .textcenter
+
+    .footer
+        .avatar,
+        .footer-description
+            @extend .hide
+
+        .subscribe-title
+            margin-top: 0
+
+    @media only screen and (min-width: 40.625em) and (min-height: 650px)
+        .document
+            margin-bottom: 350px
+
+        .footer
+            height: 350px
+
+.intro-1,
+.intro-2
+    @extend .divider-bottom
+    @media $breakpoint2
+        max-width: 50%
+        margin-left: auto
+        margin-right: auto
+
+.intro-1
+    font-size: 2em
+    color: $text-color-light
+
+.intro-2
+    font-size: 1.2em
+    letter-spacing: .01em
+    color: $text-color-dimmed
diff --git a/_src/assets/styl/poststyle-2300.styl b/_src/assets/styl/poststyle-2300.styl
new file mode 100644
index 00000000..ca29a937
--- /dev/null
+++ b/_src/assets/styl/poststyle-2300.styl
@@ -0,0 +1,73 @@
+//
+// kremalicious3
+// --------------
+// kbdfun
+//
+
+@import 'nib'
+@import 'variables'
+
+kbd
+    font-size: 18px
+    color: #444444
+    font-family: "Lucida Grande", Lucida, Verdana, sans-serif
+    font-weight: normal
+    font-style: normal
+    text-align: center
+    line-height: 1em
+    text-shadow: 0 1px 0 #fff
+    display: inline
+    padding: .3em .55em
+    border-radius: 6px
+    background-clip: padding-box
+    border: 1px solid #bbb
+    background-color: #f7f7f7
+    background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0))
+    background-repeat: repeat-x
+    box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc
+
+kbd.dark
+    color: #eeeeee
+    text-shadow: 0 -1px 0 #000000
+    border-color: #000
+    background-color: #4d4c4c
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0))
+    background-repeat: no-repeat
+    box-shadow: 0px 2px 0 #000000, 0 3px 1px #999999, inset 0 1px 1px #aaaaaa, inset 0 -1px 3px #272727
+
+kbd.ios
+    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif
+    color: #000
+    border-color: rgba(0, 0, 0, 0.6)
+    border-top-color: rgba(0, 0, 0, 0.4)
+    background-color: #b7b7bc
+    background-image: linear-gradient(top, #efeff0, #b7b7bc)
+    background-repeat: repeat-x
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff
+
+kbd.android
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+    color: #ffffff
+    text-shadow: none
+    padding: .3em
+    border: 1px solid rgba(0, 0, 0, 0.05)
+    border-radius: 3px
+    background-clip: padding-box
+    background: #5e5e5e
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #444444, inset 0 1px 0 #868686
+
+kbd.android.dark
+    background: #222222;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #505050
+
+kbd.android.color
+    background: #083c5b;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 1px 0 #444444, inset 0 1px 0 #36647b
+
+@font-face
+    font-family: 'RobotoRegular'
+    src: url('../fonts/Roboto-Regular-webfont.eot')
+    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg')
+    font-weight: normal
+    font-style: normal
+
diff --git a/_src/assets/styl/print.styl b/_src/assets/styl/print.styl
new file mode 100644
index 00000000..3aa27ebb
--- /dev/null
+++ b/_src/assets/styl/print.styl
@@ -0,0 +1,80 @@
+//
+// kremalicious3
+// --------------
+// Print
+//
+
+
+@media print
+
+    *
+        background: transparent
+        color: black !important
+        box-shadow:none !important
+        text-shadow: none !important
+
+    .entry-content a[href]:after
+        content: " (" attr(href) ")"
+        text-transform: none
+        font-size: $font-size-small
+
+    // hide stuff in article view
+    .related-posts,
+    .footer .row:first-child,
+    .hentry:before,
+    .topbar
+        hide()
+
+    .hentry
+        border: none
+
+    .footer
+        color: #ccc !important
+
+    .footer-copyright
+        border-top: 1px solid #000 !important
+
+        &:after
+            hide()
+
+    abbr[title]:after
+        content: " (" attr(title) ")"
+
+    // Don't show links for images, or javascript/internal links
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after
+        content: ""
+
+    pre,
+    blockquote
+        page-break-inside: avoid
+
+    thead
+        display: table-header-group
+
+    tr,
+    img
+        page-break-inside: avoid
+
+    img
+        max-width: 100% !important
+
+    @page
+        margin: 5.5cm
+
+    p,
+    h2,
+    h3
+        orphans: 3
+        widows: 3
+
+    .hentry
+        h1
+            page-break-before: always
+        &:first-child h1
+            page-break-before: avoid
+
+    h2,
+    h3
+        page-break-after: avoid
diff --git a/_src/assets/styl/scaffolding.styl b/_src/assets/styl/scaffolding.styl
index 7515be26..49e436b1 100644
--- a/_src/assets/styl/scaffolding.styl
+++ b/_src/assets/styl/scaffolding.styl
@@ -10,189 +10,19 @@
 
 html
     font-size: 62.5%
-    -webkit-tap-highlight-color: fade($link-color, 20%);
+    -webkit-tap-highlight-color: rgba($link-color, .2)
 
 body
     background: $body-bg
 
 
-.document
-    position: relative
-
-
-// Topbar
-/////////////////////////////////////
-
-.topbar
-    @extend .clearfix
-    background: $body-bg
-    border-bottom: 1px solid rgba(255,255,255,.7)
-    box-shadow: inset 0 1px 4px fade($brand-dark, 20%), inset 0 -1px 4px fade($brand-dark, 20%)
-    
-    .row
-        margin-top: $line-height-computed/2
-        margin-bottom: $line-height-computed/2
-        position: relative
-
-
-// Banner
-/////////////////////////////////////
-
-.banner
-    @extend .alignleft
-    
-    @media $breakpoint2
-        margin-left: -54px
-    
-	.banner-title
-        margin-top: .1em
-        margin-bottom: 0
-		// display toned down logo
-		// by default
-        @extend .logo
-	
-	.banner-logo
-		.ir
-		
-		// repeat logo
-		// but display hover version
-		@extend .logo
-		background-position: left bottom
-
-		// hide by default
-		opacity: 0
-		// show smooooothly on hover
-		&:hover { opacity: 1 }
-		&:active { top: 0 }
-
-
-// Logo
-/////////////////////////////////////
-
-.logo
-	display: block
-	background-image: data-uri('../img/logo.png')
-	background-repeat: no-repeat
-	background-position: left top
-    width: 47px
-	height: 31px
-    
-    @media $breakpoint2
-        width: 183px
-
-    @media $highDPI
-    	background-image: url('../img/logo@2x.png')
-    	background-size: 183px 62px
-
-    @media $highDPI_3x
-    	background-image: url('../img/logo@3x.png')
-    	background-size: 183px 62px
-
-
-// close button
-/////////////////////////////////////
-
-a.close,
-.close
-    @extend .textcenter
-    width: 16px
-    height: 16px
-    line-height: 12px
-    font-size: 16px
-    padding: 0
-    border-radius: 16px
-    display: block
-    background: $brand-grey-light
-    color: #fff
-    
-    &:hover
-        background: $link-color-hover
-
-
-// Footer
-/////////////////////////////////////
-
-.footer
-	@extend .textcenter
-	background: fade($brand-dark, 5%)
-    border-top: 1px solid rgba(255,255,255,.7)
-    box-shadow: inset 0 1px 4px fade($brand-dark, 20%)
-    
-    .gravatar
-        margin-bottom: $line-height-computed/2
-    
-    .footer-description
-        @extend .h5
-        a
-            display: block
-    
-    &,
-    .footer-description
-        color: $text-color-light
-        line-height: $line-height-computed
-    
-	.footer-copyright
-        @extend .divider-top
-		padding-top: $line-height-computed
-		padding-bottom: $line-height-computed
-        
-		p
-			margin-bottom: 0
-			font-size: $font-size-mini
-
-// Subscribe component
-.subscribe
-	margin: $line-height-computed auto
-	p
-        @extend .clearfix .textcenter
-		margin: 0
-    
-	.btn
-        @extend .textcenter
-        width: 48px
-        height: 40px
-        line-height: 34px
-        padding: 0
-		margin: 0
-		display: inline-block
-		color: $text-color-light
-        
-		&:first-child
-            margin-left: 0
-		&:last-child
-            margin-right: 0
-        
-    	&:before
-    		// Icon resets for color animations
-    		transition: color .3s ease-in-out)
-			color: inherit
-			margin: 0 !important
-
-.subscribe-title
-    @extend .h5
-    color: $text-color-dimmed
-    margin-bottom: $line-height-computed/2
-    
-.footer:hover .subscribe .rss:before
-	color: #e15a00
-
-.footer:hover .subscribe .twitter:before
-	color: #019ad2
-
-.footer:hover .subscribe .google:before
-	color: #c63b1e
-
-.footer:hover .subscribe .facebook:before
-	color: #3b5998
-
-
-// topbar and footer as fixed 
+// topbar and footer as fixed
 // site background
 /////////////////////////////////////
 
 .topbar
     height: 71px
-    
+
     .menu-open &
         height: auto
 
@@ -202,19 +32,19 @@ a.close,
 @media only screen and (min-width: 40.625em) and (min-height: 650px)
     body
         position: relative
-        
+
     .document
+        transition()
+        position: relative
         z-index: 2
         margin-top: 71px
-        .transition
-        
-        .menu-open &
-            margin-top: 300px
-
         margin-bottom: 580px;
         border-top: 1px solid rgba(255,255,255,.7)
         border-bottom: 1px solid rgba(255,255,255,.7)
-        box-shadow: 0 1px 4px fade($brand-dark, 10%), 0 -1px 4px fade($brand-dark, 10%)
+        box-shadow: 0 1px 4px rgba($brand-dark, .1), 0 -1px 4px rgba($brand-dark, .1)
+
+        .menu-open &
+            margin-top: 300px
 
     .topbar,
     .footer
@@ -224,14 +54,14 @@ a.close,
     .topbar
         z-index: 1
         top: 0
-        box-shadow: inset 0 1px 4px fade($brand-dark, 10%)
+        box-shadow: inset 0 1px 4px rgba($brand-dark, .1)
         border: none
-    
+
     .footer
         z-index: 0
         height: 580px
         bottom: 0
         box-shadow: none
-        
+
         .menu-open &
-            @extend .hide
\ No newline at end of file
+            hide()
diff --git a/_src/assets/styl/search.styl b/_src/assets/styl/search.styl
new file mode 100644
index 00000000..aadf1fd6
--- /dev/null
+++ b/_src/assets/styl/search.styl
@@ -0,0 +1,62 @@
+//
+// kremalicious3
+// --------------
+// Search
+//
+
+.site-search
+    margin-right: 4%
+
+    .nav-popover
+        left: 0
+        width: 100%
+
+.search-btn
+    padding: .65em .85em
+
+.search-close
+    position: absolute
+    right: 1em
+
+    &,
+    &:active
+        top: 1em
+
+.search-area
+    @extend .transition
+    position: absolute
+    width: 100%
+    left: 0
+    top: -3px
+    z-index: 3
+
+    // hidden by default
+    transform: translate(0, -70px)
+
+    &.ready
+        transform: translate(0, 0)
+
+.search-results
+    @extend .clearfix
+
+    .nav-link
+        @media $breakpoint2
+            width: 50%
+            float: left
+            font-size: $font-size-small
+
+.popover
+    position: absolute
+    left: 0
+    top: 71px
+    z-index: 6
+    background: lighten($page-bg, 3%)
+    border-bottom: 1px solid rgba(255,255,255,.7)
+    box-shadow: 0 1px 4px rgba($brand-dark, .1)
+
+    @media $breakpoint2
+        top: 0
+
+        .row
+            margin-top: $line-height-computed
+            margin-bottom: $line-height-computed
\ No newline at end of file
diff --git a/_src/assets/styl/tables.styl b/_src/assets/styl/tables.styl
index 582bc86d..b228db80 100644
--- a/_src/assets/styl/tables.styl
+++ b/_src/assets/styl/tables.styl
@@ -6,29 +6,29 @@
 
 
 table
-	border-collapse: collapse
-	border-spacing: 0
-	width: 100%
-	max-width: 100%
-	background-color: transparent
-	margin-bottom: $line-height-computed
-	border-bottom: 1px solid #cfd9e1
+    border-collapse: collapse
+    border-spacing: 0
+    width: 100%
+    max-width: 100%
+    background-color: transparent
+    margin-bottom: $line-height-computed
+    border-bottom: 1px solid #cfd9e1
 
 td
     vertical-align: top
 
 th,
 td
-	padding: .7em .3em
-	text-align: left
-	vertical-align: top
-	border-top: 1px solid #cfd9e1
+    padding: .7em .3em
+    text-align: left
+    vertical-align: top
+    border-top: 1px solid #cfd9e1
 
 th
-	@extend .bold
+    @extend .bold
 
 thead th
-	vertical-align: bottom
+    vertical-align: bottom
 
 table tbody + tbody
     border-top: 2px solid #cfd9e1
diff --git a/_src/assets/styl/typography.styl b/_src/assets/styl/typography.styl
index 430dbbd7..b7dbe7b8 100644
--- a/_src/assets/styl/typography.styl
+++ b/_src/assets/styl/typography.styl
@@ -14,19 +14,19 @@ body
     font-size: $font-size-base
     line-height: $line-height-base
     color: $font-color-base
-	word-wrap: break-word
+    word-wrap: break-word
 
     @media $breakpoint1
         line-height: $line-height-computed
 
-	@media $breakpoint3
-		font-size: 125%
-		line-height: 1.6em
+    @media $breakpoint3
+        font-size: 125%
+        line-height: 1.6em
 
 p,
 ul,
 ol
-  	margin: 0 0 $line-height-computed
+    margin: 0 0 $line-height-computed
 
 
 // Headings
@@ -34,14 +34,15 @@ ol
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6
-	font-family: $headings-font-family
-	font-weight: $headings-font-weight
-	color: $headings-color
+    font-family: $headings-font-family
+    font-weight: $headings-font-weight
+    line-height: $headings-line-height
+    color: $headings-color
 
 h1, .h1,
 h2, .h2
-    margin-top: $line-height-computed*2
-    margin-bottom: $line-height-computed*2
+    margin-top: ($line-height-computed*2)
+    margin-bottom: ($line-height-computed*2)
 
 h3, .h3
 h4, .h4,
@@ -49,7 +50,7 @@ h5, .h5,
 h6, .h6
     margin-top: $line-height-computed
     margin-bottom: $line-height-computed
-  
+
 h1, .h1
     font-size: $font-size-h1
 
@@ -74,21 +75,20 @@ h6, .h6
 
 a
     color: $link-color
-	text-decoration: none
+    text-decoration: none
     outline: 0
     transition: color .2s ease-in-out
-    position: relative
-    
-    &:hover
+
+    &:hover,
+    &:focus
         color: $link-color-hover
-    
+
     &:active
         transition: none
-    	top: 1px
         background: $link-color
         color: #fff
         text-shadow: none
-    
+
     h1 &,
     h2 &,
     h3 &
@@ -106,53 +106,50 @@ ol
     padding-left: 2em
 
 ul li
-	position: relative
-	margin-bottom: .5em
+    position: relative
+    margin-bottom: .5em
 
-	&:before
-		font-size: 14px
-		font-family: 'entypo'
-		color: $text-color-light
-		speak: none
-		font-style: normal
-		font-weight: normal
-		font-variant: normal
-		text-transform: none
-		line-height: 1
-		-webkit-font-smoothing: antialiased
+    &:before
+        font-size: 14px
+        font-family: 'entypo'
+        color: $text-color-light
+        speak: none
+        font-style: normal
+        font-weight: normal
+        font-variant: normal
+        text-transform: none
+        line-height: 1
+        -webkit-font-smoothing: antialiased
 
-		position: absolute
-		left: -2em
-		top: .5em
+        position: absolute
+        left: -2em
+        top: .5em
 
 ol
-	counter-reset: ol-counter
+    counter-reset: ol-counter
 
     li
         position: relative
 
         &:before
-        	position: absolute
-        	left: -2em
-        	top: 0
-        	color: #fff
-        	content: counter(ol-counter)
-        	counter-increment: ol-counter
-        	font-style: italic
+            position: absolute
+            left: -2em
+            top: 0
+            color: #fff
+            content: counter(ol-counter)
+            counter-increment: ol-counter
+            font-style: italic
             font-size: 14px
-        	background: $text-color-dimmed
+            background: $text-color-dimmed
 
-        	width: 20px
+            width: 20px
             height: 20px
             border-radius: 20px
             line-height: 20px
-        	display: block
-        	text-align: center
-        	top: .2em
-        	box-shadow: 0 1px 0 rgba(255,255,255,.7))
-        }
-    }
-}
+            display: block
+            text-align: center
+            top: .2em
+            box-shadow: 0 1px 0 rgba(255,255,255,.7)
 
 ul,
 ol
@@ -160,17 +157,20 @@ ol
     ol
         margin-bottom: 0
 
-nav ul, 
-nav ol
-    @extend .list-unstyled
-
 // List options
 // Unstyled keeps list items block level, just removes default browser padding and list-style
-.list-unstyled
+list-unstyled()
     padding-left: 0
     list-style: none
     display: block
 
+.list-unstyled
+    list-unstyled()
+
+nav ul,
+nav ol
+    @extend .list-unstyled
+
 // Inline turns list items into inline-block
 .list-inline
     @extend .list-unstyled
@@ -188,24 +188,24 @@ nav ol
 /////////////////////////////////////
 
 p, li
-	hyphens: auto
+    hyphens: auto
 
-b, 
+b,
 strong,
 .bold
-	font-weight: 700
-	font-style: normal
+    font-weight: 700
+    font-style: normal
 
 em
-	font-style: italic
+    font-style: italic
 
 cite
-	font-style: normal
+    font-style: normal
 
 hr
     @extend .divider-bottom
     border: 0
-    margin-bottom: $line-height-computed*2
+    margin-bottom: ($line-height-computed*2)
 
 
 // Quotes
@@ -213,21 +213,20 @@ hr
 
 blockquote,
 blockquote > p
-	font-style: italic
-	color: $text-color-light
+    font-style: italic
+    color: $text-color-light
 
 blockquote
-    padding: ($line-height-computed / 2) $line-height-computed
+    padding: 0 $line-height-computed
     margin: 0 0 $line-height-computed
-	border-left: 2px solid $text-color-dimmed
-    
+    border-left: 2px solid $text-color-dimmed
+
     p:last-child
         margin-bottom: 0
 
 
-
 // Selection
 /////////////////////////////////////
 
 ::-moz-selection { background: #2e4f5c; color: #fff; }
-::selection { background: #2e4f5c; color: #fff; }
\ No newline at end of file
+::selection { background: #2e4f5c; color: #fff; }
diff --git a/_src/assets/styl/variables.styl b/_src/assets/styl/variables.styl
index 453b9455..958a23b8 100644
--- a/_src/assets/styl/variables.styl
+++ b/_src/assets/styl/variables.styl
@@ -16,8 +16,8 @@ support-for-ie              = false                 // Nib IE 8 support
 // Asset Paths
 /////////////////////////////////////
 
-$img-path				 	 = '/assets/images/'
-$font-path					 = '/assets/fonts/'
+$img-path                    = '/assets/images/'
+$font-path                   = '/assets/fonts/'
 
 
 // Colors
@@ -58,7 +58,7 @@ $font-family-monospace      = Menlo, Monaco, Consolas, 'Courier New', monospace
 
 $headings-font-family       = 'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif
 $headings-font-weight       = 500 // Medium
-$headings-line-height       = 1.2
+$headings-line-height       = 1.1
 $headings-color             = $brand-dark
 
 
@@ -91,8 +91,8 @@ $border-radius-base         = 3px
 $border-radius-small        = $border-radius-base
 $border-radius-large        = $border-radius-base
 
-$padding-base-vertical      = 6px
-$padding-base-horizontal    = 12px
+$padding-base-vertical      = 12px
+$padding-base-horizontal    = 32px
 
 $padding-small-vertical     = ($padding-base-vertical / 2)
 $padding-small-horizontal   = ($padding-base-horizontal / 2)
@@ -104,12 +104,12 @@ $padding-large-horizontal   = ($padding-base-horizontal * 2)
 // Forms
 /////////////////////////////////////
 
-$input-bg                   = rgba(255,255,255,.3)
-$input-bg-focus             = rgba(255,255,255,.7)
+$input-bg                   = #fff
+$input-bg-focus             = #fff
 $input-bg-disabled          = $brand-grey-light
 
 $input-font-size            = $font-size-base
-$input-font-weight          = 700
+$input-font-weight          = $font-weight-base
 
 $input-color                = $font-color-base
 $input-color-placeholder    = rgba(46, 79, 92, .3)
diff --git a/_src/index.html b/_src/index.html
index b1c05862..055b496e 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -4,15 +4,15 @@ front_page: true
 ---
 
 {% if paginator.next_page == 2 %}
-    {% include sticky.html %}
+    {% include featured.html %}
 {% endif %}
 
 <section role="main" id="main" class="row">
-    
+
     {% for post in paginator.posts %}
-    
+
         {% include articles.html %}
-        
+
     {% endfor %}
 
 </section>