mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-24 11:07:14 +00:00
Modify header animations and placement
This commit is contained in:
Michael Rose
parent
396b0a8aeb
commit
ae4299853d
5 changed files with 382 additions and 19 deletions
|
|
@ -1,18 +1,23 @@
|
|||
<div class="navigation-wrapper">
|
||||
<nav role="navigation" id="site-nav" class="animated fadeInDown" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<nav role="navigation" id="site-nav" class="animated drop" itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<ul>
|
||||
{% for link in site.links %}
|
||||
<li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
<li><a href="{{ site.url }}{{ link.url }}">{{ link.title }}</a></li>
|
||||
{% endfor %}
|
||||
<li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a>
|
||||
<li><a href="http://feeds.feedburner.com/MadeMistakes" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- /.navigation-wrapper -->
|
||||
|
||||
<header class="masthead">
|
||||
{% if page.image.feature %}<header class="masthead" itemscope itemtype="http://schema.org/Organization">
|
||||
<div class="wrap">
|
||||
<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" class="animated fadeInUp"></a>
|
||||
<h1 class="site-title animated fadeIn"><a href="{{ site.url }}">{{ site.title }}</a></h1>
|
||||
<h2 class="site-description animated fadeIn">{{ site.description }}</h2>
|
||||
<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}" itemprop="url"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown" itemprop="logo"></a>
|
||||
</div>
|
||||
</header><!-- /.masthead -->
|
||||
{% else %}<header class="masthead" itemscope itemtype="http://schema.org/Organization">
|
||||
<div class="wrap">
|
||||
<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}" itemprop="url"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp" itemprop="logo"></a>
|
||||
<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 %}
|
||||
1
assets/css/animate.css
vendored
1
assets/css/animate.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -117,6 +117,14 @@ svg:not(:root){overflow:hidden;}
|
|||
.btn{display:inline-block;margin-bottom:20px;padding:8px 20px;font-size:14px;font-size:0.875rem;background-color:#000000;color:#ffffff;border:2px solid #000000 !important;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}.btn:visited{color:#ffffff;}
|
||||
.btn:hover{background-color:#ffffff;color:#000000;}
|
||||
.well{padding:20px;border:1px solid #343434;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}
|
||||
.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
|
||||
@-webkit-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;}}@-moz-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;}}@-o-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;}}@keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;}}.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn;}
|
||||
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);} 100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px);} 100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px);} 100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);} 100%{opacity:1;transform:translateY(0);}}.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}
|
||||
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);} 100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px);} 100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px);} 100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);} 100%{opacity:1;transform:translateY(0);}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig;}
|
||||
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(0.3);} 50%{opacity:1;-webkit-transform:scale(1.05);} 70%{-webkit-transform:scale(0.9);} 100%{-webkit-transform:scale(1);}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(0.3);} 50%{opacity:1;-moz-transform:scale(1.05);} 70%{-moz-transform:scale(0.9);} 100%{-moz-transform:scale(1);}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(0.3);} 50%{opacity:1;-o-transform:scale(1.05);} 70%{-o-transform:scale(0.9);} 100%{-o-transform:scale(1);}}@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);} 50%{opacity:1;transform:scale(1.05);} 70%{transform:scale(0.9);} 100%{transform:scale(1);}}.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}
|
||||
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);} 60%{opacity:1;-webkit-transform:translateY(30px);} 80%{-webkit-transform:translateY(-10px);} 100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px);} 60%{opacity:1;-moz-transform:translateY(30px);} 80%{-moz-transform:translateY(-10px);} 100%{-moz-transform:translateY(0);}}@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px);} 60%{opacity:1;-o-transform:translateY(30px);} 80%{-o-transform:translateY(-10px);} 100%{-o-transform:translateY(0);}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);} 60%{opacity:1;transform:translateY(30px);} 80%{transform:translateY(-10px);} 100%{transform:translateY(0);}}.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown;}
|
||||
@-webkit-keyframes drop{0%{-webkit-transform:translateY(-500px);} 100%{-webkit-transform:translateY(0);}}@-moz-keyframes drop{0%{-moz-transform:translateY(-500px);} 100%{-moz-transform:translateY(0);}}@-o-keyframes drop{0%{-o-transform:translateY(-500px);} 100%{-o-transform:translateY(0);}}@keyframes drop{0%{transform:translateY(-500px);} 100%{transform:translateY(0);}}.drop{-webkit-animation-name:drop;-moz-animation-name:drop;-o-animation-name:drop;animation-name:drop;}
|
||||
@font-face{font-family:'FontAwesome';src:url('//netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.eot?v=3.2.0');src:url('//netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.eot?#iefix&v=3.2.0') format('embedded-opentype'),url('//netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.woff?v=3.2.0') format('woff'),url('//netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.ttf?v=3.2.0') format('truetype'),url('//netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.0') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
|
||||
[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;cursor:default;speak:none;}
|
||||
.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em;}
|
||||
|
|
@ -569,21 +577,21 @@ body{margin:0;padding:0;width:100%;background-color:#ffffff;border-top:5px solid
|
|||
.navigation-wrapper ul:after{clear:both;}
|
||||
.navigation-wrapper li{display:block;float:left;list-style:none;text-align:center;font-size:14px;font-size:0.875rem;text-transform:uppercase;color:#ffffff;}.navigation-wrapper li a:hover{-webkit-box-shadow:inset 0 0 1px #ffffff;-moz-box-shadow:inset 0 0 1px #ffffff;box-shadow:inset 0 0 1px #ffffff;}
|
||||
.navigation-wrapper a{display:block;padding:6px 10px;color:#ffffff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navigation-wrapper a:hover{background-color:#1a1a1a;}
|
||||
#site-nav{z-index:9999;display:none;}@media only screen and (min-width: 48em){#site-nav{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:.05s;-moz-animation-delay:.05s;-o-animation-delay:.05s;animation-delay:.05s;}}@media only screen and (min-width: 48em){#site-nav.closed{display:block;}}
|
||||
#site-nav{z-index:9000;display:none;}@media only screen and (min-width: 48em){#site-nav{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}}@media only screen and (min-width: 48em){#site-nav.closed{display:block;}}
|
||||
#site-nav.opened{display:block;max-height:100%;}#site-nav.opened li{float:none;}
|
||||
.no-js #site-nav{display:block;}
|
||||
#nav-toggle{display:block;vertical-align:top;margin:0;padding:4px 20px;background-color:#000000;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}@media only screen and (min-width: 48em){#nav-toggle{display:none;}}
|
||||
#nav-toggle{z-index:9999;display:block;vertical-align:top;margin:0;padding:4px 20px;background-color:#000000;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}@media only screen and (min-width: 48em){#nav-toggle{display:none;}}
|
||||
.masthead{margin-top:40px;*zoom:1;}.masthead:before,.masthead:after{display:table;content:"";line-height:0;}
|
||||
.masthead:after{clear:both;}
|
||||
@media only screen and (min-width: 48em){.masthead{margin-top:0;}}.masthead .wrap{text-align:center;max-width:27.5em;padding-right:20px;padding-left:20px;}@media only screen and (min-width: 48em){.masthead .wrap{max-width:45.5em;padding-right:60px;padding-left:60px;}}@media only screen and (min-width: 62.5em){.masthead .wrap{max-width:60em;}}
|
||||
.site-logo img{width:100px;height:100px;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:.05s;-moz-animation-delay:.05s;-o-animation-delay:.05s;animation-delay:.05s;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}@media only screen and (min-width: 48em){.site-logo img{width:150px;height:150px;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px;}}@media only screen and (min-width: 62.5em){.site-logo img{width:200px;height:200px;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}}
|
||||
.site-logo img{width:100px;height:100px;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:.05s;-moz-animation-delay:.05s;-o-animation-delay:.05s;animation-delay:.05s;border:4px solid #ffffff;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}@media only screen and (min-width: 48em){.site-logo img{width:150px;height:150px;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px;}}@media only screen and (min-width: 62.5em){.site-logo img{width:200px;height:200px;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}}
|
||||
.site-title{margin-bottom:0;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:.75s;-moz-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s;}.site-title a{color:#000000;}
|
||||
.site-description{margin-top:0;font-family:'volkhov',serif;font-size:16px;font-size:1rem;font-weight:400;font-style:italic;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s;}@media only screen and (min-width: 48em){.site-description{font-size:20px;font-size:1.25rem;}}
|
||||
#main{*zoom:1;}#main:before,#main:after{display:table;content:"";line-height:0;}
|
||||
#main:after{clear:both;}
|
||||
.entry,.hentry{*zoom:1;border-bottom:1px solid #cccccc;border-bottom:1px solid rgba(0, 0, 0, 0.1);}.entry:before,.hentry:before,.entry:after,.hentry:after{display:table;content:"";line-height:0;}
|
||||
.entry:after,.hentry:after{clear:both;}
|
||||
.entry-feature-image{margin:40px 0;width:100%;}
|
||||
.entry-feature-image{margin:20px 0 40px;width:100%;}@media only screen and (min-width: 48em){.entry-feature-image{margin-top:-75px;}}@media only screen and (min-width: 62.5em){.entry-feature-image{margin-top:-145px;}}
|
||||
.entry-header{max-width:640px;width:100%;margin-right:auto;margin-left:auto;}@media only screen and (min-width: 62.5em){.entry-header{max-width:100%;margin-right:0;margin-left:0;}}
|
||||
.entry-tags{display:block;margin-top:2em;text-transform:uppercase;font-size:16px;font-size:1rem;font-weight:600;}.entry-tags a{color:#222222;}
|
||||
span+.entry-title{margin-top:0;}
|
||||
|
|
|
|||
|
|
@ -90,3 +90,350 @@ svg:not(:root) {
|
|||
border: 1px solid @comp-color;
|
||||
.rounded(4px);
|
||||
}
|
||||
|
||||
// Animations
|
||||
// --------------------------------------------------
|
||||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;} 100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
-moz-animation-name: fadeIn;
|
||||
-o-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
-moz-animation-name: fadeInDown;
|
||||
-o-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
@-webkit-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDownBig {
|
||||
-webkit-animation-name: fadeInDownBig;
|
||||
-moz-animation-name: fadeInDownBig;
|
||||
-o-animation-name: fadeInDownBig;
|
||||
animation-name: fadeInDownBig;
|
||||
}
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceIn {
|
||||
-webkit-animation-name: bounceIn;
|
||||
-moz-animation-name: bounceIn;
|
||||
-o-animation-name: bounceIn;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
@-webkit-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-moz-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-o-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInDown {
|
||||
-webkit-animation-name: bounceInDown;
|
||||
-moz-animation-name: bounceInDown;
|
||||
-o-animation-name: bounceInDown;
|
||||
animation-name: bounceInDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes drop {
|
||||
0% {
|
||||
-webkit-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes drop {
|
||||
0% {
|
||||
-moz-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes drop {
|
||||
0% {
|
||||
-o-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.drop {
|
||||
-webkit-animation-name: drop;
|
||||
-moz-animation-name: drop;
|
||||
-o-animation-name: drop;
|
||||
animation-name: drop;
|
||||
}
|
||||
|
|
@ -47,17 +47,13 @@ body {
|
|||
}
|
||||
// Responsive nav toggle stuff
|
||||
#site-nav {
|
||||
z-index: 9999;
|
||||
z-index: 9000;
|
||||
display: none;
|
||||
@media @medium {
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
-o-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-delay: .05s;
|
||||
-moz-animation-delay: .05s;
|
||||
-o-animation-delay: .05s;
|
||||
animation-delay: .05s;
|
||||
}
|
||||
&.closed {
|
||||
|
||||
|
|
@ -77,6 +73,7 @@ body {
|
|||
display: block;
|
||||
}
|
||||
#nav-toggle {
|
||||
z-index: 9999;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
|
|
@ -123,6 +120,7 @@ body {
|
|||
-moz-animation-delay: .05s;
|
||||
-o-animation-delay: .05s;
|
||||
animation-delay: .05s;
|
||||
border: 4px solid @white;
|
||||
.rounded(100px);
|
||||
@media @medium {
|
||||
width: 150px;
|
||||
|
|
@ -179,8 +177,14 @@ body {
|
|||
border-bottom: 1px solid fade(@black,10);
|
||||
}
|
||||
.entry-feature-image {
|
||||
margin: 40px 0;
|
||||
margin: 20px 0 40px;
|
||||
width: 100%;
|
||||
@media @medium {
|
||||
margin-top: -75px;
|
||||
}
|
||||
@media @large {
|
||||
margin-top: -145px;
|
||||
}
|
||||
}
|
||||
.entry-header {
|
||||
max-width: 640px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue