1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-06-29 00:58:04 +02:00

features content & layout

This commit is contained in:
Matthias Kretschmann 2016-01-14 13:04:44 +01:00
parent 3024bd7726
commit 43cb52d5d2
6 changed files with 121 additions and 9 deletions

View File

@ -40,3 +40,4 @@
@import 'page-404';
@import 'page-styleguide';
@import 'page-about';
@import 'page-features';

View File

@ -1,11 +1,21 @@
.content--page {
.row {
> h1, h2 {
border-bottom: 2px solid $gray-lightest;
padding-bottom: $spacer;
margin-bottom: ($spacer * 2);
text-align: center;
}
}
.content--page--markdown {
padding-top: ($spacer * 2);
padding-bottom: ($spacer * 2);
@media ($screen-sm) {
padding-top: ($spacer * 4);
padding-bottom: ($spacer * 4);
}
> h1, h2 {
border-bottom: 2px solid $gray-lightest;
padding-bottom: $spacer;
margin-bottom: ($spacer * 2);
text-align: center;
}
}

View File

@ -1,6 +1,5 @@
.header {
position: relative;
margin-bottom: ($spacer * 4);
padding-top: 60px; // space for absolute menu
// background

View File

@ -0,0 +1,28 @@
.section-difference {
@extend .background--gray;
}
.difference {
display: flex;
align-items: center;
padding: ($spacer * 2) 0;
&:first-of-type { padding-top: 0; }
}
.difference__icon {
flex: 0 0 15%;
margin-right: 5%;
}
.difference__text {
flex: 0 0 80%;
.section-difference & { color: #fff; }
}
.section-timeline {
@extend .background--light;
}

View File

@ -12,9 +12,15 @@ layout: base
</header>
<section role="main" class="content content--page">
<div class="row">
{% if page.path contains '.md' %}
<div class="row content--page--markdown">
{% endif %}
{{ content }}
{% if page.path contains '.md' %}
</div>
{% endif %}
</section>

View File

@ -3,3 +3,71 @@ layout: page
title: Features
---
<section class="section section-benefits">
<div class="row">
<header class="section-header">
<h1 class="section-title">All the good stuff.</h1>
</header>
<div class="grid grid--full grid-small--fit grid--gutters">
<p class="grid__col">
Universal Timestamping
</p>
<p class="grid__col">
Build your trust network
</p>
<p class="grid__col">
Gain supply chain transparency
</p>
</div>
</div>
</section>
<section class="section section-difference">
<div class="row">
<header class="section-header">
<h1 class="section-title">Bigchain is different.</h1>
</header>
<p class="difference">
<svg class="difference__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
</svg>
<span class="difference__text">Federation consensus model public via trusted nodes (more coming soon), private (select your own)</span>
</p>
<p class="difference">
<svg class="difference__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
</svg>
<span class="difference__text">We imbued blockchain characteristics on big data, rather than trying to big-datafy blockchain.</span>
</p>
<p class="difference">
<svg class="difference__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
</svg>
<span class="difference__text">Open source, public version for the world and a private one for specific industry use cases.</span>
</p>
<p>
For more insight, read our whitepaper.
</p>
</div>
</section>
<section class="section section-timeline">
<div class="row">
<header class="section-header">
<h1 class="section-title">Timeline.</h1>
</header>
<p>
Private beta is shipping now. Contact us more information. Public Bigchain will be released soon
</p>
</div>
</section>