mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-21 17:47:10 +00:00
Michael Rose
parent
6b5002b2fd
commit
4bf60f5930
8 changed files with 127 additions and 98 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
78
_sass/_simple-search.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -260,6 +260,9 @@ pre {
|
|||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
// Global Transition
|
||||
|
|
|
|||
|
|
@ -26,3 +26,4 @@ sitemap: false
|
|||
@import "layout";
|
||||
@import "vendor/font-awesome/font-awesome";
|
||||
@import "vendor/magnific-popup/magnific-popup";
|
||||
@import "simple-search";
|
||||
2
assets/js/scripts.min.js
vendored
2
assets/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue