From d3ce8295cbbe40af8bf380cffb83a48860fefdd8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Feb 2016 22:54:20 +0100
Subject: [PATCH] css only, animated hamburger icon, fixes #32 even more

---
 assets/_src/js/ascribe.js                | 10 ++--
 assets/_src/less/ascribe.less            |  1 +
 assets/_src/less/ascribe/_hamburger.less | 69 ++++++++++++++++++++++++
 assets/_src/less/ascribe/_header.less    | 16 +-----
 template-header.php                      |  4 +-
 template-tour.php                        |  6 ++-
 6 files changed, 87 insertions(+), 19 deletions(-)
 create mode 100644 assets/_src/less/ascribe/_hamburger.less

diff --git a/assets/_src/js/ascribe.js b/assets/_src/js/ascribe.js
index 2f379b8..0d2ca34 100644
--- a/assets/_src/js/ascribe.js
+++ b/assets/_src/js/ascribe.js
@@ -75,18 +75,22 @@ function stickyNav() {
 
 
 function mobileNav() {
-    $('.hamburger').click(function(e) {
-        e.preventDefault();
 
-        var popup = $('.mobile-nav');
+    var hamburger = $('.hamburger'),
+        popup = $('.mobile-nav');
+
+    hamburger.click(function(e) {
+        e.preventDefault();
 
         // toggle popup
         popup.toggleClass('active');
+        hamburger.toggleClass('open');
 
         // bind the hide controls
         $(document).bind('click.hidepopup', function() {
             // hide popup
             popup.removeClass('active');
+            hamburger.removeClass('open');
             // unbind the hide controls
             $(document).unbind('click.hidepopup');
         });
diff --git a/assets/_src/less/ascribe.less b/assets/_src/less/ascribe.less
index d5d2176..b52804f 100644
--- a/assets/_src/less/ascribe.less
+++ b/assets/_src/less/ascribe.less
@@ -24,6 +24,7 @@
 @import 'ascribe/_footer.less';
 
 @import 'ascribe/_hero.less';
+@import 'ascribe/_hamburger.less';
 @import 'ascribe/_header.less';
 @import 'ascribe/_subtemplates.less';
 @import 'ascribe/_feature-circles.less';
diff --git a/assets/_src/less/ascribe/_hamburger.less b/assets/_src/less/ascribe/_hamburger.less
new file mode 100644
index 0000000..92d4772
--- /dev/null
+++ b/assets/_src/less/ascribe/_hamburger.less
@@ -0,0 +1,69 @@
+//
+// Ascribe
+// -----------------
+// Omnomnom, CSS only hamburger
+//
+
+.hamburger {
+    cursor: pointer;
+    margin: 0 5px;
+    position: relative;
+    z-index: 50;
+    width: 25px;
+    height: 25px;
+    vertical-align: bottom;
+
+    // button reset
+    background: none;
+    box-shadow: none;
+    border: none;
+
+    span {
+        &,
+        &:before,
+        &:after {
+            border-radius: 9px;
+            height: 4px;
+            width: 100%;
+            background: @blueBright;
+            position: absolute;
+            display: block;
+            content: '';
+            transition: .3s ease-out;
+        }
+
+        &:before {
+            top: -8px;
+        }
+
+        &:after {
+            bottom: -8px;
+        }
+
+    }
+
+    // open state
+    &.open {
+        span {
+            background: transparent;
+
+            &:before,
+            &:after {
+                top: 0;
+            }
+
+            &:before {
+                transform: rotate(45deg);
+            }
+
+            &:after {
+                transform: rotate(-45deg);
+            }
+        }
+
+    }
+
+    @media screen and (max-width: @phoneWidth) {
+        display: inline-block;
+    }
+}
diff --git a/assets/_src/less/ascribe/_header.less b/assets/_src/less/ascribe/_header.less
index 1e7294e..7ac0e66 100644
--- a/assets/_src/less/ascribe/_header.less
+++ b/assets/_src/less/ascribe/_header.less
@@ -165,8 +165,6 @@
     margin-top: 35px;
     .signInUpText;
     color: @black;
-    position:relative;
-    z-index:3;
 
     a {
         .signInUpText;
@@ -177,18 +175,7 @@
         }
     }
 }
-.hamburger {
-    cursor:pointer;
-    width: 25px;
-    margin-left: 15px;
-    position: relative;
-    top: 2px;
-    z-index:50;
 
-    @media screen and (max-width: @phoneWidth) {
-        display: inline-block;
-    }
-}
 .mobile-nav {
     display: none;
     background-color: black;
@@ -226,8 +213,9 @@
 
     @media screen and (max-width: @phoneWidth) {
         display:none;
+
         &.active {
-            display:block;
+            display: block;
         }
     }
 }
diff --git a/template-header.php b/template-header.php
index e61e23a..d354758 100644
--- a/template-header.php
+++ b/template-header.php
@@ -17,7 +17,9 @@ require 'controller/init.php';
             <div class="app-links">
                 <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
 
-                <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
+                <button class="hamburger phone-only">
+                    <span></span>
+                </button>
 
             </div>
             <nav class="tour-switcher"><?php wp_nav_menu( array(
diff --git a/template-tour.php b/template-tour.php
index d97b7e6..bba38fa 100644
--- a/template-tour.php
+++ b/template-tour.php
@@ -20,7 +20,11 @@ $controller     = new Controller();
             <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
             <div class="app-links">
                 <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
-                <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
+
+                <button class="hamburger phone-only">
+                    <span></span>
+                </button>
+
             </div>
             <nav class="tour-switcher"><?php wp_nav_menu( array(
                     'theme_location' => 'landing-menu',