diff --git a/_config.yml b/_config.yml index d961681..f265c9e 100644 --- a/_config.yml +++ b/_config.yml @@ -33,6 +33,7 @@ address: # Track all the things # -------------------- analyticsID: UA-60614729-8 +typekitID: fih1ngo # Urls diff --git a/_src/_assets/fonts/NotoSans-Regular.ttf b/_src/_assets/fonts/NotoSans-Regular.ttf deleted file mode 100755 index b4d32ef..0000000 Binary files a/_src/_assets/fonts/NotoSans-Regular.ttf and /dev/null differ diff --git a/_src/_assets/fonts/NotoSans-Regular.woff b/_src/_assets/fonts/NotoSans-Regular.woff deleted file mode 100755 index ec94d08..0000000 Binary files a/_src/_assets/fonts/NotoSans-Regular.woff and /dev/null differ diff --git a/_src/_assets/fonts/NotoSans-Regular.woff2 b/_src/_assets/fonts/NotoSans-Regular.woff2 deleted file mode 100644 index f93bcb2..0000000 Binary files a/_src/_assets/fonts/NotoSans-Regular.woff2 and /dev/null differ diff --git a/_src/_assets/images/hero-berlin.jpg b/_src/_assets/images/hero-berlin.jpg index a7efa20..80996a2 100644 Binary files a/_src/_assets/images/hero-berlin.jpg and b/_src/_assets/images/hero-berlin.jpg differ diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js index 150f38c..ad1a81e 100644 --- a/_src/_assets/javascripts/bigchain.js +++ b/_src/_assets/javascripts/bigchain.js @@ -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'); diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js index 7022478..9ba44f5 100644 --- a/_src/_assets/javascripts/page-front.js +++ b/_src/_assets/javascripts/page-front.js @@ -1,5 +1,4 @@ -//=include bigchain/smoothscroll.js //=include bigchain/testimonials.js jQuery(function($) { diff --git a/_src/_assets/styles/_page-404.scss b/_src/_assets/styles/_page-404.scss index 2038157..a30fbcd 100644 --- a/_src/_assets/styles/_page-404.scss +++ b/_src/_assets/styles/_page-404.scss @@ -27,7 +27,7 @@ width: 5rem; display: block; margin: ($spacer * 2) auto 0 auto; - background: $gray-lighter; + background: $brand-main-gray-light; } } diff --git a/_src/_assets/styles/_page-cla.scss b/_src/_assets/styles/_page-cla.scss index 821a782..49777cb 100644 --- a/_src/_assets/styles/_page-cla.scss +++ b/_src/_assets/styles/_page-cla.scss @@ -1,5 +1,5 @@ .form-cla { padding: $spacer ($spacer * 2); - background: $gray-darker; + background: $gray-dark; } diff --git a/_src/_assets/styles/_page-features.scss b/_src/_assets/styles/_page-features.scss index 92e3d06..2990588 100644 --- a/_src/_assets/styles/_page-features.scss +++ b/_src/_assets/styles/_page-features.scss @@ -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); diff --git a/_src/_assets/styles/_page-front.scss b/_src/_assets/styles/_page-front.scss index 15a8524..a14db63 100644 --- a/_src/_assets/styles/_page-front.scss +++ b/_src/_assets/styles/_page-front.scss @@ -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; } } diff --git a/_src/_assets/styles/_page-styleguide.scss b/_src/_assets/styles/_page-styleguide.scss index 08d5c46..5538bb3 100644 --- a/_src/_assets/styles/_page-styleguide.scss +++ b/_src/_assets/styles/_page-styleguide.scss @@ -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 } diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss index 0d00ec7..2f95a69 100644 --- a/_src/_assets/styles/_page-usecases.scss +++ b/_src/_assets/styles/_page-usecases.scss @@ -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, diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index dba7069..c2c58bd 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -13,7 +13,6 @@ @import 'bigchain/_mixins'; // Components -@import 'bigchain/_fonts'; @import 'bigchain/_typography'; @import 'bigchain/_animations'; @import 'bigchain/_tables'; diff --git a/_src/_assets/styles/bigchain/_animations.scss b/_src/_assets/styles/bigchain/_animations.scss index 570e80e..7309ce7 100644 --- a/_src/_assets/styles/bigchain/_animations.scss +++ b/_src/_assets/styles/bigchain/_animations.scss @@ -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 { diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index 506551c..d7b481e 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -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; diff --git a/_src/_assets/styles/bigchain/_content-page.scss b/_src/_assets/styles/bigchain/_content-page.scss index 18edf21..e5019d2 100644 --- a/_src/_assets/styles/bigchain/_content-page.scss +++ b/_src/_assets/styles/bigchain/_content-page.scss @@ -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); - // } - // } } } diff --git a/_src/_assets/styles/bigchain/_fonts.scss b/_src/_assets/styles/bigchain/_fonts.scss deleted file mode 100644 index 981c874..0000000 --- a/_src/_assets/styles/bigchain/_fonts.scss +++ /dev/null @@ -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; -} diff --git a/_src/_assets/styles/bigchain/_footer.scss b/_src/_assets/styles/bigchain/_footer.scss index 8d0c0e8..a0995a9 100644 --- a/_src/_assets/styles/bigchain/_footer.scss +++ b/_src/_assets/styles/bigchain/_footer.scss @@ -1,7 +1,7 @@ .footer { @extend .background--darker; - border-top: 1px solid $gray; color: $gray-light; + padding-top: $spacer * 3; padding-bottom: 0; } diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss index 4de68e1..6d8b9d2 100644 --- a/_src/_assets/styles/bigchain/_hero.scss +++ b/_src/_assets/styles/bigchain/_hero.scss @@ -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; + } } } diff --git a/_src/_assets/styles/bigchain/_logo.scss b/_src/_assets/styles/bigchain/_logo.scss index e060d17..f22d41f 100644 --- a/_src/_assets/styles/bigchain/_logo.scss +++ b/_src/_assets/styles/bigchain/_logo.scss @@ -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 { diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss index 2e46d4f..628baf4 100644 --- a/_src/_assets/styles/bigchain/_menus.scss +++ b/_src/_assets/styles/bigchain/_menus.scss @@ -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; diff --git a/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss b/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss index 9b548a7..083ad90 100644 --- a/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss +++ b/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss @@ -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; } diff --git a/_src/_assets/styles/bigchain/_newsletter.scss b/_src/_assets/styles/bigchain/_newsletter.scss index f970c96..4b9b96f 100644 --- a/_src/_assets/styles/bigchain/_newsletter.scss +++ b/_src/_assets/styles/bigchain/_newsletter.scss @@ -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; } diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/bigchain/_sections.scss index f68027a..c629fbf 100644 --- a/_src/_assets/styles/bigchain/_sections.scss +++ b/_src/_assets/styles/bigchain/_sections.scss @@ -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 * { diff --git a/_src/_assets/styles/bigchain/_team.scss b/_src/_assets/styles/bigchain/_team.scss index 6db777d..86f91cc 100644 --- a/_src/_assets/styles/bigchain/_team.scss +++ b/_src/_assets/styles/bigchain/_team.scss @@ -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%); diff --git a/_src/_assets/styles/bigchain/_terminal.scss b/_src/_assets/styles/bigchain/_terminal.scss index c0b95f6..300292e 100644 --- a/_src/_assets/styles/bigchain/_terminal.scss +++ b/_src/_assets/styles/bigchain/_terminal.scss @@ -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) { diff --git a/_src/_assets/styles/bigchain/_testimonials.scss b/_src/_assets/styles/bigchain/_testimonials.scss index 2dcce1e..9095c1a 100644 --- a/_src/_assets/styles/bigchain/_testimonials.scss +++ b/_src/_assets/styles/bigchain/_testimonials.scss @@ -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 { diff --git a/_src/_assets/styles/bigchain/_toc.scss b/_src/_assets/styles/bigchain/_toc.scss index 7e01da8..0a79071 100644 --- a/_src/_assets/styles/bigchain/_toc.scss +++ b/_src/_assets/styles/bigchain/_toc.scss @@ -27,7 +27,7 @@ content: counters(item, ".") " "; counter-increment: item; margin-right: $spacer; - color: $gray; + color: $brand-main-gray; } } } diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss index b49a57d..8ba3d7e 100644 --- a/_src/_assets/styles/bigchain/_typography.scss +++ b/_src/_assets/styles/bigchain/_typography.scss @@ -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 diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index b369573..bbf0f85 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -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; // diff --git a/_src/_data/colors.yml b/_src/_data/colors.yml index 290a76e..c0da36b 100644 --- a/_src/_data/colors.yml +++ b/_src/_data/colors.yml @@ -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 # diff --git a/_src/_includes/head.html b/_src/_includes/head.html index d53bda1..40a431b 100644 --- a/_src/_includes/head.html +++ b/_src/_includes/head.html @@ -28,6 +28,18 @@ + + + diff --git a/_src/_includes/sections/section-cta-community.html b/_src/_includes/sections/section-cta-community.html index 817e2c3..10a6833 100644 --- a/_src/_includes/sections/section-cta-community.html +++ b/_src/_includes/sections/section-cta-community.html @@ -5,7 +5,7 @@

