From afb4428448461ff42a7773cecc83839692edbf27 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 4 May 2017 14:27:12 +0200 Subject: [PATCH] Hero community bar (#117) * new hero community bar * fix hero smooth scroll --- _config.yml | 4 + _src/_assets/javascripts/bigchain/github.js | 21 ++++ _src/_assets/javascripts/page-front.js | 2 + _src/_assets/styles/bigchain/_animations.scss | 20 ++++ _src/_assets/styles/bigchain/_hero.scss | 107 +++++++++++++----- _src/_includes/hero.html | 26 ++++- 6 files changed, 147 insertions(+), 33 deletions(-) create mode 100644 _src/_assets/javascripts/bigchain/github.js diff --git a/_config.yml b/_config.yml index b87b574..1d1d489 100644 --- a/_config.yml +++ b/_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 diff --git a/_src/_assets/javascripts/bigchain/github.js b/_src/_assets/javascripts/bigchain/github.js new file mode 100644 index 0000000..deb5652 --- /dev/null +++ b/_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); +}()); diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js index 9ba44f5..a1a4fa9 100644 --- a/_src/_assets/javascripts/page-front.js +++ b/_src/_assets/javascripts/page-front.js @@ -1,5 +1,7 @@ +//=include bigchain/github.js //=include bigchain/testimonials.js +//=include bigchain/smoothscroll.js jQuery(function($) { diff --git a/_src/_assets/styles/bigchain/_animations.scss b/_src/_assets/styles/bigchain/_animations.scss index 7309ce7..cb5897d 100644 --- a/_src/_assets/styles/bigchain/_animations.scss +++ b/_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 { diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss index ac90fc4..c453397 100644 --- a/_src/_assets/styles/bigchain/_hero.scss +++ b/_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; + } +} diff --git a/_src/_includes/hero.html b/_src/_includes/hero.html index eee83a8..3f4d43b 100644 --- a/_src/_includes/hero.html +++ b/_src/_includes/hero.html @@ -5,10 +5,30 @@

{{ page.tagline }}

- Quick Start + Quick Start
- - Learn More
+ + + Learn More +