bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 17:50:07 +01:00
Code Releases Activity

updated branding (#99)

Browse Source 
- new typeface: Europa, loaded from Typekit
- new colors, reduced gray tones
- new hero image
- new gradient overlay
- new buttons
- bigger default font sizes
- ditch caps for action items
This commit is contained in:
Matthias Kretschmann 2017-04-10 17:14:35 +02:00 committed by GitHub
parent afa2eaacf2
commit 2705fa90e3
40 changed files with 337 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -33,6 +33,7 @@ address:
# Track all the things # Track all the things
# -------------------- # --------------------
analyticsID: UA-60614729-8 analyticsID: UA-60614729-8
typekitID: fih1ngo
# Urls # Urls

BIN
_src/_assets/fonts/NotoSans-Regular.ttf
View File

Binary file not shown.

BIN
_src/_assets/fonts/NotoSans-Regular.woff
View File

Binary file not shown.

BIN
_src/_assets/fonts/NotoSans-Regular.woff2
View File

Binary file not shown.

BIN
_src/_assets/images/hero-berlin.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 175 KiB

2
_src/_assets/javascripts/bigchain.js
View File

@ -38,7 +38,7 @@ jQuery(function($) {
// //
// Automatically add header links to all Markdown headings // Automatically add header links to all Markdown headings
// //
$('.content--page--markdown h1, .content--page--markdown h2').each(function(i, el) { $('.content--page--markdown h1:not(#heading-1), .content--page--markdown h2:not(#heading-2)').each(function(i, el) {
var $el, icon, id; var $el, icon, id;
$el = $(el); $el = $(el);
id = $el.attr('id'); id = $el.attr('id');

1
_src/_assets/javascripts/page-front.js
View File

@ -1,5 +1,4 @@
//=include bigchain/smoothscroll.js
//=include bigchain/testimonials.js //=include bigchain/testimonials.js
jQuery(function($) { jQuery(function($) {

2
_src/_assets/styles/_page-404.scss
View File

@ -27,7 +27,7 @@
width: 5rem; width: 5rem;
display: block; display: block;
margin: ($spacer * 2) auto 0 auto; margin: ($spacer * 2) auto 0 auto;
background: $gray-lighter; background: $brand-main-gray-light;
} }
} }

2
_src/_assets/styles/_page-cla.scss
View File

@ -1,5 +1,5 @@
.form-cla { .form-cla {
padding: $spacer ($spacer * 2); padding: $spacer ($spacer * 2);
background: $gray-darker; background: $gray-dark;
} }

8
_src/_assets/styles/_page-features.scss
View File

@ -29,15 +29,17 @@
} }
.feature__title { .feature__title {
font-size: $font-size-h4; @extend .h4;
color: $brand-main-blue-light;
margin-top: 0; margin-top: 0;
margin-bottom: ($spacer / 3); margin-bottom: ($spacer / 3);
} }
.feature__text { .feature__text {
// @extend .text-dimmed; @extend .text-dimmed;
margin-bottom: 0; margin-bottom: 0;
} }
.feture_roadmap { .feture_roadmap {
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
} }
@ -46,7 +48,7 @@
@extend .small; @extend .small;
font-family: $headings-font-family; font-family: $headings-font-family;
color: $gray-light; color: $gray-light;
background: $gray_darker; background: $gray-dark;
display: inline-block; display: inline-block;
margin-left: ($spacer / 2); margin-left: ($spacer / 2);

4
_src/_assets/styles/_page-front.scss
View File

@ -22,8 +22,8 @@
margin-bottom: $spacer * 4; margin-bottom: $spacer * 4;
h3 { h3 {
@extend .h4;
display: block; display: block;
font-size: $font-size-h4;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
@ -35,7 +35,7 @@
.icon { .icon {
display: block; display: block;
margin: auto; margin: auto;
margin-bottom: $spacer * 2; margin-bottom: $spacer;
} }
} }

19
_src/_assets/styles/_page-styleguide.scss
View File

@ -1,6 +1,14 @@
.page-styleguide { .page-styleguide {
.highlight { margin-bottom: ($spacer * 2) } .highlight { margin-bottom: ($spacer * 2) }
.typeface {
font-size: 7vw;
&.bold {
margin-bottom: $spacer * 2;
}
}
} }
// color swatches // color swatches
@ -8,7 +16,7 @@
padding: ($spacer / 2); padding: ($spacer / 2);
margin-bottom: 5px; margin-bottom: 5px;
border-radius: $border-radius; border-radius: $border-radius;
border: 1px solid $gray-darker; border: 1px solid lighten($body-bg, 10%);
min-height: 70px; min-height: 70px;
text-align: center; text-align: center;
@ -46,13 +54,8 @@
.brand-main-gray { background: $brand-main-gray } .brand-main-gray { background: $brand-main-gray }
.brand-main-green { background: $brand-main-green } .brand-main-green { background: $brand-main-green }
.brand-main-violet { background: $brand-main-violet } .brand-main-violet { background: $brand-main-violet }
.brand-main-gray-light { background: $brand-main-gray-light }
.gray-darker { background: $gray-darker } .brand-main-gray-lighter { background: $brand-main-gray-lighter }
.gray-dark { background: $gray-dark }
.gray { background: $gray }
.gray-light { background: $gray-light }
.gray-lighter { background: $gray-lighter }
.gray-lightest { background: $gray-lightest }
.brand-success { background: $brand-success } .brand-success { background: $brand-success }
.brand-info { background: $brand-info } .brand-info { background: $brand-info }

13
_src/_assets/styles/_page-usecases.scss
View File

@ -1,5 +1,7 @@
.page-usecases { .page-usecases {
.header {
background-position: bottom center;
}
} }
.section--intro { .section--intro {
@ -10,7 +12,7 @@
.section-description { .section-description {
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
padding-bottom: $spacer * 2; padding-bottom: $spacer * 2;
border-bottom: 2px solid lighten($gray-dark, 5%); border-bottom: 2px solid lighten($gray-dark, 10%);
} }
} }
@ -48,13 +50,13 @@
@extend .background--darker; @extend .background--darker;
.featuredusecase { .featuredusecase {
border-top-color: $gray-dark; border-top-color: lighten($gray-dark, 5%);
} }
} }
} }
.featuredusecase { .featuredusecase {
border-top: 2px solid lighten($gray-dark, 5%); border-top: 2px solid lighten($gray-dark, 10%);
padding-top: $spacer * 2; padding-top: $spacer * 2;
margin-top: $spacer * 2; margin-top: $spacer * 2;
@ -181,7 +183,7 @@
.content__about { .content__about {
margin-top: $spacer * 4; margin-top: $spacer * 4;
background: $gray-darker; background: $gray-dark;
padding-top: $spacer * 3; padding-top: $spacer * 3;
padding-bottom: $spacer; padding-bottom: $spacer;
} }
@ -200,7 +202,6 @@
text-align: center; text-align: center;
box-shadow: none; box-shadow: none;
font-family: $btn-font-family; font-family: $btn-font-family;
text-transform: uppercase;
color: $brand-main-blue-dark; color: $brand-main-blue-dark;
&:hover, &:hover,

1
_src/_assets/styles/bigchain.scss
View File

@ -13,7 +13,6 @@
@import 'bigchain/_mixins'; @import 'bigchain/_mixins';
// Components // Components
@import 'bigchain/_fonts';
@import 'bigchain/_typography'; @import 'bigchain/_typography';
@import 'bigchain/_animations'; @import 'bigchain/_animations';
@import 'bigchain/_tables'; @import 'bigchain/_tables';

2
_src/_assets/styles/bigchain/_animations.scss
View File

@ -6,7 +6,7 @@ $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified:
// Transitions // Transitions
// //
@mixin transition { @mixin transition {
transition: all .2s ease-in-out; transition: all .2s ease-out;
} }
.transition { .transition {

1
_src/_assets/styles/bigchain/_buttons.scss
View File

@ -9,7 +9,6 @@
display: inline-block; display: inline-block;
font-family: $btn-font-family; font-family: $btn-font-family;
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
text-transform: uppercase;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;

54
_src/_assets/styles/bigchain/_content-page.scss
View File

@ -13,10 +13,12 @@
} }
> h1, h2 { > h1, h2 {
&:not(#heading-1):not(#heading-2) {
border-bottom: 1px solid $brand-main-blue-light; border-bottom: 1px solid $brand-main-blue-light;
padding-bottom: $spacer; padding-bottom: $spacer;
margin-bottom: ($spacer * 2); margin-bottom: ($spacer * 2);
text-align: center; text-align: center;
}
.header-link { .header-link {
box-shadow: none; box-shadow: none;
@ -26,32 +28,32 @@
opacity: 0; opacity: 0;
transform: translate3d(20px,0,0) scale(0); transform: translate3d(20px,0,0) scale(0);
// &, &,
// .header-icon { .header-icon {
// @extend .transition; @extend .transition;
// } }
//
// &:hover, &:hover,
// &:focus { &:focus {
// background: none; background: none;
//
// .header-icon { .header-icon {
// color: lighten($brand-primary, 10%); color: lighten($brand-primary, 10%);
// } }
// } }
//
// .header-icon { .header-icon {
// font-style: normal; font-style: normal;
// font-size: 2rem; font-size: 2rem;
// color: $brand-primary; color: $brand-primary;
// } }
}
&:hover {
.header-link {
opacity: 1;
transform: translate3d(0,0,0) scale(.8);
}
} }
//
// &:hover {
// .header-link {
// opacity: 1;
// transform: translate3d(0,0,0) scale(.8);
// }
// }
} }
} }

14
_src/_assets/styles/bigchain/_fonts.scss
View File

@ -1,14 +0,0 @@
//
// Fonts
// ---
// bigchain.io
//
@font-face {
font-family: 'Noto Sans';
src: local('Noto Sans Regular'),
url('/assets/fonts/NotoSans-Regular.woff2') format('woff2'),
url('/assets/fonts/NotoSans-Regular.woff') format('woff'),
url('/assets/fonts/NotoSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

2
_src/_assets/styles/bigchain/_footer.scss
View File

@ -1,7 +1,7 @@
.footer { .footer {
@extend .background--darker; @extend .background--darker;
border-top: 1px solid $gray;
color: $gray-light; color: $gray-light;
padding-top: $spacer * 3;
padding-bottom: 0; padding-bottom: 0;
} }

15
_src/_assets/styles/bigchain/_hero.scss
View File

@ -8,7 +8,7 @@ $menu-height-md: 66px;
.hero { .hero {
@extend .background--photo; @extend .background--photo;
background-image: url('/assets/img/hero-berlin.jpg'); background-image: url('../img/hero-berlin.jpg');
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -68,14 +68,27 @@ $menu-height-md: 66px;
// intro animation // intro animation
.section-title, .section-title,
.btn { .btn {
.wf-active &,
.wf-inactive & {
@extend .animation-slide-in-from-bottom; @extend .animation-slide-in-from-bottom;
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: backwards; animation-fill-mode: backwards;
} }
}
.btn { .btn {
.wf-active &,
.wf-inactive & {
animation-delay: .5s; animation-delay: .5s;
} }
}
.btn-link {
.wf-active &,
.wf-inactive & {
animation-delay: .8s;
}
}
} }
.hero__content { .hero__content {

6
_src/_assets/styles/bigchain/_logo.scss
View File

@ -9,7 +9,7 @@
fill: $brand-main-blue; fill: $brand-main-blue;
color: $brand-main-green; // the fill="currentColor" trick color: $brand-main-green; // the fill="currentColor" trick
width: 300px; width: 300px;
height: 30px; height: 60px;
display: block; display: block;
} }
@ -32,8 +32,8 @@
// size modifiers // size modifiers
// //
.logo--sm { .logo--sm {
width: 120px; width: 140px;
height: 25px; height: 30px;
} }
.logo--full { .logo--full {

62
_src/_assets/styles/bigchain/_menus.scss
View File

@ -4,30 +4,26 @@
z-index: 10; z-index: 10;
width: 100%; width: 100%;
align-self: flex-start; align-self: flex-start;
.grid__col {
text-align: center;
@media ($screen-md) {
text-align: left; text-align: left;
&:last-child { text-align: right; }
}
}
} }
.menu__link { .menu__link {
@extend .small;
display: inline-block; display: inline-block;
padding: $spacer ($spacer / 2); padding: $spacer ($spacer / 2);
text-transform: uppercase;
box-shadow: none; box-shadow: none;
position: relative; position: relative;
line-height: 1; line-height: 1;
&:first-child {
padding-left: 0;
}
@media ($screen-md) { @media ($screen-md) {
&,
&:first-child {
padding: ($spacer * 2) $spacer; padding: ($spacer * 2) $spacer;
} }
}
// link line // link line
&:after { &:after {
@ -60,26 +56,22 @@
} }
.menu__logo { .menu__logo {
display: block; display: inline-block;
box-shadow: none; box-shadow: none;
padding-top: $spacer; padding-top: $spacer;
vertical-align: middle;
@media ($screen-md) { @media ($screen-md) {
padding-top: 0; padding-top: 0;
display: inline-block; vertical-align: middle;
} }
svg { svg {
@extend .transition; @extend .transition;
opacity: .8; opacity: .8;
margin-left: auto; display: inline;
margin-right: auto;
@media ($screen-md) { @media ($screen-md) {
display: inline-block; display: inline-block;
margin-left: 0;
margin-right: 0;
} }
} }
@ -92,13 +84,16 @@
} }
.menu__hiring { .menu__hiring {
color: lighten($brand-main-green, 15%); @extend .small;
color: $brand-main-green;
box-shadow: none; box-shadow: none;
padding: $spacer ($spacer / 4); padding: $spacer ($spacer / 4);
display: inline-block; display: inline-block;
float: right;
@media ($screen-md) { @media ($screen-md) {
margin-left: $spacer; margin-left: $spacer;
float: none;
} }
&:hover, &:hover,
@ -113,9 +108,9 @@
.icon { .icon {
@extend .transition; @extend .transition;
width: 1rem; width: $font-size-sm;
height: 1rem; height: $font-size-sm;
stroke: lighten($brand-main-green, 15%); stroke: $brand-main-green;
stroke-width: 1.5; stroke-width: 1.5;
margin-bottom: -1px; margin-bottom: -1px;
} }
@ -129,7 +124,7 @@
.menu--main { .menu--main {
background: rgba($brand-main-blue-dark, .35); background: rgba($brand-main-blue-dark, .35);
backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);
border-bottom: 1px solid rgba($gray, .9); border-bottom: 1px solid rgba($brand-main-gray, .5);
padding-top: ($spacer / 2); padding-top: ($spacer / 2);
padding-bottom: ($spacer / 2); padding-bottom: ($spacer / 2);
@ -167,6 +162,7 @@
margin-right: -$gutter-space / 2; margin-right: -$gutter-space / 2;
padding-left: $gutter-space / 2; padding-left: $gutter-space / 2;
padding-right: $gutter-space / 2; padding-right: $gutter-space / 2;
text-align: center;
&::-webkit-scrollbar { display: none; } &::-webkit-scrollbar { display: none; }
@ -175,6 +171,7 @@
padding: 0; padding: 0;
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
text-align: right;
} }
} }
@ -204,12 +201,14 @@
} }
.menu__link { .menu__link {
padding: ($spacer / 2); @extend .small;
color: $gray-light; padding: ($spacer / 2) ($spacer / 4);
color: $text-color;
@media ($screen-sm) { @media ($screen-sm) {
display: block; display: block;
text-align: left; text-align: left;
padding: ($spacer / 2);
} }
// hide link line // hide link line
@ -223,7 +222,7 @@
.footer__copyright { .footer__copyright {
border-top: 1px solid $gray-dark; border-top: 1px solid $brand-main-gray;
text-align: center; text-align: center;
display: block; display: block;
margin-top: ($spacer * 2); margin-top: ($spacer * 2);
@ -245,15 +244,15 @@
padding: 0 $spacer; padding: 0 $spacer;
} }
&:first-child { margin-left: ($spacer/2); } &:first-child { margin-left: ($spacer / 2); }
&:last-child { padding-right: 0; } &:last-child { padding-right: 0; }
} }
&, &,
small, small,
.menu__link { .menu__link {
@extend .small; @extend .mini;
color: $gray; color: $gray-light;
} }
} }
@ -292,8 +291,11 @@
.menu--sub { .menu--sub {
background: $gray-dark;
.menu-overflow {
text-align: center; text-align: center;
background: $gray-darker; }
.icon { .icon {
width: 1rem; width: 1rem;

4
_src/_assets/styles/bigchain/_mixins/_color-overlay.scss
View File

@ -1,5 +1,5 @@
@mixin color-overlay($color-from: $brand-main-violet, $color-to: $brand-main-green) { @mixin color-overlay($color-from: $brand-main-blue, $color-to: $brand-main-blue-dark) {
position: relative; position: relative;
// color overlay // color overlay
@ -12,7 +12,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: linear-gradient(to bottom right, $color-from 0%, $color-from 10%, $color-to 70%); background: linear-gradient(to bottom right, $color-from 0%, $color-to 100%);
opacity: .7; opacity: .7;
z-index: 0; z-index: 0;
} }

4
_src/_assets/styles/bigchain/_newsletter.scss
View File

@ -19,7 +19,7 @@
.grid { margin-bottom: 0; } .grid { margin-bottom: 0; }
.form-control { .form-control {
border-color: $gray-darker; border-color: $gray-dark;
&:focus { &:focus {
border-color: #000; border-color: #000;
@ -48,5 +48,5 @@
.newsletter__title, .newsletter__title,
.newsletter__text { .newsletter__text {
color: $gray-darker; color: $gray-dark;
} }

12
_src/_assets/styles/bigchain/_sections.scss
View File

@ -46,13 +46,12 @@
width: 3rem; width: 3rem;
display: block; display: block;
margin: ($spacer * 2) auto 0 auto; margin: ($spacer * 2) auto 0 auto;
background: $gray; background: $gray-light;
} }
} }
.section-description { .section-description {
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $line-height-lg;
margin-bottom: 0; margin-bottom: 0;
+ .section-description { + .section-description {
@ -79,15 +78,15 @@
} }
.background--darker { .background--darker {
background: $gray-darker; background: $gray-dark;
} }
.background--light { .background--light {
background: $gray-lightest; background: $brand-main-gray-lighter;
.section-title, .section-title,
p { p {
color: $gray; color: $brand-main-gray;
} }
} }
@ -101,10 +100,9 @@
// //
.background--photo { .background--photo {
@extend .color-overlay; @extend .color-overlay;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
// background // background
background: url('../img/hero-berlin.jpg') no-repeat center center; background: url('../img/hero-berlin.jpg') no-repeat top center;
background-size: cover; background-size: cover;
.row * { .row * {

2
_src/_assets/styles/bigchain/_team.scss
View File

@ -9,7 +9,7 @@
.team__image { .team__image {
@extend .img--responsive; @extend .img--responsive;
background: $gray; background: $brand-main-gray;
width: 230px; width: 230px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

4
_src/_assets/styles/bigchain/_terminal.scss
View File

@ -33,7 +33,7 @@
} }
.comment { .comment {
color: $gray; color: $brand-main-gray;
} }
.deps { .deps {
@ -80,7 +80,7 @@ $frame-border-radius: $border-radius;
height: $frame-height-mobile; height: $frame-height-mobile;
border-top-left-radius: $frame-border-radius; border-top-left-radius: $frame-border-radius;
border-top-right-radius: $frame-border-radius; border-top-right-radius: $frame-border-radius;
background: linear-gradient(to bottom, $gray-dark 0%, $gray-darker 100%); background: linear-gradient(to bottom, $gray-dark 0%, $gray-dark 100%);
margin-top: -($frame-height-mobile); margin-top: -($frame-height-mobile);
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {

10
_src/_assets/styles/bigchain/_testimonials.scss
View File

@ -43,7 +43,7 @@
&:before { &:before {
content: "“"; content: "“";
font-size: 250%; font-size: 250%;
color: $gray; color: $gray-light;
line-height: 1; line-height: 1;
margin-left: -1rem; margin-left: -1rem;
} }
@ -53,7 +53,7 @@
align-self: flex-end; align-self: flex-end;
display: flex; display: flex;
align-items: center; align-items: center;
border-top: 2px solid $gray; border-top: 2px solid $gray-light;
padding-top: $spacer; padding-top: $spacer;
position: relative; position: relative;
@ -68,7 +68,7 @@
top: 0; top: 0;
border-width: .9rem .9rem 0 0; border-width: .9rem .9rem 0 0;
border-color: transparent; border-color: transparent;
border-top-color: $gray; border-top-color: $gray-light;
} }
} }
@ -79,14 +79,14 @@
display: inline-block; display: inline-block;
margin-right: $spacer; margin-right: $spacer;
border-radius: 50%; border-radius: 50%;
border: 2px solid $gray; border: 2px solid $gray-light;
} }
.testimonial__cite { .testimonial__cite {
@extend .small; @extend .small;
font-style: normal; font-style: normal;
flex: 1; flex: 1;
color: $gray-light; color: $text-color;
} }
.testimonial__name { .testimonial__name {

2
_src/_assets/styles/bigchain/_toc.scss
View File

@ -27,7 +27,7 @@
content: counters(item, ".") " "; content: counters(item, ".") " ";
counter-increment: item; counter-increment: item;
margin-right: $spacer; margin-right: $spacer;
color: $gray; color: $brand-main-gray;
} }
} }
} }

58
_src/_assets/styles/bigchain/_typography.scss
View File

@ -39,6 +39,31 @@ body {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
} }
//
// Smoothly fade in all content after
// fonts have loaded. Not quite useful,
// but beautiful.
//
.hero,
.header,
.section,
.content {
.row {
@extend .transition;
.wf-loading & {
opacity: 0;
}
.wf-active &,
.wf-inactive & {
opacity: 1;
}
}
}
// Reset fonts for relevant elements // Reset fonts for relevant elements
input, input,
button, button,
@ -49,6 +74,7 @@ textarea {
line-height: inherit; line-height: inherit;
} }
// //
// Links // Links
// //
@ -75,12 +101,21 @@ a {
h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: $headings-font-family; font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height; line-height: $headings-line-height;
color: $headings-color; color: $headings-color;
// remove old style numerals // remove old style numerals
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
.wf-loading & {
font-weight: $font-weight-normal;
}
&,
.wf-active &,
.wf-inactive & {
font-weight: $headings-font-weight;
}
} }
@ -88,15 +123,20 @@ h1, .h1,
h2, .h2, h2, .h2,
h3, .h3 { h3, .h3 {
margin-top: ($spacer * 2); margin-top: ($spacer * 2);
margin-bottom: $spacer; margin-bottom: ($spacer * 2);
} }
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
color: $gray-light;
margin-top: $spacer; margin-top: $spacer;
margin-bottom: ($spacer / 2); margin-bottom: $spacer;
&,
.wf-active &,
.wf-inactive & {
font-weight: $font-weight-normal;
}
} }
h1, .h1 { font-size: $font-size-h1; } h1, .h1 { font-size: $font-size-h1; }
@ -139,6 +179,10 @@ strong,
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
.light {
font-weight: $font-weight-light;
}
// Alignment // Alignment
.text-left { text-align: left; } .text-left { text-align: left; }
.text-right { text-align: right; } .text-right { text-align: right; }
@ -219,12 +263,12 @@ ul {
// Blockquotes // Blockquotes
// //
blockquote { blockquote {
border-left: 3px solid $gray-lighter; @extend .text-dimmed;
border-left: 3px solid $gray-light;
margin-left: 0; margin-left: 0;
margin-top: $spacer; margin-top: $spacer;
margin-bottom: $spacer; margin-bottom: $spacer;
padding: ($spacer/2) $spacer; padding: ($spacer/2) $spacer;
color: $gray;
font-style: italic; font-style: italic;
p, p,
@ -238,7 +282,7 @@ blockquote {
cite { cite {
@extend .bold, .small; @extend .bold, .small;
font-style: italic; font-style: normal;
} }
// Addresses // Addresses

86
_src/_assets/styles/bigchain/_variables.scss
View File

@ -7,21 +7,23 @@
// //
// Colors // Colors
// //
$brand-main-green: #39BA91 !default;
$brand-main-blue: #074354 !default; $brand-main-blue: #074354 !default;
$brand-main-blue-light: #BFE6EC !default; $brand-main-gray: #445261 !default;
$brand-main-blue-dark: #101A25 !default; $brand-main-blue-dark: #101A25 !default;
$brand-main-green: #54C695 !default;
$brand-main-gray: #70859B !default;
$brand-main-violet: #B581CF !default;
$gray-darker: darken($brand-main-gray, 25%) !default; $brand-main-violet: #B581CF !default;
$gray-dark: darken($brand-main-gray, 20%) !default; $brand-main-blue-light: #BFE6EC !default;
$brand-main-gray-light: #CAD2DA !default;
$brand-main-gray-lighter: #E8EBEF !default;
$gray: $brand-main-gray !default; $gray: $brand-main-gray !default;
$gray-light: lighten($brand-main-gray, 20%) !default; $gray-light: lighten($brand-main-gray, 35%) !default;
$gray-lighter: lighten($brand-main-gray, 30%) !default; $gray-dark: darken($brand-main-gray, 5%) !default;
$gray-lightest: lighten($brand-main-gray, 40%) !default;
$brand-primary: $brand-main-green !default; $brand-primary: $brand-main-green !default;
// alerts
$brand-success: #388250 !default; $brand-success: #388250 !default;
$brand-info: #3E91CE !default; $brand-info: #3E91CE !default;
$brand-warning: #8E8E24 !default; $brand-warning: #8E8E24 !default;
@ -31,35 +33,33 @@ $brand-danger: #c9726a !default;
// //
// Typography // Typography
// //
$font-family-noto: 'Noto Sans', 'Helvetica Neue', 'Arial', sans-serif !default; $font-family-base: 'europa', 'Avenir Next', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
$font-family-avenir: 'Avenir Next', 'Helvetica Neue', 'Arial', sans-serif !default; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-avenir !default;
$font-weight-light: 300 !default; $font-weight-light: 300 !default;
$font-weight-normal: 400 !default; $font-weight-normal: 400 !default;
$font-weight-bold: 600 !default; $font-weight-bold: 600 !default;
$font-weight-base: $font-weight-normal !default; $font-weight-base: $font-weight-normal !default;
$font-size-root: 16px !default; $font-size-root: 18px !default;
$font-size-root-lg: 18px !default; $font-size-root-lg: 20px !default;
$font-size-base: 1rem !default; $font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default; $font-size-lg: 1.3rem !default;
$font-size-sm: 0.8rem !default; $font-size-sm: 0.85rem !default;
$font-size-xs: 0.65rem !default; $font-size-xs: 0.7rem !default;
$font-size-h1: 2.5rem !default; $font-size-h1: 2.7rem !default;
$font-size-h2: 2rem !default; $font-size-h2: 2.3rem !default;
$font-size-h3: 1.5rem !default; $font-size-h3: 2rem !default;
$font-size-h4: 1.2rem !default; $font-size-h4: 1.3rem !default;
$font-size-h5: $font-size-base !default; $font-size-h5: $font-size-base !default;
$font-size-h6: 0.85rem !default; $font-size-h6: 0.85rem !default;
$line-height: 1.5 !default; $line-height: 1.5 !default;
$headings-font-family: $font-family-noto !default; $headings-font-family: inherit !default;
$headings-font-weight: $font-weight-normal !default; $headings-font-weight: $font-weight-light !default;
$headings-line-height: 1.2 !default; $headings-line-height: 1.2 !default;
$headings-color: $brand-main-blue-light !default; $headings-color: $brand-main-blue-light !default;
@ -67,8 +67,8 @@ $headings-color: $brand-main-blue-light !default;
// //
// Scaffolding // Scaffolding
// //
$body-bg: $gray-dark !default; $body-bg: $brand-main-gray !default;
$text-color: $gray-lightest !default; $text-color: $brand-main-gray-lighter !default;
$link-color: inherit !default; $link-color: inherit !default;
$link-hover-color: #fff !default; $link-hover-color: #fff !default;
@ -98,7 +98,7 @@ $line-height-xs: 1.2 !default;
$border-radius: .15rem !default; $border-radius: .15rem !default;
$border-radius-lg: .2rem !default; $border-radius-lg: .2rem !default;
$border-radius-sm: .1rem !default; $border-radius-sm: .1rem !default;
$border-radius-xs: .05rem !default; $border-radius-xs: .1rem !default;
$component-active-color: #fff !default; $component-active-color: #fff !default;
$component-active-bg: $brand-primary !default; $component-active-bg: $brand-primary !default;
@ -114,7 +114,7 @@ $gutter-space: ($spacer * 2) !default;
// Code // Code
// //
$code-color: $text-color !default; $code-color: $text-color !default;
$code-bg: $gray-darker !default; $code-bg: $gray-dark !default;
$kbd-color: $code-color !default; $kbd-color: $code-color !default;
$kbd-bg: $code-bg !default; $kbd-bg: $code-bg !default;
@ -130,31 +130,31 @@ $pre-scrollable-max-height: 340px !default;
$table-cell-padding: .75rem !default; $table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default; $table-sm-cell-padding: .3rem !default;
$table-bg: $gray-darker !default; $table-bg: $gray-dark !default;
$table-bg-accent: $gray-darker !default; $table-bg-accent: $gray-dark !default;
$table-border-width: 1px !default; $table-border-width: 1px !default;
$table-border-color: $gray !default; $table-border-color: $gray-light !default;
// //
// Buttons // Buttons
// //
$btn-font-family: $font-family-noto; $btn-font-family: inherit;
$btn-font-weight: $font-weight-normal !default; $btn-font-weight: $font-weight-bold !default;
$btn-padding-x: 2rem !default; $btn-padding-x: 2rem !default;
$btn-padding-y: .5rem !default; $btn-padding-y: .5rem !default;
$btn-primary-color: #fff !default; $btn-primary-color: $brand-main-blue !default;
$btn-primary-bg: $brand-primary !default; $btn-primary-bg: $brand-primary !default;
$btn-secondary-color: #fff !default; $btn-secondary-color: $brand-main-blue !default;
$btn-secondary-bg: $brand-main-gray !default; $btn-secondary-bg: $gray-light !default;
$btn-blue-color: #fff !default; $btn-blue-color: $brand-primary !default;
$btn-blue-bg: $brand-main-blue !default; $btn-blue-bg: $brand-main-blue !default;
$btn-violet-color: #fff !default; $btn-violet-color: $brand-main-blue !default;
$btn-violet-bg: $brand-main-violet !default; $btn-violet-bg: $brand-main-violet !default;
$btn-info-color: #fff !default; $btn-info-color: #fff !default;
@ -190,20 +190,20 @@ $btn-border-radius-xs: $border-radius-xs !default;
// //
// Forms // Forms
// //
$input-font: $font-family-avenir !default; $input-font: inherit !default;
$input-font-weight: $font-weight-normal !default; $input-font-weight: $font-weight-normal !default;
$input-padding-x: .5rem !default; $input-padding-x: .5rem !default;
$input-padding-y: 0 !default; $input-padding-y: 0 !default;
$input-bg: transparent !default; $input-bg: transparent !default;
$input-bg-disabled: $gray-darker !default; $input-bg-disabled: $gray-dark !default;
$input-color: $text-color !default; $input-color: $text-color !default;
$input-border-color: $gray !default; $input-border-color: $gray-light !default;
$input-border-focus: $gray-light !default; $input-border-focus: $text-color !default;
$input-color-placeholder: $gray !default; $input-color-placeholder: $gray-light !default;
// //

33
_src/_data/colors.yml
View File

@ -4,39 +4,24 @@
# #
primary: primary:
- name: brand-main-green - name: brand-main-green
hex: 54C695 hex: 39BA91
- name: brand-main-violet
hex: B581CF
- name: gray-dark
hex: 445261
- name: brand-main-gray
hex: 70859B
- name: brand-main-blue - name: brand-main-blue
hex: '074354' hex: '074354'
- name: brand-main-gray
hex: 445261
- name: brand-main-blue-dark - name: brand-main-blue-dark
hex: 101A25 hex: 101A25
secondary:
- name: brand-main-violet
hex: B581CF
- name: brand-main-blue-light - name: brand-main-blue-light
hex: BFE6EC hex: BFE6EC
- name: brand-main-gray-light
#
# Grays
#
grays:
- name: gray-darker
hex: 2f3943
- name: gray-dark
hex: 445261
- name: gray
hex: 70859B
- name: gray-light
hex: ACB8C5
- name: gray-lighter
hex: CAD2DA hex: CAD2DA
- name: gray-lightest - name: brand-main-gray-lighter
hex: E8EBEF hex: E8EBEF
# #
# Errors # Errors
# #

12
_src/_includes/head.html
View File

@ -28,6 +28,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on"> <meta http-equiv="cleartype" content="on">
<!-- Typekit advanced async snippet -->
<script>
(function(d) {
var config = {
kitId: '{{ site.typekitID }}',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/assets/css/bigchain.min.css"> <link rel="stylesheet" href="/assets/css/bigchain.min.css">

2
_src/_includes/sections/section-cta-community.html
View File

@ -5,7 +5,7 @@
<p class="section-description">There are many ways you can contribute to the BigchainDB project.</p> <p class="section-description">There are many ways you can contribute to the BigchainDB project.</p>
</header> </header>
<a class="btn btn-blue" href="/community/"> <a class="btn btn-primary" href="/community/">
Community Community
</a> </a>
</div> </div>

2
_src/_includes/sections/section-cta-features.html
View File

@ -5,7 +5,7 @@
<p class="section-description">Learn how we scale</p> <p class="section-description">Learn how we scale</p>
</header> </header>
<a class="btn btn-blue" href="/features/"> <a class="btn btn-primary" href="/features/">
Features Features
</a> </a>
</div> </div>

2
_src/_includes/sections/section-cta-whitepaper.html
View File

@ -5,7 +5,7 @@
<p class="section-description">BigchainDB: A Scalable Blockchain Database</p> <p class="section-description">BigchainDB: A Scalable Blockchain Database</p>
</header> </header>
<a class="btn btn-blue" href="/whitepaper/"> <a class="btn btn-primary" href="/whitepaper/">
<svg class="icon"> <svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use> <use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
</svg> </svg>

2
_src/_includes/sections/section-cta.html
View File

@ -11,7 +11,7 @@
<p class="section-description">{{ context.cta.description }}</p> <p class="section-description">{{ context.cta.description }}</p>
</header> </header>
<a class="btn btn-blue" href="/"> <a class="btn btn-primary" href="/">
{{ context.cta.button }} {{ context.cta.button }}
</a> </a>
</div> </div>

2
_src/_layouts/usecase.html
View File

@ -71,7 +71,7 @@ cta:
<aside class="actionbar"> <aside class="actionbar">
<div class="grid grid--full grid-small--half grid--top"> <div class="grid grid--full grid-small--fit grid--top">
{% if page.fullstudy %} {% if page.fullstudy %}
<div class="grid__col"> <div class="grid__col">

135
_src/styleguide.md
View File

@ -9,7 +9,7 @@ sitemap: false
### Primary ### Primary
<div class="grid grid--gutters grid--full grid-medium--third"> <div class="grid grid--gutters grid--full grid-medium--fit">
{% for color in site.data.colors.primary %} {% for color in site.data.colors.primary %}
<div class="grid__col"> <div class="grid__col">
<div class="color {{ color.name }}"> <div class="color {{ color.name }}">
@ -20,10 +20,10 @@ sitemap: false
{% endfor %} {% endfor %}
</div> </div>
### Grays ### Secondary
<div class="grid grid--gutters grid--full grid-medium--third"> <div class="grid grid--gutters grid--full grid-medium--fit">
{% for color in site.data.colors.grays %} {% for color in site.data.colors.secondary %}
<div class="grid__col"> <div class="grid__col">
<div class="color {{ color.name }}"> <div class="color {{ color.name }}">
<span class="color-meta color-name">${{ color.name }}</span> <span class="color-meta color-name">${{ color.name }}</span>
@ -35,7 +35,7 @@ sitemap: false
### Errors ### Errors
<div class="grid grid--gutters grid--full grid-medium--third"> <div class="grid grid--gutters grid--full grid-medium--fit">
{% for color in site.data.colors.errors %} {% for color in site.data.colors.errors %}
<div class="grid__col"> <div class="grid__col">
<div class="color {{ color.name }}"> <div class="color {{ color.name }}">
@ -46,6 +46,70 @@ sitemap: false
{% endfor %} {% endfor %}
</div> </div>
## Typography
The main branding typeface is [**Europa**](http://www.europatype.com/articledetail/17), used for both text and headline. Europa is only [available from Typekit](https://typekit.com/fonts/europa) or as a paid download. Please consult a designer to assist you in using this font in your documents & presentations.
<div class="typeface light">Europa Light</div>
<div class="typeface">Europa Regular</div>
<div class="typeface italic">Europa Regular Italic</div>
<div class="typeface bold">Europa Bold</div>
The light weight is only used for headlines from a certain size to retain readability on all screens. For the website this means only headings 1 - 3 are using light weight.
### Body Copy
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
```html
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
```
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
```html
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
```
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
```html
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
```
## Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
## Lists
* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
* Maecenas sed diam eget risus varius blandit sit amet non magna.
1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
3. Maecenas sed diam eget risus varius blandit sit amet non magna.
## Logo ## Logo
Logo can be used with a base class and modifier classes for size & color: Logo can be used with a base class and modifier classes for size & color:
@ -92,67 +156,6 @@ Logo can be used with a base class and modifier classes for size & color:
``` ```
## Typography
The main branding typeface is **Noto Sans Regular**, used for all headings and buttons. Noto Sans is open source and free to download and use.
<a class="btn btn-secondary btn-sm" href="http://www.google.com/get/noto/#sans-lgc">Download Noto Sans</a>
For body copy we're using the system installed font **Avenir Next** on Mac OS X & iOS and **Arial** on Windows. Linux will just use the default sans-serif typeface, e.g. on Ubuntu this should be **Bitstream Vera Sans**.
### Body Copy
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
```html
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis <a href="#">parturient montes</a>, nascetur ridiculus mus. Nullam id dolor id nibh <strong>ultricies vehicula</strong>.</p>
<p>Donec <em>ullamcorper nulla</em> non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
```
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
```html
<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
```
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
```html
<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
```
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
```html
<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
```
## Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
## Lists
* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
* Maecenas sed diam eget risus varius blandit sit amet non magna.
1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
3. Maecenas sed diam eget risus varius blandit sit amet non magna.
## Components ## Components
### Buttons ### Buttons

17
gulpfile.babel.js
View File

@ -220,21 +220,6 @@ export const images = () => src(SRC + '_assets/images/**/*')
.pipe(dest(DIST + 'assets/img/')) .pipe(dest(DIST + 'assets/img/'))
//
// Copy Fonts
//
export const fonts = () => src(SRC + '_assets/fonts/**/*')
.pipe($.rename({dirname: ''}))
.pipe(dest(DIST + 'assets/fonts/'))
//
// Copy Videos
//
export const videos = () => src(SRC + '_assets/videos/**/*')
.pipe(dest(DIST + 'assets/videos/'))
// //
// Revision static assets // Revision static assets
// //
@ -332,7 +317,7 @@ const deployBanner = (done) => {
// `gulp build` is the development build // `gulp build` is the development build
// `gulp build --production` is the production build // `gulp build --production` is the production build
// //
export const build = series(buildBanner, clean, jekyll, parallel(html, css, js, images, fonts, videos, svg), rev, revReplace, criticalCss) export const build = series(buildBanner, clean, jekyll, parallel(html, css, js, images, svg), rev, revReplace, criticalCss)
// //
// Build site, run server, and watch for file changes // Build site, run server, and watch for file changes