From 059d888aaa67c4b4dabf0e48dbb48f8dabf76724 Mon Sep 17 00:00:00 2001
From: Omphalosskeptic <isa@automathic.org>
Date: Tue, 28 Oct 2014 14:26:07 -0700
Subject: [PATCH] Added support for a cross-browser, accessible, responsive
 menu modal with a clean SVG hamburger icon! Fixes #6

---
 assets/js/index.js | 11 +++++------
 partials/menu.hbs  | 34 ++++------------------------------
 2 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index e9fa9a3..3c7a64d 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,13 +1,12 @@
 /**
  * Main JS file for Casper behaviours
- */
+*/
 
 /*globals jQuery, document */
 (function ($) {
     "use strict";
 
     $(document).ready(function(){
-
         $(".post-content").fitVids();
 
         function casperFullImg() {
@@ -55,7 +54,7 @@
           timeout = setTimeout(delayed, threshold || 100);
       };
   }
-  // smartresize 
+  // smartresize
   jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
 })(jQuery,'smartresize');
@@ -71,10 +70,10 @@
         };
         var options = $.extend(defaults, options);
 
-        options.elem.click(function(event){     
+        options.elem.click(function(event){
             event.preventDefault();
             var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
-                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
+                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;
             if (offset) {
                 var toMove = parseInt(offset);
                 $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
@@ -87,4 +86,4 @@
         });
 
     };
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/partials/menu.hbs b/partials/menu.hbs
index 29f99f7..d66adf7 100644
--- a/partials/menu.hbs
+++ b/partials/menu.hbs
@@ -1,7 +1,5 @@
 <style>
-/*
-  Modal Overlay
-*/
+
 .modal-overlay {
   background: slategray;
   height: 100%;
@@ -28,6 +26,7 @@
   z-index: 3;
 }
 
+
 /*
   Modal Content Area
 */
@@ -51,9 +50,6 @@
   transform: scale(1);
 }
 
-/*
-  General Modal Content
-*/
 #modal_title {
   margin-top: 0;
   font-weight: 900;
@@ -61,9 +57,6 @@
   color:#BBC7CC;
 }
 
-/*
-  Close Modal Button
-*/
 .btn-close {
   color:#fdfdfd;
   background: none;
@@ -81,7 +74,6 @@
 
 
 /* Hamburger Menu Icon */
-
 .open-menu,
 .open-menu:hover,
 .btn-close,
@@ -98,20 +90,6 @@
   padding: 0;
 }
 
-/*
-  @media screen and (max-width:900px){
-    .post-template .open-menu{
-      top:1em;
-    }
-  }
-*/
-
-  @media screen and (max-width:500px){
-    .open-menu{
-/*      top:1em;*/
-    }
-  }
-
 .post-template .open-menu,
 .author-template .open-menu{
   top:.5rem;
@@ -185,7 +163,8 @@
       <div class="modal-content flex-container flex-container--center" id="modal_holder" role="document">
 
         <div class="flex-child">
-          <h1 class="beta" id="modal_title">Menu</h1>***
+          <h1 class="beta" id="modal_title">Menu</h1>
+          ***
 
           <nav role="navigation" class="beta">
             <li><a href="{{@blog.url}}">Home</a></li>
@@ -216,7 +195,6 @@ function swap () {
 
 swap();
 
-
 // modal window
 (function() {
 
@@ -232,7 +210,6 @@ swap();
       lastFocus,
       i;
 
-
   // Let's cut down on what we need to type to get an ID
   function getId ( id ) {
     return document.getElementById(id);
@@ -247,7 +224,6 @@ swap();
     modal.focus();
   }
 
-
   // binds to both the button click and the escape key to close the modal window
   // but only if modalOpen is set to true
   function modalClose ( event ) {
@@ -259,7 +235,6 @@ swap();
     }
   }
 
-
   // Restrict focus to the modal window when it's open.
   // Tabbing will just loop through the whole modal.
   // Shift + Tab will allow backup to the top of the modal,
@@ -271,7 +246,6 @@ swap();
     }
   }
 
-
   // Close modal window by clicking on the overlay
   mOverlay.addEventListener('click', function( e ) {
     if (e.target == modal.parentNode) {