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

restructure all the features things, add new feature icons

This commit is contained in:
Matthias Kretschmann 2016-02-09 13:04:07 +01:00
parent bb376d48a6
commit 3585d3e4dc
10 changed files with 117 additions and 49 deletions

View File

@ -0,0 +1,10 @@
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<g>
<line x1="59" y1="19" x2="1" y2="19"/>
<polygon points="30,59 1,19 14,1 46,1 59,19 "/>
<polygon stroke="currentColor" points="19,19 30,1 41,19 30,59 "/>
<line x1="14" y1="1" x2="19" y2="19"/>
<line x1="46" y1="1" x2="41" y2="19"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 402 B

View File

@ -0,0 +1,9 @@
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 60">
<g>
<circle stroke="currentColor" cx="21" cy="38" r="1"/>
<line stroke="currentColor" x1="21" y1="39" x2="21" y2="46.6"/>
<rect x="1" y="25" width="40" height="34"/>
<path stroke="currentColor" d="M35,25v-9c0-7.7-6-15-14-15S7,8.3,7,16v9"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 376 B

View File

@ -0,0 +1,11 @@
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<g>
<circle stroke="currentColor" cx="11" cy="49" r="10"/>
<circle stroke="currentColor" cx="49" cy="49" r="10"/>
<circle stroke="currentColor" cx="30" cy="11" r="10"/>
<line x1="25.5" y1="19.9" x2="15.5" y2="40.1"/>
<line x1="34.5" y1="19.9" x2="44.5" y2="40.1"/>
<line x1="21" y1="49" x2="39" y2="49"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 475 B

View File

@ -0,0 +1,9 @@
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 38 56">
<g>
<line stroke="currentColor" x1="37" y1="1" x2="14" y2="24"/>
<line x1="25" y1="31" x2="1" y2="55"/>
<polyline stroke="currentColor" points="37,17.2 37,1 21.2,1 "/>
<polyline points="16.1,55 1,55 1,39.9 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 372 B

View File

@ -0,0 +1,7 @@
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<g>
<line stroke="currentColor" x1="35.1" y1="35.1" x2="59" y2="59"/>
<circle cx="21" cy="21" r="20"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 253 B

View File

@ -0,0 +1,21 @@
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<g>
<rect x="1" y="1" class="st0" width="58" height="58"/>
<line x1="31" y1="36.3" x2="31" y2="19"/>
<line x1="43" y1="36.3" x2="43" y2="31"/>
<line x1="17" y1="23" x2="17" y2="8.6"/>
<line x1="17" y1="36.3" x2="17" y2="27"/>
<line x1="43" y1="27" x2="43" y2="8.6"/>
<line x1="31" y1="15" x2="31" y2="8.6"/>
<rect stroke="currentColor" x="39" y="27" width="8" height="4"/>
<rect stroke="currentColor" x="27" y="15" width="8" height="4"/>
<rect stroke="currentColor" x="13" y="23" width="8" height="4"/>
<circle stroke="currentColor" cx="43" cy="47" r="4"/>
<circle stroke="currentColor" cx="31" cy="47" r="4"/>
<circle stroke="currentColor" cx="17" cy="47" r="4"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 876 B

View File

