hero cleanup (#101)

* hero elements & markup cleanup
* simplify intro animation
* bump ruby & node
* fix fallback banner

.travis.yml

@@ -3,7 +3,7 @@ dist: trusty
 
 language: ruby
 rvm:
-    - 2.3.0
+    - 2.4.0
 
 cache:
   bundler: true
@@ -11,7 +11,7 @@ cache:
   - $TRAVIS_BUILD_DIR/node_modules
 
 before_install:
-    - nvm install 6
+    - nvm install 7
 
 before_script: "_ci/setup.sh"
 script: "_ci/build.sh"

_src/_assets/javascripts/page-front.js

@@ -4,13 +4,6 @@
 
 jQuery(function($) {
 
-    // hero stuff
-    $('.hero .logo').on('animationend webkitAnimationEnd oAnimationEnd',
-        function(e) {
-            $('.hero').addClass('is-ready');
-        }
-    );
-
     Testimonials.init();
 
 });

_src/_assets/styles/_page-features.scss

@@ -1,8 +1,4 @@
-.page-features {
+
-    .header {
-        background-position: bottom center;
-    }
-}
 .table--comparison {
     .icon-check {
         width: 1rem;

_src/_assets/styles/_page-front.scss

@@ -39,20 +39,6 @@
     }
 }
 
-.graph-bigchain {
-    display: block;
-}
-
-// the SVG
-#bigchain-graph {
-    @media ($screen-md) {
-        margin-left: -15%;
-        margin-right: -15%;
-        width: 130%;
-    }
-
-}
-
 .section-intro__detail {}
 
 .section-quickstart__title {

_src/_assets/styles/bigchain/_grid.scss

@@ -37,7 +37,8 @@
 
 .row {
     max-width: $screen-md-min;
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
     padding-left: ($gutter-space / 2);
     padding-right: ($gutter-space / 2);
 

_src/_assets/styles/bigchain/_hero.scss

@@ -8,7 +8,7 @@ $menu-height-md: 66px;
 
 .hero {
     @extend .background--photo;
-    background-image: url('/assets/img/berlin-poster.jpg');
+    background-image: url('/assets/img/hero-berlin.jpg');
     text-align: center;
     overflow: hidden;
     position: relative;
@@ -16,32 +16,11 @@ $menu-height-md: 66px;
     // vertically center everything
     display: flex;
     align-items: center;
-    min-height: 420px;
+    min-height: 480px;
-    max-height: 100vh;
     flex-wrap: wrap;
 
-    .section {
+    @media ($screen-md) {
-        @media ($screen-md) {
+        height: 100vh;
-            height: 100vh;
-        }
-    }
-
-    .logo--full {
-        margin: 0 auto;
-        max-width: 10em;
-
-        // visual centering
-        position: relative;
-        right: -3%;
-
-        @media ($screen-sm) {
-            max-width: 13em;
-        }
-
-        @media ($screen-md) {
-            max-width: 20em;
-            margin-top: ($spacer * 2);
-        }
     }
 
     .section-title {
@@ -63,7 +42,7 @@ $menu-height-md: 66px;
         color: #fff;
         opacity: .8;
         position: absolute;
-        bottom: -($spacer * 2);
+        bottom: $spacer;
         left: 0;
         right: 0;
         width: 100%;
@@ -87,7 +66,6 @@ $menu-height-md: 66px;
     }
 
     // intro animation
-    .logo--full,
     .section-title,
     .btn {
         @extend .animation-slide-in-from-bottom;
@@ -95,103 +73,16 @@ $menu-height-md: 66px;
         animation-fill-mode: backwards;
     }
 
-    .logo--full {
-        animation-timing-function: $timing-default;
-    }
-
-    .section-title,
     .btn {
-        @extend .animation-slide-in-from-bottom;
+        animation-delay: .5s;
-        animation-play-state: paused;
-    }
-
-    .btn { animation-delay: .2s; }
-
-    &.is-ready {
-        .section-title,
-        .btn {
-            animation-play-state: running;
-        }
     }
 }
 
 .hero__content {
-    position: relative;
+    margin-bottom: $spacer * 4;
-    z-index: 1;
-    margin-bottom: ($spacer * 4);
-    padding-top: $menu-height-md;
-}
-
-
-//
-// Video hero
-//
-.hero-video {
-    // hide color overlay to prevent double overlays
-    // color overlay of hero-video__background will take over
-    @media ($screen-md) {
-        &:before { display: none }
-    }
-}
-
-.hero-video .menu,
-.hero-video__content,
-.hero-video__video {
-    @media ($screen-md) {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-    }
-}
-
-.hero-video__content {
 
     @media ($screen-md) {
-        z-index: 3 !important;
+        align-self: flex-start;
-        bottom: 0;
+        margin-bottom: 0;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        width: 100%;
     }
 }
-
-// video container
-.hero-video__background {
-    @extend .color-overlay;
-    display: none;
-
-    @media ($screen-md) {
-        display: block;
-        margin-bottom: -9px;
-        max-height: 100vh;
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-
-        &:before { z-index: 2; }
-    }
-}
-
-// the video itself
-.hero-video__video,
-.hero-video__poster {
-    @extend .img--responsive;
-}
-
-.hero-video__video {
-    @extend .transition;
-    opacity: 0;
-    margin: auto;
-    width: 100%;
-
-    &.enabled {
-        opacity: 1
-    }
-}
-
-.hero-video__poster {
-    display: block;
-    opacity: 0;
-}

_src/_assets/styles/bigchain/_menus.scss

@@ -2,7 +2,8 @@
 .menu {
     position: relative;
     z-index: 10;
-    flex: 1;
+    width: 100%;
+    align-self: flex-start;
 
     .grid__col {
         text-align: center;
@@ -166,7 +167,6 @@
     margin-right: -$gutter-space / 2;
     padding-left: $gutter-space / 2;
     padding-right: $gutter-space / 2;
-    max-width: 100%;
 
     &::-webkit-scrollbar { display: none; }
 

_src/_assets/styles/bigchain/_sections.scss

@@ -104,7 +104,7 @@
     text-shadow: 0 1px 0 rgba(0,0,0,.1);
 
     // background
-    background: url('../img/berlin-banner.jpg') no-repeat center center;
+    background: url('../img/hero-berlin.jpg') no-repeat center center;
     background-size: cover;
 
     .row * {

_src/_includes/hero-video.html

@@ -1,26 +0,0 @@
-<header class="hero hero-video">
-
-    {% include menu-main.html %}
-
-    <div class="hero__content hero-video__content row">
-        <hgroup>
-            <svg class="logo logo--full logo--white--green" aria-labelledby="title">
-                <title>Logo</title>
-                <use xlink:href="/assets/img/sprite.svg#logo"></use>
-            </svg>
-
-            <h1 class="section-title">{{ page.tagline }}</h1>
-
-            <a href="https://docs.bigchaindb.com/projects/server/en/latest/quickstart.html" class="btn btn-primary">Quick Start</a>
-        </hgroup>
-
-        <a href="#features" class="scroll btn btn-link btn-sm">Learn More <svg class="icon">
-            <use xlink:href="/assets/img/sprite.svg#icon-caret"></use>
-        </svg></a>
-    </div>
-
-    <div class="hero-video__background">
-        <img class="hero-video__poster" width="1920" height="1080" src="/assets/img/berlin-poster.jpg" />
-    </div>
-
-</header>

_src/_includes/hero.html

@@ -0,0 +1,14 @@
+<header class="hero">
+
+    {% include menu-main.html %}
+
+    <div class="hero__content row">
+        <hgroup>
+            <h1 class="section-title">{{ page.tagline }}</h1>
+            <a href="https://docs.bigchaindb.com/projects/server/en/latest/quickstart.html" class="btn btn-primary">Quick Start</a>
+        </hgroup>
+
+        <a href="#features" class="scroll btn btn-link btn-sm">Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
+    </div>
+
+</header>

_src/index.html

@@ -1,7 +1,7 @@
 ---
 layout: base
 
-tagline:    'Meet BigchainDB. The scalable blockchain database.'
+tagline:    'Meet BigchainDB. <br>The scalable blockchain database.'
 
 front_page: true
 hero_video_name: northern-light
@@ -10,7 +10,7 @@ quotes: set1
 js: page-front.min.js
 ---
 
-{% include hero-video.html %}
+{% include hero.html %}
 
 <section id="features" class="section section-intro">
     <div class="row">