Modify header animations and placement

This commit is contained in:
Michael Rose 2013-07-30 09:53:12 -04:00
parent 396b0a8aeb
commit ae4299853d
5 changed files with 382 additions and 19 deletions

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

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