Switch header over to use local logo and drop js for animating logo and tagline on load

Author: Munter

docs/_includes/header.html

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

docs/css/style.css

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