1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00

timeline design

This commit is contained in:
Matthias Kretschmann 2016-01-21 14:34:47 +01:00
parent d08ca58047
commit bac8498ec2
5 changed files with 91 additions and 2 deletions

View File

@ -0,0 +1,10 @@
<svg version="1.1" width="60px" height="60px" viewBox="0 0 60 60">
<g>
<circle class="st0" cx="50" cy="26" r="5"/>
<path class="st0" d="M50.2,35H59c0,6.7-0.6,12.7-6,13.8V59h-2.8H47V48.8c-5-1.1-5.7-7.1-5.7-13.8H50.2z"/>
<circle class="st0" cx="30" cy="6" r="5"/>
<path class="st0" d="M30.2,15H39c0,6.7-0.6,12.9-6,14v10h-2.8H27V29c-5-1.1-5.7-7.3-5.7-14H30.2z"/>
<circle class="st0" cx="10" cy="26" r="5"/>
<path class="st0" d="M9.8,35h8.8c0,6.7-0.3,12.9-5.7,14v10h-3H7V49c-5-1.1-6-7.3-6-14H9.8z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 546 B

View File

@ -31,6 +31,7 @@
@import 'bigchain/_header';
@import 'bigchain/_footer';
@import 'bigchain/_team';
@import 'bigchain/_timeline';
@import 'bigchain/_utilities';
// Content types

View File

@ -0,0 +1,58 @@
//
// Timeline
// ---
// bigchain.io
//
.timeline {
position: relative;
// actual timeline line
&:before {
@media ($screen-sm) {
content: "";
width: 400%;
margin-left: -200%;
height: 1px;
display: block;
background: #fff;
position: absolute;
bottom: 2.4rem;
}
}
}
.timeline__entry {
text-align: center;
}
.timeline__entry__title,
.timeline__entry__time {
display: block;
}
.timeline__entry__title {
@extend .h4;
color: #fff;
// data point
&:after {
content: "";
width: .5rem;
height: .5rem;
border-radius: 50%;
margin: $spacer auto;
display: block;
background: #fff;
}
}
.timeline__entry__time {
@extend .small;
opacity: .5;
}
.timeline__entry--future {
opacity: .7;
}

View File

@ -48,7 +48,12 @@
.row { z-index: 1 }
.section-title,
.section-description {
.section-description,
.timeline {
color: #fff;
}
.timeline {
}
}

View File

@ -33,7 +33,7 @@ title: Features
<p class="difference">
<svg class="difference__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
</svg>
<span class="difference__text">Federation consensus model public via trusted nodes (more coming soon), private (select your own)</span>
</p>
@ -65,5 +65,20 @@ title: Features
<h1 class="section-title">Timeline.</h1>
<p class="section-description">Private beta is shipping now. Contact us more information. Public Bigchain will be released soon</p>
</header>
<figure class="timeline grid grid--full grid-small--fit grid--gutters">
<div class="timeline__entry grid__col">
<span class="timeline__entry__title">Whitepaper</span>
<span class="timeline__entry__time">Early 2015</span>
</div>
<div class="timeline__entry grid__col">
<span class="timeline__entry__title">Private Beta</span>
<span class="timeline__entry__time">Jan 2016</span>
</div>
<div class="timeline__entry timeline__entry--future grid__col">
<span class="timeline__entry__title">Public</span>
<span class="timeline__entry__time">Soon</span>
</div>
</figure>
</div>
</section>