more fixes & grid updates

_src/_assets/styl/content.styl

@@ -153,8 +153,7 @@
 
 .masonry
     @media $breakpoint2
-        width: 125%
+        width: 100%
-        margin-left: -12.5%
         clearfix()
 
     .hentry

_src/_assets/styl/footer.styl

@@ -8,6 +8,7 @@
     @extend .textcenter
     border-top: 1px solid rgba(255,255,255,.7)
     box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
+    padding-top: ($line-height-computed*2)
 
     .gravatar
         margin-bottom: ($line-height-computed/2)

_src/_assets/styl/grid.styl

@@ -63,10 +63,14 @@
 //
 // Columns
 //
-.grid
+.grid--fit
     > .grid__col
         flex: 1
 
+.grid--full
+    > .grid__col
+        flex: 0 0 100%
+
 .grid--1of6
     > .grid__col
         flex: 0 0 16.5%
@@ -91,6 +95,14 @@
 
 
 @media $breakpoint1
+    .grid-small--fit
+        > .grid__col
+            flex: 1
+
+    .grid-small--full
+        > .grid__col
+            flex: 0 0 100%
+
     .grid-small--1of6
         > .grid__col
             flex: 0 0 16.5%
@@ -115,6 +127,14 @@
 
 
 @media $breakpoint2
+    .grid-medium--fit
+        > .grid__col
+            flex: 1
+
+    .grid-medium--full
+        > .grid__col
+            flex: 0 0 100%
+
     .grid-medium--1of6
         > .grid__col
             flex: 0 0 16.5%
@@ -138,6 +158,14 @@
             flex: 0 0 82.5%
 
 @media $breakpoint3
+    .grid-large--fit
+        > .grid__col
+            flex: 1
+
+    .grid-large--full
+        > .grid__col
+            flex: 0 0 100%
+
     .grid-large--1of6
         > .grid__col
             flex: 0 0 16.5%

_src/_assets/styl/layout.styl

@@ -37,7 +37,7 @@
         position: relative
         z-index: 2
         margin-top: 80px
-        margin-bottom: 500px
+        margin-bottom: 420px
 
         .menu-open &
             margin-top: 220px
@@ -46,6 +46,7 @@
     .site__footer
         position: fixed
         border: none
+        width: 100%
 
     .site__header
         z-index: 1

_src/_assets/styl/navigation.styl

@@ -77,8 +77,13 @@
 /////////////////////////////////////
 
 .paginator
+    padding-top: $line-height-computed
+    padding-bottom: $line-height-computed
+
     .icon
         margin-bottom: -3px
+    p
+        margin-bottom: 0;
 
 .paginator-next
     text-align: right

_src/_includes/featured.html

@@ -1,6 +1,6 @@
 
 <aside class="featured">
-    <div class="grid grid--gutters">
+    <div class="grid grid--full grid-small--fit grid--gutters">
         {% for post in site.posts %}
             {% if post.featured %}
             <article class="grid__col">

_src/_includes/paginator.html

@@ -2,7 +2,7 @@
 
     <nav class="paginator grid">
 
-        <p class="paginator-previous col2-xs">
+        <p class="paginator-previous grid__col">
             {% if paginator.previous_page %}
             <a
                 {% if page.category %}
@@ -27,11 +27,11 @@
             {% endif %}
         </p>
 
-        <p class="paginator-pages col2-xs">
+        <p class="paginator-pages grid__col">
             <span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
         </p>
 
-        <p class="paginator-next col2-xs">
+        <p class="paginator-next grid__col">
             {% if paginator.next_page %}
             <a
                 {% if page.category %}

_src/_includes/relatedphotos.html

@@ -1,6 +1,6 @@
 <aside class="related-photos">
 
-    <div class="grid grid--gutters grid-small--half grid-medium--third">
+    <div class="grid grid--gutters grid--half grid-medium--third">
 
         {% for post in site.categories['photos'] limit:6 %}
 

_src/_includes/relatedposts.html

@@ -3,7 +3,7 @@
 
         <h1 class="related-posts-title">Related</h1>
 
-        <div class="grid grid--gutters grid-small--half grid-medium--third">
+        <div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
 
             {% for post in site.related_posts limit:6 %}
 

_src/_posts/2010-07-03-momcorp.md

@@ -25,6 +25,6 @@ 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:
 
 <p class="content-download">
-    <a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
+    <a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
-    <a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a>
+    <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
 </p>

_src/_posts/2011-12-15-badged.md

@@ -28,7 +28,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
 You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
 
 <p class="content-download">
-<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress col2">Plugin Page</a> <a class="btn-primary icon-github col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn col2">Donate</a>
+<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress">Plugin Page</a> <a class="btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">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:

_src/_posts/2012-05-15-wp-icons-template.md

@@ -35,7 +35,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:
 
 <p class="content-download">
-    <a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download col2">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github col2">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart col2">Donate</a>
+    <a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
 </p>
 
 ### Usage

_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md

@@ -23,8 +23,8 @@ 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.
 
 <p class="content-download">
-	<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
+    <a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
-	<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a>
+    <a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
 </p>
 
 ## Usage