From d8eb72702bd917fe39ffcff3ab6c13e71b93bc39 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 20 Dec 2015 19:31:36 +0100 Subject: [PATCH] extend the branding --- _src/_assets/images/icon-graph.svg | 24 ++++++++ _src/_assets/images/icon-servers.svg | 28 +++++++++ _src/_assets/images/icon-tree.svg | 19 ++++++ _src/_assets/styles/bigchain.scss | 2 + _src/_assets/styles/bigchain/_animations.scss | 49 +++++++++++++++ _src/_assets/styles/bigchain/_buttons.scss | 3 +- _src/_assets/styles/bigchain/_footer.scss | 7 +++ _src/_assets/styles/bigchain/_icons.scss | 11 ++++ _src/_assets/styles/bigchain/_logo.scss | 2 +- .../styles/bigchain/_mixins/_buttons.scss | 40 ++++-------- _src/_assets/styles/bigchain/_sections.scss | 37 +++++++---- _src/_assets/styles/bigchain/_typography.scss | 4 +- _src/_assets/styles/bigchain/_variables.scss | 25 +++++--- _src/_assets/styles/page-front.scss | 61 ++++++++++++++++--- _src/_includes/footer.html | 6 ++ _src/index.html | 52 +++++++++++----- 16 files changed, 295 insertions(+), 75 deletions(-) create mode 100644 _src/_assets/images/icon-graph.svg create mode 100644 _src/_assets/images/icon-servers.svg create mode 100644 _src/_assets/images/icon-tree.svg create mode 100644 _src/_assets/styles/bigchain/_footer.scss create mode 100644 _src/_assets/styles/bigchain/_icons.scss diff --git a/_src/_assets/images/icon-graph.svg b/_src/_assets/images/icon-graph.svg new file mode 100644 index 0000000..afc8e82 --- /dev/null +++ b/_src/_assets/images/icon-graph.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/_src/_assets/images/icon-servers.svg b/_src/_assets/images/icon-servers.svg new file mode 100644 index 0000000..9f04c0c --- /dev/null +++ b/_src/_assets/images/icon-servers.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_src/_assets/images/icon-tree.svg b/_src/_assets/images/icon-tree.svg new file mode 100644 index 0000000..7470a26 --- /dev/null +++ b/_src/_assets/images/icon-tree.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index c61a9f6..33da73e 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -19,8 +19,10 @@ @import 'bigchain/_buttons'; @import 'bigchain/_forms'; @import 'bigchain/_logo'; +@import 'bigchain/_icons'; @import 'bigchain/_grid'; @import 'bigchain/_sections'; +@import 'bigchain/_footer'; // Content types //@import 'bigchain/content-page'; diff --git a/_src/_assets/styles/bigchain/_animations.scss b/_src/_assets/styles/bigchain/_animations.scss index d0fdac1..407aa8a 100644 --- a/_src/_assets/styles/bigchain/_animations.scss +++ b/_src/_assets/styles/bigchain/_animations.scss @@ -1,3 +1,52 @@ $timing-default: ease-out; $timing-bounce: cubic-bezier(0,1.02,.32,1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34 + +// +// Transitions +// +@mixin transition { + transition: all .2s ease-in-out; +} + +.transition { + @include transition; +} + +.fade { + @include transition; + opacity: 0; + + &.in { + opacity: 1; + } +} + + +// +// Custom animations +// + +// smooooothly slide in from bottom +@mixin animation-slide-in-from-bottom { + animation: slide-in-from-bottom .7s $timing-bounce; +} + +.animation-slide-in-from-bottom { + @include animation-slide-in-from-bottom; + + &.paused { + animation-play-state: paused; + } +} + +@keyframes slide-in-from-bottom { + 0% { + opacity: 0; + transform: translateY(100px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index 16f1df6..10ec671 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -14,7 +14,7 @@ vertical-align: middle; cursor: pointer; user-select: none; - border: 1px solid transparent; + border: none; @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); transition: all .2s ease-in-out; @@ -30,7 +30,6 @@ &.active { background-image: none; outline: 0; - box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } &.disabled, &:disabled { diff --git a/_src/_assets/styles/bigchain/_footer.scss b/_src/_assets/styles/bigchain/_footer.scss new file mode 100644 index 0000000..145f068 --- /dev/null +++ b/_src/_assets/styles/bigchain/_footer.scss @@ -0,0 +1,7 @@ + +.footer { + padding-top: $spacer; + padding-bottom: $spacer; + text-align: center; + color: $gray-light; +} diff --git a/_src/_assets/styles/bigchain/_icons.scss b/_src/_assets/styles/bigchain/_icons.scss new file mode 100644 index 0000000..5507347 --- /dev/null +++ b/_src/_assets/styles/bigchain/_icons.scss @@ -0,0 +1,11 @@ + +.icon { + fill: none; + stroke: $brand-main-brown; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + width: 60px; + height: 60px; +} diff --git a/_src/_assets/styles/bigchain/_logo.scss b/_src/_assets/styles/bigchain/_logo.scss index b9edd44..09e058e 100644 --- a/_src/_assets/styles/bigchain/_logo.scss +++ b/_src/_assets/styles/bigchain/_logo.scss @@ -6,7 +6,7 @@ // default logo .logo { - fill: $brand-main-black; + fill: $brand-main-blue-dark; width: 300px; height: 30px; } diff --git a/_src/_assets/styles/bigchain/_mixins/_buttons.scss b/_src/_assets/styles/bigchain/_mixins/_buttons.scss index 176c38d..67a636f 100644 --- a/_src/_assets/styles/bigchain/_mixins/_buttons.scss +++ b/_src/_assets/styles/bigchain/_mixins/_buttons.scss @@ -6,38 +6,24 @@ $active-border: darken($border, 12%); color: $color !important; background-color: $background; - border-color: $border; &:hover, - &:focus, - &.focus { + &:focus { color: $color !important; background-color: $active-background; - border-color: $active-border; } - &:active, - &.active { + &:active { color: $color !important; - background-color: $active-background; - border-color: $active-border; + background-color: darken($background, 30%); + transition: none; // Remove the gradient for the pressed/active state background-image: none; - - &:hover, - &:focus, - &.focus { - color: $color !important; - background-color: darken($background, 17%); - border-color: darken($border, 25%); - } } &.disabled, &:disabled { - &:focus, - &.focus { + &:focus { background-color: $background; - border-color: $border; } } } @@ -45,22 +31,22 @@ color: $color; background-image: none; background-color: transparent; - border-color: $color; + border: 1px solid $color; &:hover, - &:focus, - &.focus, - &:active, - &.active { - color: #fff; + &:focus { background-color: $color; border-color: $color; } + &:active { + background-color: darken($color, 10%); + border-color: darken($color, 10%); + } + &.disabled, &:disabled { - &:focus, - &.focus { + &:focus { border-color: lighten($color, 20%); } } diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/bigchain/_sections.scss index e9e50eb..f926f1f 100644 --- a/_src/_assets/styles/bigchain/_sections.scss +++ b/_src/_assets/styles/bigchain/_sections.scss @@ -2,7 +2,6 @@ .section { padding-top: ($spacer * 2); padding-bottom: ($spacer * 2); - min-height: 420px; // use this so animated elements coming in from outside of screen // don't affect layout @@ -11,19 +10,24 @@ // vertically center everything display: flex; align-items: center; + min-height: 420px; - .row { flex: 1 } + .row { flex: 1; } @media ($screen-sm) { - padding-top: ($spacer * 3); - padding-bottom: ($spacer * 3); + padding-top: ($spacer * 4); + padding-bottom: ($spacer * 4); } } +.section-header { + margin-bottom: ($spacer * 4); +} + .section-title, .section-description { text-align: center; - + @media ($screen-sm) { max-width: 100%; margin-left: auto; @@ -34,7 +38,15 @@ .section-title { font-size: $font-size-h3; margin-top: 0; - margin-bottom: $spacer; + + &:after { + content: ""; + height: 2px; + width: 5rem; + display: block; + margin: ($spacer * 2) auto 0 auto; + background: lighten($brand-main-gray, 30%); + } @media ($screen-sm) { font-size: $font-size-h2; @@ -65,19 +77,22 @@ // Section backgrounds // .background--blue { - background: $brand-main-blue; + background: $brand-main-blue; // fallback + background: linear-gradient(to bottom right, $brand-main-blue 0%, lighten($brand-main-blue, 10%) 100%); * { color: #fff } } -.background--black { - background: $brand-main-black; +.background--dark { + background: $brand-main-blue-dark; // fallback + background: linear-gradient(to bottom right, $brand-main-blue-dark 0%, lighten($brand-main-blue-dark, 10%) 100%); * { color: #fff } } -.background--gray-dark { - background: $gray-dark; +.background--gray { + background: $brand-main-gray; // fallback + background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%); * { color: #fff } } diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss index d827bf4..11ca342 100644 --- a/_src/_assets/styles/bigchain/_typography.scss +++ b/_src/_assets/styles/bigchain/_typography.scss @@ -106,12 +106,12 @@ p { // small, .small { - font-size: floor((100% * $font-size-sm / $font-size-base)); + font-size: $font-size-sm; font-weight: $font-weight-normal; } .mini { - font-size: floor((100% * $font-size-xs / $font-size-base)); + font-size: $font-size-xs; font-weight: $font-weight-normal; } diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 56c1cb8..bbe3a84 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -7,12 +7,17 @@ // // Colors // -$brand-main-blue: #003C69; -$brand-main-black: #000000; -$brand-main-white: #FFFFFF; +//$brand-main-blue: #003C69 !default; +$brand-main-blue: #275B82 !default; +$brand-main-blue-dark: #101A25 !default; + +$brand-main-gray: #70859B !default; + +$brand-main-brown: #B56D00 !default; +$brand-main-light: #FFFFFF !default; $gray-dark: #373a3c !default; -$gray: #55595c !default; +$gray: $brand-main-gray !default; $gray-light: #818a91 !default; $gray-lighter: #eceeef !default; $gray-lightest: #f7f7f9 !default; @@ -40,9 +45,9 @@ $font-weight-base: $font-weight-light !default; $font-size-root: 16px !default; $font-size-base: 1rem !default; -$font-size-lg: ceil(($font-size-base * 1.25)) !default; -$font-size-sm: ceil(($font-size-base * 0.875)) !default; -$font-size-xs: ceil(($font-size-base * 0.75)) !default; +$font-size-lg: 1.25rem !default; +$font-size-sm: 0.875rem !default; +$font-size-xs: 0.75rem !default; $font-size-h1: 3rem !default; $font-size-h2: 2.5rem !default; @@ -56,16 +61,16 @@ $line-height: 1.5 !default; $headings-font-family: $font-family-fira !default; $headings-font-weight: $font-weight-light !default; $headings-line-height: 1.2 !default; -$headings-color: $brand-main-blue !default; +$headings-color: $brand-main-gray !default; // // Scaffolding // $body-bg: #fff !default; -$text-color: $brand-main-black !default; +$text-color: $brand-main-blue-dark !default; -$link-color: $brand-main-blue !default; +$link-color: $brand-main-brown !default; $link-hover-color: darken($link-color, 15%) !default; diff --git a/_src/_assets/styles/page-front.scss b/_src/_assets/styles/page-front.scss index 27879d6..9007bc5 100644 --- a/_src/_assets/styles/page-front.scss +++ b/_src/_assets/styles/page-front.scss @@ -8,21 +8,42 @@ text-align: center; overflow: hidden; position: relative; + text-shadow: 0 1px 0 rgba(0,0,0,.3); // background - background: url('../img/photo2.jpg') no-repeat center center; + background: url('../img/photo1.jpg') no-repeat center bottom; background-size: cover; + // color overlay + &:before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + //background: $brand-main-brown; + background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%); + opacity: .7; + z-index: 0; + } + + .hero__content { + position: relative; + z-index: 1; + } + @media ($screen-sm) { - height: 85vh; - max-height: 680px; + height: 100vh; } .logo { - fill-opacity: .7; + fill-opacity: .6; margin: auto; - margin-top: -($spacer * 6); - margin-bottom: $spacer; + margin-top: -($spacer * 8); + margin-bottom: ($spacer * 2); max-width: 31em; } @@ -31,16 +52,40 @@ font-size: $font-size-h1; margin-bottom: ($spacer * 3); } + + .btn { + &:hover, + &:focus, + &:active { + text-shadow: none; + } + } + + // intro animation + .logo, + .section-title, + .btn { + @extend .animation-slide-in-from-bottom; + animation-fill-mode: backwards; + } + + .section-title { animation-delay: .2s; } + .btn { animation-delay: .4s; } } .section-benchmarks { text-align: center; + border-bottom: 1px solid lighten($brand-main-gray, 40%); + + .icon { + display: block; + margin: auto; + margin-bottom: $spacer; + } } - - .section-earlyaccess { form { diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html index e69de29..b37475d 100644 --- a/_src/_includes/footer.html +++ b/_src/_includes/footer.html @@ -0,0 +1,6 @@ + + diff --git a/_src/index.html b/_src/index.html index 8cb7681..843d4cc 100644 --- a/_src/index.html +++ b/_src/index.html @@ -6,37 +6,61 @@ front_page: true
- -

Bigchain is coming.

- Get Early Access +
+ +

Bigchain is coming.

+ Get Early Access +
-
+
+
+

Key Features

+
-

100,000 transactions per second and climbing

-

Petabyte Capacity

-

Open Source

+

+ + + + 100,000 transactions per second and climbing +

+

+ + + + Petabyte Capacity +

+

+ + + + Open Source +

-
+
-

Whitepaper

+
+

Whitepaper

+

Coming soon

-
+
-

Early Access

+
+

Early Access

+

For early access and inquiries, enter your contact information below