1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 18:36:11 +01:00

prototype intro, style media kit/brand assets sidebar

This commit is contained in:
Matthias Kretschmann 2017-08-23 01:17:09 +02:00
parent 2960d2f061
commit 220c6cfe0d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 41 additions and 25 deletions

View File

@ -3,19 +3,31 @@
}
.section--about {
padding-top: $spacer * 4;
.section-header {
margin-bottom: $spacer * 2;
}
h2:first-of-type {
margin-top: 0;
}
.story {
@media ($screen-md) {
padding-right: $spacer * 3;
}
}
}
.widget {
margin-top: $spacer * 4;
@media ($screen-sm) {
padding-left: $spacer * 2;
margin-top: $spacer * 2;
padding: $spacer * 1.5;
background: rgba($brand-main-blue-dark, .15);
@media ($screen-md) {
&:first-child {
margin-top: $spacer * 2.5;
margin-top: $spacer * 5;
}
}
}
@ -27,22 +39,22 @@
}
.brand {
margin-top: $spacer;
margin-top: $spacer * $line-height;
&:last-child {
margin-top: $spacer * 2;
&:first-child {
margin-top: 0;
}
}
.brand__logo {
padding: $spacer * 2;
border: 1px solid $gray-dark;
border: 1px solid rgba($gray-light, .25);
display: flex;
align-items: center;
justify-content: center;
.brand--dark & {
background: rgba($gray-light, .75);
background: $text-color;
}
.brand--square & {
@ -52,10 +64,5 @@
.brand__logo__download {
text-align: center;
a {
font-size: $font-size-sm;
margin-left: $spacer / 2;
margin-right: $spacer / 2;
}
margin-bottom: 0;
}

View File

@ -16,10 +16,15 @@ layout: base
<section role="main" class="content content--page">
<section class="section section--about">
<div class="row">
<header class="section-header">
<p class="section-description">{{ page.intro }}</p>
</header>
</div>
<div class="row row--wide">
<div class="grid grid--full grid-medium--columns grid--gutters">
<div class="grid__col grid__col--2-3">
<div class="grid__col grid__col--2-3 story">
{{ content }}
</div>
@ -28,7 +33,7 @@ layout: base
<aside class="widget widget--mediakit">
<h2 class="widget__title">{{ page.mediakit.title }}</h2>
<p>{{ page.mediakit.description }}</p>
<a href="{{ page.mediakit.link }}">{{ page.mediakit.download }}</a>
<a class="btn btn-primary btn-sm" href="{{ page.mediakit.link }}">{{ page.mediakit.download }}</a>
</aside>
<aside class="widget widget--logo">
@ -43,8 +48,8 @@ layout: base
</svg>
</figure>
<p class="brand__logo__download">
<a href="/mediakit/logo/logo-bigchaindb.svg" download>SVG</a>
<a href="/mediakit/logo/logo-bigchaindb.png" download>PNG</a>
<a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb.svg" download>SVG</a>
<a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb.png" download>PNG</a>
</p>
</div>
@ -56,8 +61,8 @@ layout: base
</svg>
</figure>
<p class="brand__logo__download">
<a href="/mediakit/logo/logo-bigchaindb-white.svg" download>SVG</a>
<a href="/mediakit/logo/logo-bigchaindb-white.png" download>PNG</a>
<a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-white.svg" download>SVG</a>
<a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-white.png" download>PNG</a>
</p>
</div>
@ -69,8 +74,8 @@ layout: base
</svg>
</figure>
<p class="brand__logo__download">
<a href="/mediakit/logo/logo-bigchaindb-square.svg" download>SVG</a>
<a href="/mediakit/logo/logo-bigchaindb-square.png" download>PNG</a>
<a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-square.svg" download>SVG</a>
<a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-square.png" download>PNG</a>
</p>
</div>

View File

@ -14,7 +14,11 @@ mediakit:
title: Media Kit
description: Get our full media kit in one handy package.
download: Download media kit (zip)
link: /mediakit.zip
link: /mediakit.zip
intro: >
In your time, yes, but nowadays shut up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells. Oh, but you can. But you may have to metaphorically make a deal with the devil. And by "devil", I mean Robot Devil. And by "metaphorically", I mean get your coat.
---
## Our story