mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-25 03:03:16 +01:00
add comparison table, closes #33
This commit is contained in:
parent
5b2d3274f9
commit
9121b9820d
6
_src/_assets/images/icon-check.svg
Normal file
6
_src/_assets/images/icon-check.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<g>
|
||||
<polyline class="st0" points="23.5,0.5 7,23.5 0.5,17 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 207 B |
@ -16,6 +16,7 @@
|
||||
@import 'bigchain/_fonts';
|
||||
@import 'bigchain/_typography';
|
||||
@import 'bigchain/_animations';
|
||||
@import 'bigchain/_tables';
|
||||
@import 'bigchain/_buttons';
|
||||
@import 'bigchain/_forms';
|
||||
@import 'bigchain/_logo';
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
// size modifiers
|
||||
//
|
||||
.logo--sm {
|
||||
width: 150px;
|
||||
width: 75px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
|
||||
82
_src/_assets/styles/bigchain/_tables.scss
Normal file
82
_src/_assets/styles/bigchain/_tables.scss
Normal file
@ -0,0 +1,82 @@
|
||||
|
||||
//
|
||||
// Base class
|
||||
//
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding;
|
||||
vertical-align: top;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead th {
|
||||
color: $brand-main-blue-light;
|
||||
font-weight: $font-weight-base;
|
||||
vertical-align: bottom;
|
||||
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Condensed table w/ half padding
|
||||
//
|
||||
.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding: $table-sm-cell-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Bordered version
|
||||
//
|
||||
.table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: (2 * $table-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Zebra-striping
|
||||
//
|
||||
.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive tables
|
||||
//
|
||||
// Wrap your tables in `.table-responsive`
|
||||
.table-responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -123,6 +123,18 @@ $pre-color: $code-color !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
|
||||
$table-bg: $gray-darker !default;
|
||||
$table-bg-accent: $gray-darker !default;
|
||||
|
||||
$table-border-width: 1px !default;
|
||||
$table-border-color: $gray !default;
|
||||
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
@ -1,4 +1,13 @@
|
||||
|
||||
.table--comparison {
|
||||
.icon-check {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-ecosystem {
|
||||
figcaption { margin-top: $spacer; }
|
||||
}
|
||||
|
||||
62
_src/_includes/table-comparison.html
Normal file
62
_src/_includes/table-comparison.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="table-responsive">
|
||||
<table class="table table--comparison">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Traditional Blockchains</th>
|
||||
<th>Big Data</th>
|
||||
<th><svg class="logo logo--sm logo--white--green"><use xlink:href="/assets/img/sprite.svg#logo"></use></svg></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Immutability</td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>No Central Authority</td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Assets Over Network</td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Throughput</td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Low Latency</td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>High Capacity</td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rich Permissioning</td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Query Capabilities</td>
|
||||
<td></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
<td><svg class="icon icon-check"><use xlink:href="/assets/img/sprite.svg#icon-check"></use></svg></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -13,9 +13,8 @@ title: How it works
|
||||
|
||||
<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 class="grid__col">
|
||||
<img class="img--responsive" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
|
||||
<figcaption>BigchainDB compared to the Bitcoin blockchain and traditional distributed DBs</figcaption>
|
||||
<figure>
|
||||
{% include table-comparison.html %}
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user