features reordering, new badge

_src/_assets/styles/_page-features.scss

@@ -1,13 +1,13 @@
 .feature {
     display: flex;
-    margin-bottom: $spacer;
+    margin-bottom: $spacer * 2;
 
     &:first-of-type { padding-top: 0; }
 }
 
 .feature__icon {
     flex: 0 0 15%;
-    margin-right: 5%;
+    margin-right: 3%;
     margin-top: 2px;
     margin-bottom: 0;
     width: 3rem;
@@ -15,7 +15,7 @@
 }
 
 .feature__detail {
-    flex: 0 0 80%;
+    flex: 0 0 82%;
 }
 
 .feature__title {
@@ -23,6 +23,8 @@
     color: $brand-main-blue-light;
     margin-top: 0;
     margin-bottom: ($spacer / 3);
+    display: flex;
+    align-items: center;
 }
 
 .feature__text {
@@ -35,16 +37,21 @@
     padding: 1rem 0 0;
 }
 
-.feature__title__comingsoon {
+.feature__title__comingsoon,
-    @extend .small;
+.feature__title__new {
     font-family: $headings-font-family;
+    font-size: $font-size-sm;
     color: $gray-light;
     background: $gray-dark;
     display: inline-block;
     margin-left: ($spacer / 2);
-    padding: ($spacer / 4) ($spacer / 2);
+    padding: ($spacer / 6) ($spacer / 2);
     border-radius: 2px;
-    vertical-align: middle;
+}
+
+.feature__title__new {
+    background: $brand-main-blue-light;
+    color: $brand-main-blue-dark;
 }
 
 .stacks__title {

_src/features.html

@@ -5,38 +5,38 @@ title: Features
 description: "Rather than trying to enhance blockchain technology, BigchainDB starts with a big data distributed database and then adds blockchain characteristics - decentralized control, immutability and the transfer of digital assets."
 
 features:
-     - title: "Byzantine Fault Tolerant (BFT)"
+     - title: "Decentralization"
-       text: "Up to one third of the nodes in the network can be experiencing arbitrary faults and the rest of the network will still come to consensus on the next block."
+       text: "No single point of control. No singe point of failure. Decentralized control via a federation of voting nodes makes for a super-peer P2P network."
-       icon: "icon-network"
+       icon: "icon-nodes"
+     - title: "Query"
+       text: "Write and run any MongoDB query to search the contents of all stored transactions, assets, metadata and blocks. Powered by MongoDB itself."
+       icon: "icon-search"
+     - title: "Immutability"
+       text: ""
+       icon: "icon-castle"
      - title: "Native Support of Multiassets"
        text: "With no native currency on BigchainDB, any asset, token or currency can be issued."
        icon: "icon-diamond"
+     - title: "Byzantine Fault Tolerant (BFT)"
+       text: "Up to one third of the nodes in the network can be experiencing arbitrary faults and the rest of the network will still come to consensus on the next block."
+       icon: "icon-network"
+       new: true
+     - title: "Low Latency"
+       text: "A global network takes about a second to come to consensus on a new block. In other words, transaction finality happens fast."
+       icon: "icon-hourglass"
+       new: true
      - title: "Customizable"
        text: "Design your own private network with custom assets, transactions, permissions and transparency."
        icon: "icon-settings"
      - title: "Rich Permissioning"
        text: "[Set permissions at transaction level](https://docs.bigchaindb.com/en/latest/permissions.html) to ensure a clear separation of duties and enforce selective access."
        icon: "icon-group"
-     - title: "Immutability"
-       text: ""
-       icon: "icon-castle"
-     - title: "Federation Consensus Model"
-       text: "Decentralized control via a federation of voting nodes makes for a super-peer P2P network."
-       icon: "icon-nodes"
      - title: "Open Source"
        text: "[Open sourced](https://github.com/bigchaindb) to the community so that everyone can use it and build their own applications on top of it."
        icon: "icon-tree"
      - title: "Public or Private"
        text: "Roll out your own public or private networks for specific industry use cases."
        icon: "icon-lock"
-     - title: "Low Latency"
-       text: "A global network takes about a second to come to consensus on a new block. In other words, transaction finality happens fast."
-       icon: "icon-hourglass"
-     - title: "Query"
-       text: "Write and run any MongoDB query to search the contents of all stored transactions, assets, metadata and blocks. Powered by MongoDB itself."
-       icon: "icon-search"
-     - title: "Decentralized"
-       text: "No single point of control. No singe point of failure."
 
 quotes: set2
 js: page-features.min.js
@@ -58,7 +58,8 @@ js: page-features.min.js
                         <use xlink:href="/assets/img/sprite.svg#{{ feature.icon }}"></use>
                     </svg>
                     <div class="feature__detail">
-                        <h1 class="feature__title">{{ feature.title }} {% if feature.comingsoon %}<span class="feature__title__comingsoon">Coming soon</span>{% endif %}</h1>
+                        <h1 class="feature__title">{{ feature.title }} {% if feature.comingsoon %}<span class="feature__title__comingsoon">Coming soon</span>{% endif %} {% if feature.new %}
+                        <span class="feature__title__new">New</span>{% endif %}</h1>
                         <div class="feature__text">{{ feature.text | markdownify }}</div>
                     </div>
                 </div>