bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2025-02-14 21:10:28 +01:00
Code Releases Activity

hero copy tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-12-21 15:41:44 +01:00
parent 71f46c8b69
commit efe35671d9
3 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_src/_assets/styles/bigchain/_variables.scss
View File

@ -47,7 +47,7 @@ $font-size-root-lg: 18px !default;
$font-size-base: 1rem !default; $font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default; $font-size-lg: 1.25rem !default;
$font-size-sm: 0.75rem !default; $font-size-sm: 0.875rem !default;
$font-size-xs: 0.75rem !default; $font-size-xs: 0.75rem !default;
$font-size-h1: 3rem !default; $font-size-h1: 3rem !default;

38
_src/_assets/styles/page-front.scss
View File

@ -31,11 +31,6 @@
z-index: 0; z-index: 0;
} }
.hero__content {
position: relative;
z-index: 1;
}
.logo { .logo {
fill-opacity: .6; fill-opacity: .6;
margin: auto; margin: auto;
@ -49,14 +44,14 @@
.section-title { .section-title {
color: #fff; color: #fff;
margin-bottom: ($spacer * 3); margin-bottom: $spacer;
&:after { display: none } &:after { display: none }
} }
.btn-link { .btn-link {
color: #fff; color: #fff;
margin-top: ($spacer * 3); margin-top: ($spacer * 4);
opacity: .7; opacity: .7;
&:hover, &:hover,
@ -80,10 +75,15 @@
} }
} }
.btn-link {
}
// intro animation // intro animation
.logo, .logo,
.section-title, .section-title,
.btn { .btn,
.hero__comingsoon {
@extend .animation-slide-in-from-bottom; @extend .animation-slide-in-from-bottom;
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: backwards; animation-fill-mode: backwards;
@ -94,22 +94,36 @@
} }
.section-title, .section-title,
.btn { .btn,
.hero__comingsoon {
@extend .animation-slide-in-from-bottom; @extend .animation-slide-in-from-bottom;
animation-play-state: paused; animation-play-state: paused;
} }
.btn { animation-delay: .2s; } .hero__comingsoon { animation-delay: .2s; }
.btn-link { animation-delay: .4s; } .btn { animation-delay: .4s; }
.btn-link { animation-delay: .6s; }
&.is-ready { &.is-ready {
.section-title, .section-title,
.btn { .btn,
.hero__comingsoon {
animation-play-state: running; animation-play-state: running;
} }
} }
}
.hero__content {
position: relative;
z-index: 1;
}
.hero__comingsoon {
text-shadow: none;
display: block;
color: rgba($brand-main-blue-dark, .9);
margin-top: ($spacer * 2);
margin-bottom: ($spacer * 2);
} }

3
_src/index.html
View File

@ -11,8 +11,9 @@ front_page: true
<title>Logo</title> <title>Logo</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use> <use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg> </svg>
<h1 class="section-title">Bigchain is coming.</h1> <h1 class="section-title">Meet Bigchain, the world’s most scalable blockchain.</h1>
<p> <p>
<span class="hero__comingsoon">Coming soon</span>
<a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a> <a href="#earlyaccess" class="btn btn-secondary-outline">Get Early Access</a>
</p> </p>
<a href="#benchmarks" class="btn btn-link btn-sm">Learn More <svg class="icon"> <a href="#benchmarks" class="btn btn-link btn-sm">Learn More <svg class="icon">