From 590d103712d1a4f373deb716ef6d73feed0f2f80 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 12 Apr 2017 19:08:58 +0200
Subject: [PATCH] header animate all the things

---
 _src/_assets/styles/_page-usecases.scss   |  9 ++++++++
 _src/_assets/styles/bigchain/_header.scss | 28 +++++++++++++++++++++++
 _src/_assets/styles/bigchain/_hero.scss   |  1 -
 _src/_assets/styles/bigchain/_menus.scss  |  2 +-
 _src/_layouts/usecase.html                |  6 ++---
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss
index 7973848..d2a1430 100644
--- a/_src/_assets/styles/_page-usecases.scss
+++ b/_src/_assets/styles/_page-usecases.scss
@@ -167,6 +167,14 @@
 }
 
 .header--usecase {
+    hgroup {
+        margin-top: ($spacer * 5);
+    }
+
+    .header__title {
+        padding-top: 0;
+    }
+
     .header__logo {
         width: 140px;
         max-height: 100px;
@@ -178,6 +186,7 @@
     }
 
     .header__label {
+        text-align: center;
         display: block;
         color: $brand-main-blue-light;
         font-size: $font-size-lg;
diff --git a/_src/_assets/styles/bigchain/_header.scss b/_src/_assets/styles/bigchain/_header.scss
index 8795649..58b0dcd 100644
--- a/_src/_assets/styles/bigchain/_header.scss
+++ b/_src/_assets/styles/bigchain/_header.scss
@@ -2,6 +2,34 @@
     @extend .background--photo;
 }
 
+// intro animation
+.header__title,
+.header__description,
+.header__logo,
+.header__label {
+    .wf-active &,
+    .wf-inactive & {
+        @extend .animation-slide-in-from-bottom;
+        animation-fill-mode: backwards;
+    }
+}
+
+.header__description,
+.header__logo {
+    .wf-active &,
+    .wf-inactive & {
+        animation-delay: .3s;
+    }
+}
+
+.header__btn,
+.header__label {
+    .wf-active &,
+    .wf-inactive & {
+        animation-delay: .5s;
+    }
+}
+
 .header__title {
     position: relative;
     z-index: 1;
diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss
index 6d8b9d2..ac90fc4 100644
--- a/_src/_assets/styles/bigchain/_hero.scss
+++ b/_src/_assets/styles/bigchain/_hero.scss
@@ -71,7 +71,6 @@ $menu-height-md: 66px;
         .wf-active &,
         .wf-inactive & {
             @extend .animation-slide-in-from-bottom;
-            animation-duration: 1s;
             animation-fill-mode: backwards;
         }
     }
diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss
index 628baf4..3b8697d 100644
--- a/_src/_assets/styles/bigchain/_menus.scss
+++ b/_src/_assets/styles/bigchain/_menus.scss
@@ -42,7 +42,7 @@
         transition: transform .2s ease-out;
 
         @media ($screen-md) {
-            bottom: $spacer * 1.5;
+            bottom: $spacer * 1.3;
         }
     }
 
diff --git a/_src/_layouts/usecase.html b/_src/_layouts/usecase.html
index 16f0599..f04bb94 100644
--- a/_src/_layouts/usecase.html
+++ b/_src/_layouts/usecase.html
@@ -12,7 +12,7 @@ cta:
     {% include menu-main.html %}
 
     <div class="row">
-        <h1 class="header__title">
+        <hgroup>
             <span class="header__label">{{ page.industry }}</span>
             {% if page.bitmaplogo %}
                 <img class="header__logo" src="/assets/img/{{ page.bitmaplogo }}" />
@@ -22,8 +22,8 @@ cta:
                 </svg>
             {% endif %}
 
-            {{ page.title }}
-        </h1>
+            <h1 class="header__title">{{ page.title }}</h1>
+        </hgroup>
     </div>
 </header>