Skip to content

Commit

Permalink
Switch header over to use local logo and drop js for animating logo a…
Browse files Browse the repository at this point in the history
…nd tagline on load
  • Loading branch information
Munter committed Dec 22, 2017
1 parent f56e411 commit 363d05e
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 33 deletions.
11 changes: 9 additions & 2 deletions docs/_includes/header.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
<header id="_header">
<h1><a href="/"><img onload="window.document.getElementById('_header').classList.add('onload');" src="//cldup.com/xFVFxOioAU.svg"></a></h1>
<p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
<h1>
<a href="/">
<img src="/images/mocha-logo.svg" alt="Mocha" width="192" height="192">
</a>
</h1>

<p id="tag">
<em>simple</em>, <em>flexible</em>, <em>fun</em>
</p>
</header>
71 changes: 40 additions & 31 deletions docs/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,54 @@ body {
border-top: 2px solid #ddd;
}

#content {
padding: 0 110px 60px 110px;
@keyframes fadein {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes slideright {
from {
transform: translateX(-45px);
}

to {
transform: translateX(0);
}
}

header {
padding: 140px 110px 0 110px;
}

h1 {
#_header h1 {
margin-left: -19px;
opacity: 0;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
animation: fadein 1s forwards;
}

#tag {
color: #c29d7f;
font-weight: 100;
font-size: 30px;
margin-top: -158px;
margin-left: 185px;
margin-bottom: 125px;
letter-spacing: 2px;

animation: fadein 1s forwards, slideright 1s forwards;
}

#content {
padding: 0 110px 60px 110px;
}

#tag em {
font-style: normal
}

#_backers a, #_sponsors a {
Expand Down Expand Up @@ -61,30 +94,6 @@ h3 > code {
font-size: 14px;
}

#tag {
opacity: 0;
color: #c29d7f;
font-weight: 100;
font-size: 30px;
margin-top: -155px;
margin-left: 140px;
margin-bottom: 125px;
letter-spacing: 2px;
-webkit-transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s;
-moz-transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s;
-o-transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s;
transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s;
}

#tag em {
font-style: normal
}

.onload #tag {
opacity: 1;
margin-left: 185px;
}

#content > p:first-child {
font-size: 20px;
font-weight: 200;
Expand Down
125 changes: 125 additions & 0 deletions docs/images/mocha-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 363d05e

Please sign in to comment.