1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00

updated branding (#99)

- 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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 175 KiB

View File

@ -38,7 +38,7 @@ jQuery(function($) {
//
// 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;
$el = $(el);
id = $el.attr('id');

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,14 @@
.page-styleguide {
.highlight { margin-bottom: ($spacer * 2) }
.typeface {
font-size: 7vw;
&.bold {
margin-bottom: $spacer * 2;
}
}
}
// color swatches
@ -8,7 +16,7 @@
padding: ($spacer / 2);
margin-bottom: 5px;
border-radius: $border-radius;
border: 1px solid $gray-darker;
border: 1px solid lighten($body-bg, 10%);
min-height: 70px;
text-align: center;
@ -40,21 +48,16 @@
// colors
.brand-main-blue { background: $brand-main-blue }
.brand-main-blue-light { background: $brand-main-blue-light }
.brand-main-blue-dark { background: $brand-main-blue-dark }
.brand-main-gray { background: $brand-main-gray }
.brand-main-green { background: $brand-main-green }
.brand-main-violet { background: $brand-main-violet }
.brand-main-blue { background: $brand-main-blue }
.brand-main-blue-light { background: $brand-main-blue-light }
.brand-main-blue-dark { background: $brand-main-blue-dark }
.brand-main-gray { background: $brand-main-gray }
.brand-main-green { background: $brand-main-green }
.brand-main-violet { background: $brand-main-violet }
.brand-main-gray-light { background: $brand-main-gray-light }
.brand-main-gray-lighter { background: $brand-main-gray-lighter }
.gray-darker { background: $gray-darker }
.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-info { background: $brand-info }
.brand-warning { background: $brand-warning }
.brand-danger { background: $brand-danger }
.brand-success { background: $brand-success }
.brand-info { background: $brand-info }
.brand-warning { background: $brand-warning }
.brand-danger { background: $brand-danger }

View File

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

View File

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

View File

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

View File

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

View File

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

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;
}

View File

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

View File

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

View File

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

View File

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

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;
// color overlay
@ -12,7 +12,7 @@
top: 0;
bottom: 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;
z-index: 0;
}

View File

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

View File

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

View File

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

View File

@ -33,7 +33,7 @@
}
.comment {
color: $gray;
color: $brand-main-gray;
}
.deps {
@ -80,7 +80,7 @@ $frame-border-radius: $border-radius;
height: $frame-height-mobile;
border-top-left-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);
@media (min-width: $screen-sm-min) {

View File

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

View File

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

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;
}
//
// 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
input,
button,
@ -49,6 +74,7 @@ textarea {
line-height: inherit;
}
//
// Links
//
@ -75,12 +101,21 @@ a {
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
// remove old style numerals
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,
h3, .h3 {
margin-top: ($spacer * 2);
margin-bottom: $spacer;
margin-bottom: ($spacer * 2);
}
h4, .h4,
h5, .h5,
h6, .h6 {
color: $gray-light;
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; }
@ -139,6 +179,10 @@ strong,
font-weight: $font-weight-bold;
}
.light {
font-weight: $font-weight-light;
}
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
@ -219,12 +263,12 @@ ul {
// Blockquotes
//
blockquote {
border-left: 3px solid $gray-lighter;
@extend .text-dimmed;
border-left: 3px solid $gray-light;
margin-left: 0;
margin-top: $spacer;
margin-bottom: $spacer;
padding: ($spacer/2) $spacer;
color: $gray;
font-style: italic;
p,
@ -238,7 +282,7 @@ blockquote {
cite {
@extend .bold, .small;
font-style: italic;
font-style: normal;
}
// Addresses

View File

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

View File

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

View File

@ -28,6 +28,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 -->
<link rel="stylesheet" href="/assets/css/bigchain.min.css">

View File

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

View File

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

View File

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

View File

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

View File

@ -71,7 +71,7 @@ cta:
<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 %}
<div class="grid__col">

View File

@ -9,7 +9,7 @@ sitemap: false
### 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 %}
<div class="grid__col">
<div class="color {{ color.name }}">
@ -20,10 +20,10 @@ sitemap: false
{% endfor %}
</div>
### Grays
### Secondary
<div class="grid grid--gutters grid--full grid-medium--third">
{% for color in site.data.colors.grays %}
<div class="grid grid--gutters grid--full grid-medium--fit">
{% for color in site.data.colors.secondary %}
<div class="grid__col">
<div class="color {{ color.name }}">
<span class="color-meta color-name">${{ color.name }}</span>
@ -35,7 +35,7 @@ sitemap: false
### 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 %}
<div class="grid__col">
<div class="color {{ color.name }}">
@ -46,6 +46,70 @@ sitemap: false
{% endfor %}
</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 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
### Buttons

View File

@ -220,21 +220,6 @@ export const images = () => src(SRC + '_assets/images/**/*')
.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
//
@ -332,7 +317,7 @@ const deployBanner = (done) => {
// `gulp build` is the development 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