simpler menu js, super smooth menu show/hide

_src/_assets/js/app.js

@@ -95,25 +95,19 @@ var siteNavigation = {
     },
 
     siteMenu: function() {
-        var $thelink = $('.menu-btn'),
+        var $thesite = $('.site'),
+            $thelink = $('.menu-btn'),
             $thepop = $('.nav-popover');
 
         $thelink.click(function(e) {
             e.preventDefault();
 
             // toggle menu
-            $('body').toggleClass('menu-open');
+            $thesite.toggleClass('menu-open');
-
-            if ($('body').hasClass('menu-open')) {
-                $thepop.removeClass('hide');
-            } else {
-                $thepop.addClass('hide');
-            }
 
             // bind the hide controls
             $(document).bind('click.hidethepop', function() {
-                $('body').removeClass('menu-open');
+                $thesite.removeClass('menu-open');
-                $thepop.toggleClass('hide');
                 // unbind the hide controls
                 $(document).unbind('click.hidethepop');
             });

_src/_assets/styl/content.styl

@@ -40,6 +40,7 @@
 
     .page-single &
         border: none
+        padding-top: ($line-height-computed*2)
 
         &:before
             @extend .hide
@@ -100,15 +101,37 @@
     .by
         display: block
 
+.time
+    margin-bottom: ($line-height-computed*2)
 
 // Categories & Tags
 /////////////////////////////////////
 
 .categories
-    margin-bottom: 0
+    margin-bottom: ($line-height-computed/2)
 
 .category
-    text-transform: capitalize
+    @extend .h6, .textcenter
+    font-size: $font-size-mini
+    line-height: 1
+    color: $brand-grey-light
+    text-transform: uppercase
+    border: 1px solid $text-color-dimmed
+    border-radius: $border-radius-base
+    padding: 4px 8px
+    margin: 0
+    display: inline-block
+
+    &:hover,
+    &:focus
+        color: $link-color
+        border-color: $link-color
+        background: rgba(255,255,255,.3)
+
+    &:active
+        background: $link-color
+        top: 0
+        color: #fff
 
 .tag
     color: $text-color

_src/_assets/styl/kremalicious3.styl

@@ -28,12 +28,6 @@
 @import 'alerts'
 @import 'animations'
 
-// Components
-@import 'header'
-@import 'navigation'
-@import 'search'
-@import 'footer'
-
 // Content
 @import 'content'
 @import 'content-photo'
@@ -45,5 +39,11 @@
 @import 'page-about'
 @import 'page-404'
 
+// Components
+@import 'header'
+@import 'navigation'
+@import 'search'
+@import 'footer'
+
 // Print
 @import 'print'

_src/_assets/styl/layout.styl

@@ -28,6 +28,11 @@
     border-bottom: 1px solid rgba(255,255,255,.7)
     box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
 
+    transform: translate3d(0,-200px,0)
+
+    .menu-open &
+        transform: translate3d(0,0,0)
+
 @media only screen and (min-width: 40.625em) and (min-height: 650px)
     .site
         position: relative
@@ -38,9 +43,10 @@
         z-index: 2
         margin-top: 80px
         margin-bottom: 420px
+        transform: translate3d(0,0,0)
 
         .menu-open &
-            margin-top: 220px
+            transform: translate3d(0,140px,0)
 
     .site__header,
     .site__footer

_src/_assets/styl/navigation.styl

@@ -41,36 +41,24 @@
 .nav-popover
     @extend .divider-top, .list-unstyled
     padding: $line-height-computed 0
-    margin-top: 30px
+    margin-top: $line-height-computed
     margin-bottom: 0
     width: 100%
     background: $body-bg
-    display: flex
+    display: flex   // .nav-popver overwrite
+    margin-left: 0  // .grid overwrite
 
     .grid__col
         padding-top: 0
 
 .nav-link
-    @extend .h6, .textcenter
+    @extend .category
     text-shadow: 0 1px 0 rgba(#fff, .5)
     padding: $padding-base-vertical $padding-base-horizontal
     margin-bottom: 0
     margin-top: 0
     display: block
-    color: $brand-grey-light
+    border: none
-    text-transform: uppercase
-    border-radius: $border-radius-base
-
-    &:hover,
-    &:focus
-        color: $link-color
-        border-bottom-color: $link-color
-        background: rgba(255,255,255,.5)
-
-    &:active
-        background: $link-color
-        top: 0
-        color: #fff
 
 
 // Paginator

_src/_assets/styl/typography.styl

@@ -204,6 +204,11 @@ hr
     border: 0
     margin-bottom: ($line-height-computed*2)
 
+.small
+    font-size: $font-size-small
+
+.mini
+    font-size: $font-size-small
 
 // Quotes
 /////////////////////////////////////

_src/_includes/header.html

@@ -35,7 +35,7 @@
 
             </div>
 
-            <ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
+            <ul class="nav-popover grid grid--half grid-medium--third">
                 {% for category in site.categories %}
                     <li class="grid__col">
                         <a class="nav-link" href="/{{ category | first }}/">