mirror of
https://github.com/bigchaindb/site.git
synced 2025-01-11 13:33:47 +01:00
Hero community bar (#117)
* new hero community bar * fix hero smooth scroll
This commit is contained in:
GitHub
parent
0cfeb82251
commit
afb4428448
@ -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
|
||||
|
||||
21
_src/_assets/javascripts/bigchain/github.js
Normal file
21
_src/_assets/javascripts/bigchain/github.js
Normal file
@ -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);
|
||||
}());
|
||||
@ -1,5 +1,7 @@
|
||||
|
||||
//=include bigchain/github.js
|
||||
//=include bigchain/testimonials.js
|
||||
//=include bigchain/smoothscroll.js
|
||||
|
||||
jQuery(function($) {
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user