Improve navigation and search overlay on small screens

- Fixes #88

_includes/navigation.html

@@ -9,7 +9,7 @@
 		    {% endif %}
 		    <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
 		  {% endfor %}
-        {% if site.search %}<li class="dosearch"><i class="fa fa-search"></i> Search</li>{% endif %}
+        {% if site.search %}<li class="dosearch"><span><i class="fa fa-search"></i> Search</span></li>{% endif %}
 	    </ul>
 	</nav>
 </div><!-- /.navigation-wrapper -->
@@ -30,7 +30,9 @@
         {% if site.logo != null %}
     		<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp"></a>
         {% endif %}
-        <h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
+        <h1 class="site-title animated fadeIn"><a href="{{ site.url }}">{{ site.title }}</a></h1>
 		<h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>
 	</div>
 </header><!-- /.masthead -->{% endif %}
+
+<div class="js-menu-screen menu-screen"></div>

_includes/scripts.html

@@ -19,21 +19,23 @@
      var bs = {
           close: $(".close-btn"),
           searchform: $(".search-form"),
-          canvas: $("body"),
+          canvas: $(".js-menu-screen"),
           dothis: $('.dosearch')
       };
     
     bs.dothis.on('click', function() {
       $('.search-wrapper').css({ display: "block" });
+      $('body').toggleClass('no-scroll');
       bs.searchform.toggleClass('active');
       bs.searchform.find('input').focus();
-      bs.canvas.toggleClass('search-overlay');
+      bs.canvas.toggleClass('is-visible');
     });
     
       bs.close.on('click', function() {
         $('.search-wrapper').removeAttr( 'style' );
+        $('body').toggleClass('no-scroll');
         bs.searchform.toggleClass('active');
-        bs.canvas.removeClass('search-overlay');
+        bs.canvas.removeClass('is-visible');
     });
   })( jQuery, window );
 </script>

_sass/_forms.scss

@@ -230,88 +230,3 @@ select:focus {
 	float : left;
 	margin-left : 0;
 	margin-right : 3px; }
-
-// Jekyll Simple Search
-// -------------------------------------------------
-.dosearch {
-  padding: 6px 10px;
-  cursor: pointer;
-  display: block;
-  color: $white;
-  @include rounded(4px);
-  &:hover {
-	@include box-shadow($shadow: inset 0 0 1px $white);
-  	background-color: lighten($black, 10);
-  }
-}
-.search-form {
-	width: 100%;
-	position: relative;
-	opacity: 0;
-	transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
-	top: 0;
-	left: -200px;
-	z-index: 9002;
-	.search-field {
-		-webkit-appearance: none;
-		border: none;
-		width: 100%;
-		color: $white;
-		border: none;
-		border-bottom: 1px solid lighten($white, 20);
-		background-color: transparent;
-		box-shadow: none;
-		border-radius: 0;
-		background-clip: padding-box;
-		@include font-size(32);
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-	}
-	&.active {
-		opacity: 1;
-		top: 0;
-		left: 0;
-	}
-	&.hidden {
-		display: none;
-	}
-	::-webkit-input-placeholder {
-		@include font-size(32);
-	}
-	.search-field::-webkit-search-decoration,
-	.search-field::-webkit-search-cancel-button,
-	.search-field::-webkit-search-results-button,
-	.search-field::-webkit-search-results-decoration {
-		display: none;
-	}
-	.post-list {
-		position: absolute;
-		width: 100%;
-		h4, li, p, a {
-			color: $white;
-		}
-		li {
-			border-bottom: 1px solid lighten($white,20);
-		}
-	}
-}
-body.search-overlay {
-	overflow: hidden;
-}
-body.search-overlay:after {
-	content: '';
-	background-color: lighten($black,5);
-	background-color: rgba($black,.95);
-	width: 100%;
-	min-height: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 9001;
-}
-.no-js .dosearch {
-	display: none;
-}

_sass/_layout.scss

