Improve navigation and search overlay on small screens

- Fixes #88
This commit is contained in:
Michael Rose 2014-09-05 16:24:27 -04:00
parent 6eb18b796e
commit 48702a0fa6
8 changed files with 127 additions and 98 deletions

View file

@ -9,7 +9,7 @@
{% endif %} {% endif %}
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li> <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %} {% 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> </ul>
</nav> </nav>
</div><!-- /.navigation-wrapper --> </div><!-- /.navigation-wrapper -->
@ -30,7 +30,9 @@
{% if site.logo != null %} {% 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> <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 %} {% 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> <h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>
</div> </div>
</header><!-- /.masthead -->{% endif %} </header><!-- /.masthead -->{% endif %}
<div class="js-menu-screen menu-screen"></div>

View file

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

View file

@ -230,88 +230,3 @@ select:focus {
float : left; float : left;
margin-left : 0; margin-left : 0;
margin-right : 3px; } 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;
}

View file

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

78
_sass/_simple-search.scss Normal file
View file

@ -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);
}
}
}

View file

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

View file

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

File diff suppressed because one or more lines are too long