From f55e3d978319cc2dcaae045d4efd7ec17ab05632 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 19 Aug 2015 01:31:58 +0200
Subject: [PATCH] simpler menu js, super smooth menu show/hide

---
 _src/_assets/js/app.js               | 14 ++++----------
 _src/_assets/styl/content.styl       | 27 +++++++++++++++++++++++++--
 _src/_assets/styl/kremalicious3.styl | 12 ++++++------
 _src/_assets/styl/layout.styl        |  8 +++++++-
 _src/_assets/styl/navigation.styl    | 22 +++++-----------------
 _src/_assets/styl/typography.styl    |  5 +++++
 _src/_includes/header.html           |  2 +-
 7 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js
index 9d5bde22..0532e06e 100644
--- a/_src/_assets/js/app.js
+++ b/_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');
-
-            if ($('body').hasClass('menu-open')) {
-                $thepop.removeClass('hide');
-            } else {
-                $thepop.addClass('hide');
-            }
+            $thesite.toggleClass('menu-open');
 
             // bind the hide controls
             $(document).bind('click.hidethepop', function() {
-                $('body').removeClass('menu-open');
-                $thepop.toggleClass('hide');
+                $thesite.removeClass('menu-open');
                 // unbind the hide controls
                 $(document).unbind('click.hidethepop');
             });
diff --git a/_src/_assets/styl/content.styl b/_src/_assets/styl/content.styl
index b39d7a90..07740d85 100644
--- a/_src/_assets/styl/content.styl
+++ b/_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
diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl
index d9cc9c22..2306cc6c 100644
--- a/_src/_assets/styl/kremalicious3.styl
+++ b/_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'
diff --git a/_src/_assets/styl/layout.styl b/_src/_assets/styl/layout.styl
index a0c902b5..1bb83046 100644
--- a/_src/_assets/styl/layout.styl
+++ b/_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
diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl
index 9397fc49..db002fcc 100644
--- a/_src/_assets/styl/navigation.styl
+++ b/_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
-    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
+    border: none
 
 
 // Paginator
diff --git a/_src/_assets/styl/typography.styl b/_src/_assets/styl/typography.styl
index a7276314..45ee06d3 100644
--- a/_src/_assets/styl/typography.styl
+++ b/_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
 /////////////////////////////////////
diff --git a/_src/_includes/header.html b/_src/_includes/header.html
index 927a023f..3275d4a1 100644
--- a/_src/_includes/header.html
+++ b/_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 }}/">