mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-07 12:06:26 +00:00
parent
6b5002b2fd
commit
4bf60f5930
8 changed files with 127 additions and 98 deletions
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -229,89 +229,4 @@ select:focus {
|
||||||
.form-inline .checkbox input[type="checkbox"] {
|
.form-inline .checkbox input[type="checkbox"] {
|
||||||
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;
|
|
||||||
}
|
|
|
@ -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 rounded(0 0 10px 10px);
|
@include media($medium) {
|
||||||
|
width: auto;
|
||||||
|
@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;
|
||||||
padding: 6px 10px;
|
margin-bottom: 10px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
@include media($medium) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
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
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;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.no-scroll {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Global Transition
|
// Global Transition
|
||||||
|
|
|
@ -25,4 +25,5 @@ sitemap: false
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@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";
|
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