Hero community bar (#117)

* new hero community bar
* fix hero smooth scroll

_config.yml

@@ -30,6 +30,10 @@ address:
     city:               Berlin
     country:            Germany
 
+release:
+    version: "0.10"
+    post: https://blog.bigchaindb.com/bigchaindb-version-0-10-released-9684fdb2a8ff
+
 # Track all the things
 # --------------------
 analyticsID:            UA-60614729-8

_src/_assets/javascripts/bigchain/github.js

@@ -0,0 +1,21 @@
+(function() {
+
+    var s = document.createElement('script'),
+        githubApiUrl = 'https://api.github.com/repos/',
+        owner = 'bigchaindb',
+        repo = 'bigchaindb';
+
+    s.type = 'text/javascript';
+    s.async = true;
+    s.src = githubApiUrl + owner + '/' + repo + '?callback=' + owner + '.getGitHubRepoInfo';
+
+    window[owner] = window[owner] || {};
+    window[owner].getGitHubRepoInfo = function(response) {
+
+        var stargazers = response.data.stargazers_count;
+
+        document.getElementById('stargazers').innerText = stargazers;
+    };
+
+    document.getElementsByTagName('HEAD')[0].appendChild(s);
+}());

_src/_assets/javascripts/page-front.js

@@ -1,5 +1,7 @@
 
+//=include bigchain/github.js
 //=include bigchain/testimonials.js
+//=include bigchain/smoothscroll.js
 
 jQuery(function($) {
 

_src/_assets/styles/bigchain/_animations.scss

@@ -26,6 +26,26 @@ $timing-bounce:         cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
 //
 // Custom animations
 //
+@mixin animation-fade-in {
+    animation: fade-in .2s $timing-default;
+}
+
+.animation-fade-in {
+    @include animation-fade-in;
+
+    &.paused {
+        animation-play-state: paused;
+    }
+}
+
+@keyframes fade-in {
+    0%   {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 
 // smooooothly slide in from bottom
 @mixin animation-slide-in-from-bottom {

_src/_assets/styles/bigchain/_hero.scss

@@ -38,36 +38,9 @@ $menu-height-md: 66px;
         &:after { display: none }
     }
 
-    .btn-link {
-        color: #fff;
-        opacity: .8;
-        position: absolute;
-        bottom: $spacer;
-        left: 0;
-        right: 0;
-        width: 100%;
-        display: none;
-
-        @media ($screen-md) {
-            display: block;
-        }
-
-        &:hover,
-        &:focus { opacity: 1; }
-
-        // the caret
-        .icon {
-            width: 12px;
-            height: 12px;
-            stroke: #fff;
-            display: block;
-            margin: auto;
-        }
-    }
-
     // intro animation
     .section-title,
-    .btn {
+    .hero__action {
         .wf-active &,
         .wf-inactive & {
             @extend .animation-slide-in-from-bottom;
@@ -75,26 +48,100 @@ $menu-height-md: 66px;
         }
     }
 
-    .btn {
+    .hero__action {
         .wf-active &,
         .wf-inactive & {
             animation-delay: .5s;
         }
     }
 
-    .btn-link {
+    .hero__community,
+    .hero__more {
         .wf-active &,
         .wf-inactive & {
+            @extend .animation-fade-in;
+            animation-fill-mode: backwards;
             animation-delay: .8s;
         }
     }
 }
 
+
 .hero__content {
+    margin-top: $spacer * 2;
     margin-bottom: $spacer * 4;
 
     @media ($screen-md) {
         align-self: flex-start;
+        margin-top: $spacer * 4;
         margin-bottom: 0;
     }
 }
+
+
+.hero__community {
+    align-self: flex-end;
+    width: 100%;
+
+    // resemble menu background
+    background: rgba($brand-main-blue-dark, .35);
+    backdrop-filter: saturate(150%) blur(10px);
+    border-top: 1px solid rgba($brand-main-gray, .5);
+    border-bottom: 1px solid rgba($brand-main-gray, .5);
+
+    .btn {
+        font-weight: $font-weight-normal;
+        box-shadow: none;
+        background: none;
+        opacity: .8;
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+        }
+
+        &:first-child {
+            display: block;
+
+            @media ($screen-sm) {
+                display: inline-block;
+            }
+        }
+    }
+
+    .stargazers {
+        font-size: .6rem;
+        line-height: 1;
+        background: rgba($brand-main-gray-lighter, .15);
+        padding: .1rem .3rem;
+        border-radius: 1rem;
+        margin-top: -.1rem;
+        display: inline;
+    }
+}
+
+
+.hero__more {
+    color: #fff;
+    opacity: .8;
+    align-self: flex-end;
+    margin-bottom: $spacer;
+    width: 100%;
+    display: none;
+
+    @media ($screen-md) {
+        display: block;
+    }
+
+    &:hover,
+    &:focus { opacity: 1; }
+
+    // the caret
+    .icon {
+        width: 12px;
+        height: 12px;
+        stroke: #fff;
+        display: block;
+        margin: auto;
+    }
+}

_src/_includes/hero.html

@@ -5,10 +5,30 @@
     <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>
+            <a href="https://docs.bigchaindb.com/projects/server/en/latest/quickstart.html" class="hero__action 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>
 
+    <aside class="hero__community">
+        <div class="row">
+            <a class="btn btn-text btn-sm" href="{{ site.release.post }}" rel="external">Latest release: {{ site.release.version }}</a>
+
+            <a class="social-link btn btn-text btn-sm js-social-link" href="https://github.com/{{ site.github.org }}/{{ site.github.repo }}" title="Star {{ site.github.org }}/{{ site.github.repo }} on GitHub">
+                <svg class="icon icon--social icon--github" aria-labelledby="title">
+                    <title>GitHub</title>
+                    <use xlink:href="/assets/img/sprite.svg#github"></use>
+                </svg> Star <span class="stargazers" id="stargazers"></span>
+            </a>
+
+            <a class="social-link btn btn-text btn-sm js-social-link" href="https://twitter.com/{{ site.twitter }}" title="Follow {{ site.twitter }} on Twitter">
+                <svg class="icon icon--social icon--twitter" aria-labelledby="title">
+                    <title>Twitter</title>
+                    <use xlink:href="/assets/img/sprite.svg#twitter"></use>
+                </svg> Follow
+            </a>
+        </div>
+    </aside>
+
+    <a class="hero__more scroll btn btn-link btn-sm" href="#features">Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
+
 </header>