There are many ways you can contribute to the BigchainDB project.

- + Community diff --git a/_src/_includes/sections/section-cta-features.html b/_src/_includes/sections/section-cta-features.html index 1b57e0b..8d3989f 100644 --- a/_src/_includes/sections/section-cta-features.html +++ b/_src/_includes/sections/section-cta-features.html @@ -5,7 +5,7 @@

Learn how we scale

- + Features diff --git a/_src/_includes/sections/section-cta-whitepaper.html b/_src/_includes/sections/section-cta-whitepaper.html index 87abc66..4a85df0 100644 --- a/_src/_includes/sections/section-cta-whitepaper.html +++ b/_src/_includes/sections/section-cta-whitepaper.html @@ -5,7 +5,7 @@

BigchainDB: A Scalable Blockchain Database

- + diff --git a/_src/_includes/sections/section-cta.html b/_src/_includes/sections/section-cta.html index 829f2be..1c93de0 100644 --- a/_src/_includes/sections/section-cta.html +++ b/_src/_includes/sections/section-cta.html @@ -11,7 +11,7 @@

{{ context.cta.description }}

- + {{ context.cta.button }} diff --git a/_src/_layouts/usecase.html b/_src/_layouts/usecase.html index 94cc0c1..16f0599 100644 --- a/_src/_layouts/usecase.html +++ b/_src/_layouts/usecase.html @@ -71,7 +71,7 @@ cta: