icon button fixes, closes #14

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

@@ -22,7 +22,11 @@ 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 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>
+<p class="clearfix">
+	<a class="btn btn-primary col2" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
+	<a class="btn btn-primary col2 icon icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a>
+	<a class="btn col2 icon icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
+</p>
 
 ## Usage
 

_src/assets/styl/buttons.styl

@@ -26,7 +26,7 @@
     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($brand-grey-light, .2), inset 0 1px 0 rgba(255,255,255,.7)
 
     &:hover,
     &:focus
@@ -51,6 +51,14 @@
         opacity: .6
         box-shadow: none
 
+    // grid buttons
+    &.col2,
+    &.col3
+        margin-bottom: ($line-height-computed/2)
+
+        @media $breakpoint2
+            margin-bottom: 0
+
 .btn span
     font-size: .9em
     color: rgba(19, 56, 50, .6)

_src/assets/styl/icons.styl

@@ -28,13 +28,11 @@
     .btn&
         font-size: 18px
         margin-right: .3em
-        top: .1em
+        margin-left: -.3em
+        top: .15em
         position: relative
         vertical-align: baseline
-        line-height: inherit
-
-    .btn-primary&
-        color: darken($link-color, 15%)
+        color: inherit
 
 .icon-twitter:before
     content: "\e600"