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 6b5002b2fd
commit 4bf60f5930
8 changed files with 127 additions and 98 deletions

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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 rounded(0 0 10px 10px);
@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;
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

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;
}
}
.no-scroll {
overflow: hidden;
}
// Global Transition

View file

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

File diff suppressed because one or more lines are too long