Merge pull request #10 from monkeywithacupcake/master

add collapsible menu and hamburger for mobile - closes #3

_includes/header.html

@@ -10,6 +10,16 @@
     {% endif %}
 
     <nav class="site-nav">
+      <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+              <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+              <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
 
       <div class="trigger">
         <!-- About -->

_sass/_header.scss

@@ -18,6 +18,15 @@
 .site-nav {
     float: right;
     line-height: $nav-height;
+    
+    .nav-trigger {
+        display: none;
+    }
+
+    .menu-icon {
+        display: none;
+    }
+    
     .page-link{
         line-height: $line-height;
         // Gaps between nav items, but not on the first one
@@ -25,19 +34,59 @@
             margin-left: 10px;
         }
     }
-    // @include media-query($on-palm) {
+    // added for hamburger
-    //     position: fixed;
+    @include media-query($on-palm) {
-    //     top: 0px;
+        position: absolute;
-    //     right: 10px;
+        top: 9px;
-    //     text-align: right;
+        right: $horizontal-spacing-unit / 2;
-    //     &:hover .trigger {
+        background-color: $background-color;
-    //         display: block;
+        border: 1px solid $grey-color-light;
-    //         padding-bottom: 5px;
+        border-radius: 5px;
-    //     }
+        text-align: right;
-    //     .page-link {
+
-    //         display: line;
+        label[for="nav-trigger"] {
-    //     }
+            display: block;
-    // }
+            float: right;
+            width: 36px;
+            height: 36px;
+            z-index: 2;
+            cursor: pointer;
+        }
+
+        .menu-icon {
+            display: block;
+            float: right;
+            width: 36px;
+            height: 26px;
+            line-height: 0;
+            padding-top: 10px;
+            text-align: center;
+
+            > svg path {
+                fill: $grey-color-dark;
+            }
+        }
+
+        input ~ .trigger {
+            clear: both;
+            display: none;
+        }
+
+        input:checked ~ .trigger {
+            display: block;
+            padding-bottom: 5px;
+        }
+
+        .page-link {
+            display: block;
+            padding: 5px 10px;
+
+            &:not(:last-child) {
+                margin-right: 0;
+            }
+            margin-left: 10px;
+        }
+    }
 }
 
 .header-bar{

_sass/_media-queries.scss

@@ -1,7 +1,13 @@
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
 @media screen and (min-width: $viewport-small) {
-  html {
+    html {
-    font-size: 16px;
+        font-size: 16px;
-  }
+    }
 
   h1,
   .h1 {

_sass/_variables.scss

@@ -30,6 +30,7 @@ $abbr-border-bottom: 1px black dotted;
 // Page width
 $measure-width: 42rem !default;
 
+
 // Viewport widths
 $viewport-small: 32em;
 $viewport-medium: 48em;
@@ -158,3 +159,6 @@ $img_spacing: 5px;
 $img-height: 275px;
 $caption-font-size: 12px;
 $caption-color: #aaa;
+
+/* add on-palm to be consistent with other jekyll theme media queries */
+$on-palm:  600px !default;

assets/css/main.scss

@@ -5,7 +5,7 @@
 
 
 @import 'variables';
-
+@import 'media-queries';
 @import 'basscss';
 
 @import 'base';
@@ -28,7 +28,7 @@
 @import 'gists';
 @import 'links';
 @import 'measure';
-@import 'media-queries';
+
 @import 'social-icons';
 @import 'tables';
 @import 'typography';