@ -20,14 +20,16 @@
}
.feature__icon {
flex: 0 0 20%;
flex: 0 0 15%;
margin-right: 5%;
margin-top: 0;
margin-top: 2px;
margin-bottom: 0;
width: 3rem;
height: 3rem;
}
.feature__detail {
flex: 0 0 75%;
flex: 0 0 80%;
}
.feature__title {

View File

@ -4,7 +4,7 @@
// bigchain.io
//
.section-features {
.section-features__main {
.icon {
display: block;
margin: auto;

View File

@ -4,43 +4,6 @@ layout: page
title: How It Works
---
<section class="section section-features-main">
<div class="row">
<header class="section-header">
<h1 class="section-title">Blockchains Meet Big Data.</h1>
<p class="section-description">BigchainDB combines the key benefits of distributed DBs and traditional blockchains, with an emphasis on scale.</p>
</header>
<p>We built BigchainDB on top of an enterprise-grade distributed DB, from which BigchainDB inherits high throughput, high capacity, a full-featured NoSQL query language, efficient querying, and permissioning.</p>
<figure>
{% include table-comparison.html %}
</figure>
</div>
</section>
<section class="section section-ecosystem background--darker">
<div class="row">
<header class="section-header">
<h1 class="section-title">Made for the Decentralization Ecosystem.</h1>
<p class="section-description">BigchainDB is complementary to decentralized storage, processing and communication building blocks. It can also be used side by side with higher-level decentralized computing platforms and applications, identity protocols, financial asset protocols, IP assets protocols and glue protocols. BigchainDB provides a bridge to an eventually fully decentralized system.</p>
</header>
</div>
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters text-center">
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB fills a missing gap in the emerging decentralized stack as a blockchain database that complements existing platforms, processing and file systems.</figcaption>
</figure>
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB can be seamlessly integrated into the traditional stack as a blockchain database for decentralized timestamping, certificates, smart contracts and transactions.
</figure>
</div>
</div>
</section>
<section class="section section-features">
<div class="row">
<header class="section-header">
@ -50,7 +13,7 @@ title: How It Works
</div>
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid grid--full grid-small--half grid--gutters grid--top">
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
@ -76,7 +39,7 @@ title: How It Works
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
<use xlink:href="/assets/img/sprite.svg#icon-scaling"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Linear Scaling</h1>
@ -87,7 +50,7 @@ title: How It Works
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
<use xlink:href="/assets/img/sprite.svg#icon-diamond"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Native Support of Multiassets</h1>
@ -98,7 +61,7 @@ title: How It Works
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
<use xlink:href="/assets/img/sprite.svg#icon-search"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Query</h1>
@ -109,7 +72,7 @@ title: How It Works
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
<use xlink:href="/assets/img/sprite.svg#icon-settings"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Customizable</h1>
@ -131,7 +94,7 @@ title: How It Works
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
<use xlink:href="/assets/img/sprite.svg#icon-nodes"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Federation Consensus Model</h1>
@ -153,7 +116,7 @@ title: How It Works
<div class="grid__col">
<div class="feature">
<svg class="feature__icon icon">
<use xlink:href="/assets/img/sprite.svg#icon-group"></use>
<use xlink:href="/assets/img/sprite.svg#icon-lock"></use>
</svg>
<div class="feature__detail">
<h1 class="feature__title">Public or Private</h1>
@ -171,6 +134,42 @@ title: How It Works
</section>
<section class="section section-ecosystem background--darker">
<div class="row">
<header class="section-header">
<h1 class="section-title">Made for the Decentralization Ecosystem.</h1>
<p class="section-description">BigchainDB is complementary to decentralized storage, processing and communication building blocks. It can also be used side by side with higher-level decentralized computing platforms and applications, identity protocols, financial asset protocols, IP assets protocols and glue protocols. BigchainDB provides a bridge to an eventually fully decentralized system.</p>
</header>
</div>
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters text-center">
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB fills a missing gap in the emerging decentralized stack as a blockchain database that complements existing platforms, processing and file systems.</figcaption>
</figure>
<figure class="grid__col">
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
<figcaption>BigchainDB can be seamlessly integrated into the traditional stack as a blockchain database for decentralized timestamping, certificates, smart contracts and transactions.
</figure>
</div>
</div>
</section>
<section class="section section-comparison">
<div class="row">
<header class="section-header">
<h1 class="section-title">Blockchains Meet Big Data.</h1>
<p class="section-description">BigchainDB combines the key benefits of distributed DBs and traditional blockchains, with an emphasis on scale.</p>
</header>
<p>We built BigchainDB on top of an enterprise-grade distributed DB, from which BigchainDB inherits high throughput, high capacity, a full-featured NoSQL query language, efficient querying, and permissioning.</p>
<figure>
{% include table-comparison.html %}
</figure>
</div>
</section>
<section class="section section-usecases background--darker">
<div class="row">
<header class="section-header">

View File

@ -38,7 +38,7 @@ js: page-front.min.js
</div>
<div class="grid__col">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
<use xlink:href="/assets/img/sprite.svg#icon-scaling"></use>
</svg>
<h3>Linear Scaling</h3>
</div>