From 3585d3e4dcc3232fd6a34f26440fe19c60f17136 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 9 Feb 2016 13:04:07 +0100
Subject: [PATCH] restructure all the features things, add new feature icons

---
 _src/_assets/images/icon-diamond.svg   | 10 +++
 _src/_assets/images/icon-lock.svg      |  9 +++
 _src/_assets/images/icon-nodes.svg     | 11 ++++
 _src/_assets/images/icon-scaling.svg   |  9 +++
 _src/_assets/images/icon-search.svg    |  7 +++
 _src/_assets/images/icon-settings.svg  | 21 +++++++
 _src/_assets/styles/page-features.scss |  8 ++-
 _src/_assets/styles/page-front.scss    |  2 +-
 _src/features.html                     | 87 +++++++++++++-------------
 _src/index.html                        |  2 +-
 10 files changed, 117 insertions(+), 49 deletions(-)
 create mode 100644 _src/_assets/images/icon-diamond.svg
 create mode 100644 _src/_assets/images/icon-lock.svg
 create mode 100644 _src/_assets/images/icon-nodes.svg
 create mode 100644 _src/_assets/images/icon-scaling.svg
 create mode 100644 _src/_assets/images/icon-search.svg
 create mode 100644 _src/_assets/images/icon-settings.svg

diff --git a/_src/_assets/images/icon-diamond.svg b/_src/_assets/images/icon-diamond.svg
new file mode 100644
index 0000000..493cd32
--- /dev/null
+++ b/_src/_assets/images/icon-diamond.svg
@@ -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>
diff --git a/_src/_assets/images/icon-lock.svg b/_src/_assets/images/icon-lock.svg
new file mode 100644
index 0000000..f150a6c
--- /dev/null
+++ b/_src/_assets/images/icon-lock.svg
@@ -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>
diff --git a/_src/_assets/images/icon-nodes.svg b/_src/_assets/images/icon-nodes.svg
new file mode 100644
index 0000000..1a82e5d
--- /dev/null
+++ b/_src/_assets/images/icon-nodes.svg
@@ -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>
diff --git a/_src/_assets/images/icon-scaling.svg b/_src/_assets/images/icon-scaling.svg
new file mode 100644
index 0000000..7dcfa37
--- /dev/null
+++ b/_src/_assets/images/icon-scaling.svg
@@ -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>
diff --git a/_src/_assets/images/icon-search.svg b/_src/_assets/images/icon-search.svg
new file mode 100644
index 0000000..1cf6a6d
--- /dev/null
+++ b/_src/_assets/images/icon-search.svg
@@ -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>
diff --git a/_src/_assets/images/icon-settings.svg b/_src/_assets/images/icon-settings.svg
new file mode 100644
index 0000000..db0c9e7
--- /dev/null
+++ b/_src/_assets/images/icon-settings.svg
@@ -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>
diff --git a/_src/_assets/styles/page-features.scss b/_src/_assets/styles/page-features.scss
index ae5727e..c880079 100644
--- a/_src/_assets/styles/page-features.scss
+++ b/_src/_assets/styles/page-features.scss
@@ -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 {
diff --git a/_src/_assets/styles/page-front.scss b/_src/_assets/styles/page-front.scss
index 6b1a65c..8938b64 100644
--- a/_src/_assets/styles/page-front.scss
+++ b/_src/_assets/styles/page-front.scss
@@ -4,7 +4,7 @@
 // bigchain.io
 //
 
-.section-features {
+.section-features__main {
     .icon {
         display: block;
         margin: auto;
diff --git a/_src/features.html b/_src/features.html
index de8717f..a5548bf 100644
--- a/_src/features.html
+++ b/_src/features.html
@@ -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">
diff --git a/_src/index.html b/_src/index.html
index 387fa8b..fd4576b 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -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>