mirror of https://github.com/bigchaindb/site.git
move usecases index to end of features page
This commit is contained in:
parent
ca24f6bd47
commit
9cce6b28f7
GPG Key ID:
606EEEF3C479A91F
|
|
@ -15,4 +15,12 @@
|
|||
<ReplaceKeyPrefixWith>whitepaper/</ReplaceKeyPrefixWith>
|
||||
</Redirect>
|
||||
</RoutingRule>
|
||||
<RoutingRule>
|
||||
<Condition>
|
||||
<KeyPrefixEquals>usecases/</KeyPrefixEquals>
|
||||
</Condition>
|
||||
<Redirect>
|
||||
<ReplaceKeyPrefixWith>features/#usecases</ReplaceKeyPrefixWith>
|
||||
</Redirect>
|
||||
</RoutingRule>
|
||||
</RoutingRules>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
//
|
||||
|
|
|
|||
|
|
@ -106,4 +106,69 @@ js: page-features.min.js
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-usecases background--darker" id="usecases">
|
||||
<div class="row">
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">Use Cases</h1>
|
||||
<p class="section-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.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid--full grid-small--half grid--gutters grid--top text-left">
|
||||
<div class="grid__col">
|
||||
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.
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<p>
|
||||
<strong>Building something with BigchainDB?</strong>
|
||||
<br>
|
||||
<a href="/contact/">We want to hear from you.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for industry in site.data.industries %}
|
||||
<section class="section section--industry" id="{{ industry.name | downcase | replace: " ", " " }}">
|
||||
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">
|
||||
<svg class="icon">
|
||||
<use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
|
||||
</svg>
|
||||
{{ industry.name }}
|
||||
</h1>
|
||||
<p class="section-description">{{ industry.description }}</p>
|
||||
</header>
|
||||
|
||||
{% if industry.usecase %}
|
||||
{% for usecase in site.usecases %}
|
||||
{% if industry.usecase == usecase.slug %}
|
||||
<article class="featuredusecase">
|
||||
<a class="featuredusecase__logo" href="{{ usecase.url }}">
|
||||
{% if usecase.bitmaplogo %}
|
||||
<img src="/assets/img/{{ usecase.bitmaplogo }}" /> {% else %}
|
||||
<svg>
|
||||
<use xlink:href="/assets/img/sprite.svg#logo-{{ usecase.slug }}"></use>
|
||||
</svg>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<div class="featuredusecase__content">
|
||||
<h1 class="featuredusecase__title">
|
||||
<a href="{{ usecase.url }}">{{ usecase.title }}</a>
|
||||
</h1>
|
||||
<p>{{ usecase.description }}</p>
|
||||
<a href="{{ usecase.url }}">Learn more</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endfor%}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include sections/section-newsletter.html %}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
|
||||
<section class="section section--intro">
|
||||
<div class="row">
|
||||
<header class="section-header">
|
||||
<p class="section-description">{{ page.intro.description }}</p>
|
||||
|
||||
<div class="grid grid--full grid-small--half grid--gutters grid--top text-left">
|
||||
<div class="grid__col">
|
||||
{{ page.intro.addition }}
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<p><strong>{{ page.intro.contact.text }}</strong> <br><a href="{{ page.intro.contact.link }}">{{ page.intro.contact.action }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="menu--sub">
|
||||
<div class="row row--wide">
|
||||
<div class="menu-overflow">
|
||||
{% for industry in site.data.industries %}
|
||||
<a class="menu__link" href="#{{ industry.name | downcase | replace: " ", "" }}" data-scroll>
|
||||
<svg class="icon">
|
||||
<use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
|
||||
</svg>
|
||||
{{ industry.name }}
|
||||
</a>
|
||||
{% endfor%}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% for industry in site.data.industries %}
|
||||
|
||||
<section class="section section--industry" id="{{ industry.name | downcase | replace: " ", "" }}">
|
||||
|
||||
<header class="section-header row">
|
||||
<svg class="icon">
|
||||
<use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
|
||||
</svg>
|
||||
<h1 class="section-title">{{ industry.name }}</h1>
|
||||
<p class="section-description">{{ industry.description }}</p>
|
||||
</header>
|
||||
|
||||
{% if industry.usecase %}
|
||||
<div class="row">
|
||||
{% for usecase in site.usecases %}
|
||||
{% if industry.usecase == usecase.slug %}
|
||||
<article class="featuredusecase">
|
||||
|
||||
<a class="featuredusecase__logo" href="{{ usecase.url }}">
|
||||
{% if usecase.bitmaplogo %}
|
||||
<img src="/assets/img/{{ usecase.bitmaplogo }}" />
|
||||
{% else %}
|
||||
<svg>
|
||||
<use xlink:href="/assets/img/sprite.svg#logo-{{ usecase.slug }}"></use>
|
||||
</svg>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<div class="featuredusecase__content">
|
||||
<h1 class="featuredusecase__title"><a href="{{ usecase.url }}">{{ usecase.title }}</a></h1>
|
||||
<p>{{ usecase.description }}</p>
|
||||
<a href="{{ usecase.url }}">Learn more</a>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
{% endfor%}
|
||||
|
||||
{% include sections/section-newsletter.html %}
|
||||
Loading…
Reference in New Issue