From 9cce6b28f76308fcbc25ec3e4476be62c962b795 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 20 Mar 2018 14:44:37 +0100 Subject: [PATCH] move usecases index to end of features page --- _aws/routing-rules.xml | 8 ++ _src/_assets/styles/_page-features.scss | 133 +++++++++++++++++++++-- _src/_assets/styles/_page-usecases.scss | 139 ------------------------ _src/features.html | 65 +++++++++++ _src/usecases.html | 99 ----------------- 5 files changed, 196 insertions(+), 248 deletions(-) delete mode 100644 _src/usecases.html diff --git a/_aws/routing-rules.xml b/_aws/routing-rules.xml index f9b21bc..8638bd6 100644 --- a/_aws/routing-rules.xml +++ b/_aws/routing-rules.xml @@ -15,4 +15,12 @@ whitepaper/ + + + usecases/ + + + features/#usecases + + diff --git a/_src/_assets/styles/_page-features.scss b/_src/_assets/styles/_page-features.scss index ae724e5..b5df279 100644 --- a/_src/_assets/styles/_page-features.scss +++ b/_src/_assets/styles/_page-features.scss @@ -40,7 +40,6 @@ font-family: $headings-font-family; color: $gray-light; background: $gray-dark; - display: inline-block; margin-left: ($spacer / 2); padding: ($spacer / 4) ($spacer / 2); @@ -56,15 +55,6 @@ figcaption { margin: $spacer 0; } } -.section-usecases { - .grid { - // manually center last column - .grid__col:last-child { - margin: auto; - } - } -} - .table--comparison { td { text-align: center; @@ -92,3 +82,126 @@ } } } + +.section-usecases { + > .row { + > .section-header { + margin-bottom: 0; + + > .section-description { // stylelint-disable-line selector-max-compound-selectors + margin-bottom: $spacer * 3; + padding-bottom: $spacer * 3; + border-bottom: 2px solid lighten($gray-dark, 10%); + } + } + } +} + +// +// Industry section +// +.section--industry { + &:first-child { + margin-top: $spacer * 4; + } + + .section-header { + margin-bottom: $spacer * 2; + + .icon { + width: 48px; + height: 48px; + margin-bottom: -($spacer / 3); + margin-right: $spacer / 2; + stroke-width: 2; + } + } + + .section-title, + .section-description { + text-align: left; + } + + .section-title { + @extend .h2; + margin-top: 0; + margin-bottom: $spacer * 2; + + &:after { + display: none; + } + } +} + +.featuredusecase { + border-top: 2px solid lighten($gray-dark, 10%); + padding-top: $spacer * 2; + margin-top: $spacer * 2; + + @media ($screen-sm) { + display: flex; + justify-content: space-between; + } +} + +.featuredusecase__logo { + box-shadow: none; + transition: .2s ease-out; + display: block; + + &:hover, + &:focus { + background: none; + + svg { + fill: $brand-main-green; + } + } + + @media ($screen-sm) { + flex: 0 0 20%; + order: 2; + margin-left: 5%; + } + + img, + svg { + width: 80px; + max-width: 80px; + max-height: 60px; + height: auto; + margin-bottom: $spacer / 2; + opacity: .6; + align-self: flex-start; // work around stretched images flexbox bug + fill: $brand-main-blue-light; + transition: .2s ease-out; + + @media ($screen-sm) { + width: 120px; + max-width: 120px; + max-height: 90px; + height: auto; + margin-bottom: 0; + } + } +} + +.featuredusecase__content { + flex: 0 0 75%; +} + +.featuredusecase__title { + @extend .h3; + margin-top: 0; + margin-bottom: $spacer; + + a { + color: $brand-main-green; + box-shadow: none; + + &:hover, + &:focus { + color: #fff; + } + } +} diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss index 5bfac00..07af995 100644 --- a/_src/_assets/styles/_page-usecases.scss +++ b/_src/_assets/styles/_page-usecases.scss @@ -1,142 +1,3 @@ -.page-usecases { - .header { - background-position: bottom center; - } - - .section-header { - .icon { - stroke-width: 2; - } - } -} - -.section--intro { - .section-header { - margin-bottom: 0; - } - - .section-description { - margin-bottom: $spacer * 3; - padding-bottom: $spacer * 3; - border-bottom: 2px solid lighten($gray-dark, 10%); - } - - .grid { - margin-bottom: 0; - } -} - -// -// Industry section -// -.section--industry { - .section-header { - margin-bottom: $spacer * 2; - - .icon { - width: 48px; - height: 48px; - margin-bottom: $spacer / 2; - } - } - - .section-title, - .section-description { - text-align: left; - } - - .section-title { - @extend .h2; - margin-top: 0; - margin-bottom: $spacer * 2; - - &:after { - margin-left: 0; - } - } - - &:nth-child(even) { - @extend .background--darker; - - .featuredusecase { - border-top-color: lighten($gray-dark, 5%); - } - } -} - -.featuredusecase { - border-top: 2px solid lighten($gray-dark, 10%); - padding-top: $spacer * 2; - margin-top: $spacer * 2; - - @media ($screen-sm) { - display: flex; - justify-content: space-between; - } -} - -.featuredusecase__logo { - box-shadow: none; - transition: .2s ease-out; - display: block; - - &:hover, - &:focus { - background: none; - - svg { - fill: $brand-main-green; - } - } - - @media ($screen-sm) { - flex: 0 0 20%; - order: 2; - margin-left: 5%; - } - - img, - svg { - width: 80px; - max-width: 80px; - max-height: 60px; - height: auto; - margin-bottom: $spacer / 2; - opacity: .6; - align-self: flex-start; // work around stretched images flexbox bug - fill: $brand-main-blue-light; - transition: .2s ease-out; - - @media ($screen-sm) { - width: 120px; - max-width: 120px; - max-height: 90px; - height: auto; - margin-bottom: 0; - } - } -} - -.featuredusecase__content { - flex: 0 0 75%; -} - -.featuredusecase__title { - @extend .h3; - margin-top: 0; - margin-bottom: $spacer; - - a { - color: $brand-main-green; - box-shadow: none; - - &:hover, - &:focus { - color: #fff; - } - } -} - // // Single use case page // diff --git a/_src/features.html b/_src/features.html index 1b350f7..31b9d64 100644 --- a/_src/features.html +++ b/_src/features.html @@ -106,4 +106,69 @@ js: page-features.min.js +
+
+
+

