mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-21 17:26:55 +01:00
lots of grid tweaks
* introduce small gutters modifier
This commit is contained in:
parent
121002b8da
commit
661a905cf4
GPG Key ID:
606EEEF3C479A91F
@ -7,7 +7,7 @@
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
margin-bottom: $spacer * 2;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
&:first-of-type { padding-top: 0; }
|
||||
}
|
||||
@ -54,6 +54,7 @@
|
||||
margin-left: ($spacer / 2);
|
||||
padding: ($spacer / 6) ($spacer / 2);
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feature__title__new {
|
||||
|
||||
@ -272,6 +272,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.choice__title--community {
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.architecture {
|
||||
text-align: center;
|
||||
|
||||
|
||||
@ -13,11 +13,10 @@
|
||||
|
||||
// color swatches
|
||||
.color {
|
||||
padding: ($spacer / 2);
|
||||
margin-bottom: 5px;
|
||||
padding: $spacer $spacer / 2;
|
||||
margin-bottom: 0;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid lighten($body-bg, 10%);
|
||||
min-height: 70px;
|
||||
text-align: center;
|
||||
|
||||
&,
|
||||
@ -28,7 +27,6 @@
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 7rem;
|
||||
min-height: 8rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
.article__title,
|
||||
h1.article__title {
|
||||
font-size: $font-size-h5;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-normal;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
|
||||
@ -104,26 +104,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-gutters-small() {
|
||||
margin: -($gutter-space / 3) 0 $gutter-space / 3 (-($gutter-space / 3));
|
||||
|
||||
> .grid__col {
|
||||
padding: $gutter-space / 3 0 0 $gutter-space / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.grid--gutters {
|
||||
@include grid-gutters();
|
||||
}
|
||||
|
||||
.grid--gutters--small {
|
||||
@include grid-gutters-small();
|
||||
}
|
||||
|
||||
@media ($screen-sm) {
|
||||
.grid-small--gutters {
|
||||
@include grid-gutters();
|
||||
}
|
||||
|
||||
.grid-small--gutters--small {
|
||||
@include grid-gutters-small();
|
||||
}
|
||||
}
|
||||
|
||||
@media ($screen-md) {
|
||||
.grid-medium--gutters {
|
||||
@include grid-gutters();
|
||||
}
|
||||
|
||||
.grid-medium--gutters--small {
|
||||
@include grid-gutters-small();
|
||||
}
|
||||
}
|
||||
|
||||
@media ($screen-lg) {
|
||||
.grid-large--gutters {
|
||||
@include grid-gutters();
|
||||
}
|
||||
|
||||
.grid-large--gutters--small {
|
||||
@include grid-gutters-small();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ $font-size-root: 18px !default;
|
||||
$font-size-root-lg: 20px !default;
|
||||
|
||||
$font-size-base: 1rem !default;
|
||||
$font-size-lg: 1.3rem !default;
|
||||
$font-size-lg: 1.2rem !default;
|
||||
$font-size-sm: .85rem !default;
|
||||
$font-size-xs: .65rem !default;
|
||||
|
||||
|
||||
@ -11,8 +11,6 @@ primary:
|
||||
hex: 445261
|
||||
- name: brand-main-blue-dark
|
||||
hex: 101A25
|
||||
|
||||
secondary:
|
||||
- name: brand-main-violet
|
||||
hex: B581CF
|
||||
- name: brand-main-blue-light
|
||||
@ -22,6 +20,7 @@ secondary:
|
||||
- name: brand-main-gray-lighter
|
||||
hex: E8EBEF
|
||||
|
||||
|
||||
#
|
||||
# Errors
|
||||
#
|
||||
|
||||
@ -54,7 +54,7 @@ docs:
|
||||
title: "Guides & Documentation "
|
||||
description: "Dive into our documentation with guides, examples, terminology, references and more."
|
||||
button_documentation: "See All Documentation"
|
||||
button_guides: "See All Guides"
|
||||
button_guides: "See the Guide"
|
||||
categories:
|
||||
|
||||
- title: "Code Examples"
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
<p class="section-description">Updates, stories and ideas from the people behind BigchainDB.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid--full grid-small--half grid-medium--third grid--gutters">
|
||||
<div class="grid grid--full grid-small--half grid-medium--third grid--gutters--small">
|
||||
{% for article in site.articles | limit: 6 %}
|
||||
<div class="grid__col">
|
||||
<a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}" style="background-image: url('{{ article.image }}')">
|
||||
<a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}" style="background-image: url('{{ article.image }}');">
|
||||
|
||||
<h1 class="article__title">
|
||||
{{ article.title }}
|
||||
|
||||
@ -205,7 +205,7 @@ conn.postTransactionSync(txSigned)
|
||||
|
||||
<h3 class="choice__title">{{ content.drivers.title_official }}</h3>
|
||||
|
||||
<div class="grid grid--full grid-small--half grid--gutters">
|
||||
<div class="grid grid--full grid-medium--half grid--gutters--small">
|
||||
|
||||
{% for driver in site.data.drivers.official %}
|
||||
|
||||
@ -232,7 +232,7 @@ conn.postTransactionSync(txSigned)
|
||||
<div class="grid__col">
|
||||
|
||||
<h3 class="choice__title">{{ content.drivers.title_tools }}</h3>
|
||||
<div class="grid grid--full grid-small--half grid--gutters">
|
||||
<div class="grid grid--full grid-medium--half grid--gutters--small">
|
||||
|
||||
{% for driver in site.data.drivers.tools %}
|
||||
<div class="grid__col">
|
||||
@ -254,8 +254,8 @@ conn.postTransactionSync(txSigned)
|
||||
</div>
|
||||
|
||||
<div class="row row--wide">
|
||||
<h3 class="choice__title">{{ content.drivers.title_community }}</h3>
|
||||
<div class="grid grid--half grid-medium--fit grid--gutters">
|
||||
<h3 class="choice__title choice__title--community">{{ content.drivers.title_community }}</h3>
|
||||
<div class="grid grid--half grid-medium--fit grid--gutters--small">
|
||||
|
||||
{% for driver in site.data.drivers.community %}
|
||||
<div class="grid__col">
|
||||
@ -328,7 +328,7 @@ conn.postTransactionSync(txSigned)
|
||||
</div>
|
||||
|
||||
<div class="row community__actions">
|
||||
<div class="grid grid--full grid-small--fit grid--gutters">
|
||||
<div class="grid grid--full grid-small--fit grid--gutters--small">
|
||||
<div class="grid__col">
|
||||
<svg class="icon icon--social icon--gitter">
|
||||
<use xlink:href="/assets/img/sprite.svg#gitter"></use>
|
||||
@ -353,8 +353,8 @@ conn.postTransactionSync(txSigned)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="grid grid--full grid-small--fit grid--gutters">
|
||||
<div class="row row--wide">
|
||||
<div class="grid grid--full grid-small--fit grid--gutters--small">
|
||||
<div class="grid__col">
|
||||
<h5>{{ content.community.follow.title }}</h5>
|
||||
<p>{{ content.community.follow.description }}</p>
|
||||
|
||||
@ -11,22 +11,9 @@ js: page-styleguide.min.js
|
||||
|
||||
### Primary
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-medium--fit">
|
||||
<div class="grid grid--gutters--small grid--full grid-small--half grid-medium--third">
|
||||
{% for color in site.data.colors.primary %}
|
||||
<div class="grid__col">
|
||||
<div class="color {{ color.name }}">
|
||||
<span class="color-meta color-name">${{ color.name }}</span>
|
||||
<span class="color-meta color-hex">#{{ color.hex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
### Secondary
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-medium--fit">
|
||||
{% for color in site.data.colors.secondary %}
|
||||
<div class="grid__col">
|
||||
<div class="grid__col grid__col--2">
|
||||
<div class="color {{ color.name }}">
|
||||
<span class="color-meta color-name">${{ color.name }}</span>
|
||||
<span class="color-meta color-hex">#{{ color.hex }}</span>
|
||||
@ -37,9 +24,9 @@ js: page-styleguide.min.js
|
||||
|
||||
### Errors
|
||||
|
||||
<div class="grid grid--gutters grid--full grid-medium--fit">
|
||||
<div class="grid grid--gutters--small grid--full grid-small--half grid-medium--third">
|
||||
{% for color in site.data.colors.errors %}
|
||||
<div class="grid__col">
|
||||
<div class="grid__col grid__col--2">
|
||||
<div class="color {{ color.name }}">
|
||||
<span class="color-meta color-name">${{ color.name }}</span>
|
||||
<span class="color-meta color-hex">#{{ color.hex }}</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user