From 99a9d6289f46b057564429e32823a625ed74cfca Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 20 Dec 2015 19:52:34 +0100
Subject: [PATCH] nicer intro animation

---
 _src/_assets/javascripts/bigchain.js          |  6 +++++
 .../styles/bigchain/_mixins/_buttons.scss     |  7 ++----
 _src/_assets/styles/page-front.scss           | 22 ++++++++++++++++---
 _src/index.html                               |  2 +-
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js
index 356dc24..c67497d 100644
--- a/_src/_assets/javascripts/bigchain.js
+++ b/_src/_assets/javascripts/bigchain.js
@@ -15,4 +15,10 @@ jQuery(function($) {
     Forms.init();
     SmoothScroll.init();
 
+    $('.hero .logo').on('animationend webkitAnimationEnd oAnimationEnd',
+        function(e) {
+            $('.hero').addClass('is-ready');
+        }
+    );
+
 });
diff --git a/_src/_assets/styles/bigchain/_mixins/_buttons.scss b/_src/_assets/styles/bigchain/_mixins/_buttons.scss
index 67a636f..bb7c9b1 100644
--- a/_src/_assets/styles/bigchain/_mixins/_buttons.scss
+++ b/_src/_assets/styles/bigchain/_mixins/_buttons.scss
@@ -5,7 +5,7 @@
     $active-background: darken($background, 5%);
     $active-border: darken($border, 12%);
     color: $color !important;
-    background-color: $background;
+    background: $background;
 
     &:hover,
     &:focus {
@@ -14,11 +14,8 @@
     }
     &:active {
         color: $color !important;
-        background-color: darken($background, 30%);
+        background: darken($background, 10%);
         transition: none;
-
-        // Remove the gradient for the pressed/active state
-        background-image: none;
     }
     &.disabled,
     &:disabled {
diff --git a/_src/_assets/styles/page-front.scss b/_src/_assets/styles/page-front.scss
index 9007bc5..58bae8c 100644
--- a/_src/_assets/styles/page-front.scss
+++ b/_src/_assets/styles/page-front.scss
@@ -51,6 +51,8 @@
         color: #fff;
         font-size: $font-size-h1;
         margin-bottom: ($spacer * 3);
+
+        &:after { display: none }
     }
 
     .btn {
@@ -62,15 +64,29 @@
     }
 
     // intro animation
-    .logo,
+    .logo {
+        @extend .animation-slide-in-from-bottom;
+        animation-duration: 1s;
+        animation-timing-function: $timing-default;
+    }
+
     .section-title,
     .btn {
         @extend .animation-slide-in-from-bottom;
         animation-fill-mode: backwards;
+        animation-play-state: paused;
     }
 
-    .section-title { animation-delay: .2s; }
-    .btn           { animation-delay: .4s; }
+    .btn { animation-delay: .2s; }
+
+    &.is-ready {
+        .section-title,
+        .btn {
+            animation-play-state: running;
+        }
+    }
+
+
 }
 
 
diff --git a/_src/index.html b/_src/index.html
index 843d4cc..6951e4f 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -77,7 +77,7 @@ front_page: true
                 <label class="form-label" for="comment">Your Comment (optional)</label>
             </p>
             <p class="form-group">
-                <input class="btn btn-secondary" type="submit" value="Send">
+                <input class="btn btn-primary" type="submit" value="Send">
             </p>
         </form>
     </div>