1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00

hero cleanup (#101)

* hero elements & markup cleanup
* simplify intro animation
* bump ruby & node
* fix fallback banner
This commit is contained in:
Matthias Kretschmann 2017-03-02 14:27:08 +01:00 committed by GitHub
parent 83a739800f
commit e77e54190d
15 changed files with 33 additions and 178 deletions

View File

@ -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"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

View File

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 228 KiB

View File

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

View File

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

View File

@ -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 {

View File

@ -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);

View File

@ -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;
max-height: 100vh;
min-height: 480px;
flex-wrap: wrap;
.section {
@media ($screen-md) {
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);
}
@media ($screen-md) {
height: 100vh;
}
.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-play-state: paused;
}
.btn { animation-delay: .2s; }
&.is-ready {
.section-title,
.btn {
animation-play-state: running;
}
animation-delay: .5s;
}
}
.hero__content {
position: relative;
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 {
margin-bottom: $spacer * 4;
@media ($screen-md) {
z-index: 3 !important;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
align-self: flex-start;
margin-bottom: 0;
}
}
// 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;
}

View File

@ -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; }

View File

@ -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 * {

View File

@ -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>

14
_src/_includes/hero.html Normal file
View File

@ -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>

View File

@ -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">