@@ -15,11 +15,15 @@ body {
 	@include clearfix;
 	ul {
 		display: inline-block;
+		width: 100%;
 		vertical-align: top;
 		margin: 0 0 50px;
 		padding: 4px 20px;
 		background-color: $black;
+		@include media($medium) {
+			width: auto;
 			@include rounded(0 0 10px 10px);
+		}
 		@include clearfix;
 	}
 	li {
@@ -27,16 +31,24 @@ body {
 		float: left;
 		list-style: none;
 		text-align: center;
-		@include font-size(14,no);
+		@include font-size(24,no);
 		text-transform: uppercase;
 		color: $white;
+		@include media($medium) {
+			@include font-size(14,no);
+		}
 		a:hover {
 			@include box-shadow($shadow: inset 0 0 1px $white);
 		}
 	}
 	a {
 		display: block;
+		margin-bottom: 10px;
+		padding: 12px 20px;
+		@include media($medium) {
+			margin-bottom: 0;
 			padding: 6px 10px;
+		}
 		color: $white;
 		@include rounded(4px);
 		&:hover {
@@ -46,8 +58,8 @@ body {
 }
 // Responsive nav toggle stuff
 #site-nav {
-	z-index: 9000;
 	display: none;
+	z-index: 5;
 	@include media($medium) {
 		-webkit-animation-duration: 1s;
 		-moz-animation-duration: 1s;
@@ -74,7 +86,7 @@ body {
 	display: block;
 }	
 #nav-toggle { 
-	z-index: 9999;
+	z-index: 20;
 	display: block;
 	vertical-align: top;
 	margin: 0;
@@ -86,6 +98,22 @@ body {
 		display: none;
 	}
 }
+// menu overlay
+.menu-screen {
+	@include position(fixed, 0px 0px 0px 0px);
+	@include transition;
+	background: $black;
+	opacity: 0;
+	visibility: hidden;
+	z-index: 10;
+	&.is-visible {
+		opacity: 1;
+		visibility: visible;
+		&:hover {
+			cursor: pointer;
+		}
+	}
+}
 
 
 // Masthead

_sass/_simple-search.scss

@@ -0,0 +1,78 @@
+// Jekyll Simple Search
+// -------------------------------------------------
+.search-form {
+  width: 100%;
+  position: relative;
+  opacity: 0;
+  transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
+  top: 0;
+  left: -200px;
+  z-index: 9002;
+  .search-field {
+    -webkit-appearance: none;
+    border: none;
+    width: 100%;
+    color: $white;
+    border: none;
+    border-bottom: 1px solid lighten($white, 20);
+    background-color: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    background-clip: padding-box;
+    @include font-size(32);
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+  &.active {
+    opacity: 1;
+    top: 0;
+    left: 0;
+  }
+  &.hidden {
+    display: none;
+  }
+  ::-webkit-input-placeholder {
+    @include font-size(32);
+  }
+  .search-field::-webkit-search-decoration,
+  .search-field::-webkit-search-cancel-button,
+  .search-field::-webkit-search-results-button,
+  .search-field::-webkit-search-results-decoration {
+    display: none;
+  }
+  .post-list {
+    position: absolute;
+    width: 100%;
+    h4, li, p, a {
+      color: $white;
+    }
+    li {
+      border-bottom: 1px solid lighten($white,20);
+    }
+  }
+}
+// search button in navigation
+.no-js .dosearch {
+  display: none;
+}
+.dosearch {
+  span {
+    display: block;
+    margin-bottom: 10px;
+    padding: 12px 20px;
+    @include media($medium) {
+      margin-bottom: 0;
+      padding: 6px 10px;
+    }
+    cursor: pointer;
+    @include rounded(4px);
+    background-color: transparent;
+    color: $white;
+    &:hover {
+    @include box-shadow($shadow: inset 0 0 1px $white);
+      background-color: lighten($black, 10);
+    }
+  }
+}

_sass/_site.scss

@@ -260,6 +260,9 @@ pre {
 		list-style-type: none;
 	}
 }
+.no-scroll {
+	overflow: hidden;
+}
 
 
 // Global Transition

assets/css/main.scss

@@ -26,3 +26,4 @@ sitemap: false
 @import "layout";
 @import "vendor/font-awesome/font-awesome";
 @import "vendor/magnific-popup/magnific-popup";
+@import "simple-search";