From 9121b9820daa1d94de623aef053fbd8b2454df58 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 9 Feb 2016 12:15:41 +0100 Subject: [PATCH] add comparison table, closes #33 --- _src/_assets/images/icon-check.svg | 6 ++ _src/_assets/styles/bigchain.scss | 1 + _src/_assets/styles/bigchain/_logo.scss | 2 +- _src/_assets/styles/bigchain/_tables.scss | 82 ++++++++++++++++++++ _src/_assets/styles/bigchain/_variables.scss | 12 +++ _src/_assets/styles/page-features.scss | 9 +++ _src/_includes/table-comparison.html | 62 +++++++++++++++ _src/features.html | 5 +- 8 files changed, 175 insertions(+), 4 deletions(-) create mode 100644 _src/_assets/images/icon-check.svg create mode 100644 _src/_assets/styles/bigchain/_tables.scss create mode 100644 _src/_includes/table-comparison.html diff --git a/_src/_assets/images/icon-check.svg b/_src/_assets/images/icon-check.svg new file mode 100644 index 0000000..bad7d01 --- /dev/null +++ b/_src/_assets/images/icon-check.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 5c7d5e1..1d15cf4 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -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'; diff --git a/_src/_assets/styles/bigchain/_logo.scss b/_src/_assets/styles/bigchain/_logo.scss index d855719..1a75beb 100644 --- a/_src/_assets/styles/bigchain/_logo.scss +++ b/_src/_assets/styles/bigchain/_logo.scss @@ -31,7 +31,7 @@ // size modifiers // .logo--sm { - width: 150px; + width: 75px; height: 15px; } diff --git a/_src/_assets/styles/bigchain/_tables.scss b/_src/_assets/styles/bigchain/_tables.scss new file mode 100644 index 0000000..4b6360a --- /dev/null +++ b/_src/_assets/styles/bigchain/_tables.scss @@ -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; +} diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 5c8d965..de86ea9 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -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 // diff --git a/_src/_assets/styles/page-features.scss b/_src/_assets/styles/page-features.scss index a762c41..ae5727e 100644 --- a/_src/_assets/styles/page-features.scss +++ b/_src/_assets/styles/page-features.scss @@ -1,4 +1,13 @@ +.table--comparison { + .icon-check { + width: 1rem; + height: 1rem; + margin: auto; + display: block; + } +} + .section-ecosystem { figcaption { margin-top: $spacer; } } diff --git a/_src/_includes/table-comparison.html b/_src/_includes/table-comparison.html new file mode 100644 index 0000000..a98c8cf --- /dev/null +++ b/_src/_includes/table-comparison.html @@ -0,0 +1,62 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Traditional BlockchainsBig Data
Immutability
No Central Authority
Assets Over Network
High Throughput
Low Latency
High Capacity
Rich Permissioning
Query Capabilities
+
diff --git a/_src/features.html b/_src/features.html index aec78ab..0ce23f6 100644 --- a/_src/features.html +++ b/_src/features.html @@ -13,9 +13,8 @@ title: How it works

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.

-
- -
BigchainDB compared to the Bitcoin blockchain and traditional distributed DBs
+
+ {% include table-comparison.html %}