Improve navigation and search overlay on small screens

- Fixes mmistakes#88
robercano · Sep 5, 2014 · 86c99a4 · 86c99a4
1 parent 4863c80
commit 86c99a4
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 98 deletions.
diff --git a/_includes/navigation.html b/_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>
diff --git a/_includes/scripts.html b/_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>

diff --git a/_sass/_forms.scss b/_sass/_forms.scss
@@ -229,89 +229,4 @@ select:focus {
 .form-inline .checkbox input[type="checkbox"] {
  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;
-}
+ margin-right : 3px; }
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -15,28 +15,40 @@ body {
  @include clearfix;
  ul {
  display: inline-block;
+ width: 100%;
  vertical-align: top;
  margin: 0 0 50px;
  padding: 4px 20px;
  background-color: $black;
- @include rounded(0 0 10px 10px);
+ @include media($medium) {
+ width: auto;
+ @include rounded(0 0 10px 10px);
+ }
  @include clearfix;
  }
  li {
  display: block;
  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;
- padding: 6px 10px;
+ 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

diff --git a/_sass/_simple-search.scss b/_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);
+ }
+ }
+}
diff --git a/_sass/_site.scss b/_sass/_site.scss
@@ -260,6 +260,9 @@ pre {
  list-style-type: none;
  }
 }
+.no-scroll {
+ overflow: hidden;
+}
 
 
 // Global Transition

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -25,4 +25,5 @@ sitemap: false
 @import "forms";
 @import "layout";
 @import "vendor/font-awesome/font-awesome";
-@import "vendor/magnific-popup/magnific-popup";
+@import "vendor/magnific-popup/magnific-popup";
+@import "simple-search";
diff --git a/assets/js/scripts.min.js b/assets/js/scripts.min.js