Use Cases

+

BigchainDB is for developers and organizations looking for a queryable database with blockchain characteristics such as decentralization, immutability and the ability to treat anything stored in the database as an asset. Whether it’s atoms, bits or bytes of value, any real-world blockchain application needs performance. A perfect fit for BigchainDB.

+
+ +
+
+ We’re still in the early days of the decentralization movement and while all of the industries below are being disrupted in one way or another, there’s an abundance of opportunity within each. +
+
+

+ Building something with BigchainDB? +
+ We want to hear from you. +

+
+
+ + {% for industry in site.data.industries %} +
+ +
+

+ + + + {{ industry.name }} +

+

{{ industry.description }}

+
+ + {% if industry.usecase %} + {% for usecase in site.usecases %} + {% if industry.usecase == usecase.slug %} + + {% endif %} + {% endfor %} + {% endif %} +
+ {% endfor%} + +
+ + +
+ {% include sections/section-newsletter.html %} diff --git a/_src/usecases.html b/_src/usecases.html deleted file mode 100644 index ffba887..0000000 --- a/_src/usecases.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -layout: page - -title: Use Cases -tagline: Where blockchains and databases meet - -image: photo4.jpg -header: photo4.jpg - -intro: - description: "BigchainDB is for developers and organizations looking for a queryable database with blockchain characteristics such as decentralization, immutability and the ability to treat anything stored in the database as an asset. Whether it’s atoms, bits or bytes of value, any real-world blockchain application needs performance. A perfect fit for BigchainDB." - addition: "We’re still in the early days of the decentralization movement and while all of the industries below are being disrupted in one way or another, there’s an abundance of opportunity within each." - contact: - text: Building something with BigchainDB? - action: We want to hear from you. - link: "/contact/" - -newsletter: - title: Be the first to hear about our customer stories. - -js: page-usecases.min.js ---- - -
-
-
-

{{ page.intro.description }}

- -
-
- {{ page.intro.addition }} -
-
-

{{ page.intro.contact.text }}
{{ page.intro.contact.action }}

-
-
-
-
-
- - - -{% for industry in site.data.industries %} - -
- -
- - - -

{{ industry.name }}

-

{{ industry.description }}

-
- - {% if industry.usecase %} -
- {% for usecase in site.usecases %} - {% if industry.usecase == usecase.slug %} - - {% endif %} - {% endfor %} -
- {% endif %} -
- -{% endfor%} - -{% include sections/section-newsletter.html %}