From 2312390cdb93b1a209c28cae074237a3f2464138 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 20 Dec 2015 20:16:49 +0100 Subject: [PATCH] typographic tweaks, learn more secondary cta, whitepaper section --- _src/_assets/images/icon-caret.svg | 14 +++++++ _src/_assets/images/icon-documents.svg | 21 ++++++++++ _src/_assets/styles/bigchain/_buttons.scss | 2 +- .../styles/bigchain/_mixins/_buttons.scss | 1 + _src/_assets/styles/bigchain/_variables.scss | 10 ++--- _src/_assets/styles/page-front.scss | 42 +++++++++++++++++-- _src/index.html | 16 +++++-- 7 files changed, 94 insertions(+), 12 deletions(-) create mode 100644 _src/_assets/images/icon-caret.svg create mode 100644 _src/_assets/images/icon-documents.svg diff --git a/_src/_assets/images/icon-caret.svg b/_src/_assets/images/icon-caret.svg new file mode 100644 index 0000000..a133e61 --- /dev/null +++ b/_src/_assets/images/icon-caret.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/_src/_assets/images/icon-documents.svg b/_src/_assets/images/icon-documents.svg new file mode 100644 index 0000000..a0a4e18 --- /dev/null +++ b/_src/_assets/images/icon-documents.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index 10ec671..f7111f8 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: none; + border: 1px solid transparent; @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); transition: all .2s ease-in-out; diff --git a/_src/_assets/styles/bigchain/_mixins/_buttons.scss b/_src/_assets/styles/bigchain/_mixins/_buttons.scss index bb7c9b1..e1b5d64 100644 --- a/_src/_assets/styles/bigchain/_mixins/_buttons.scss +++ b/_src/_assets/styles/bigchain/_mixins/_buttons.scss @@ -6,6 +6,7 @@ $active-border: darken($border, 12%); color: $color !important; background: $background; + border-color: $border; &:hover, &:focus { diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index bbe3a84..5465a66 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -33,16 +33,16 @@ $brand-danger: #d9534f !default; // Typography // $font-family-fira: 'Fira Sans', sans-serif !default; -$font-family-avenir: 'Avenir', '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-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 600 !default; -$font-weight-base: $font-weight-light !default; +$font-weight-base: $font-weight-normal !default; -$font-size-root: 16px !default; +$font-size-root: 18px !default; $font-size-base: 1rem !default; $font-size-lg: 1.25rem !default; @@ -112,7 +112,7 @@ $component-active-bg: $brand-primary !default; // $btn-padding-x: 1.5rem !default; $btn-padding-y: .375rem !default; -$btn-font-weight: $font-weight-light !default; +$btn-font-weight: $font-weight-normal !default; $btn-primary-color: #fff !default; $btn-primary-bg: $brand-primary !default; @@ -169,4 +169,4 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; $input-font: $font-family-avenir !default; -$input-font-weight: $font-weight-light !default; +$input-font-weight: $font-weight-normal !default; diff --git a/_src/_assets/styles/page-front.scss b/_src/_assets/styles/page-front.scss index 58bae8c..2fe9e01 100644 --- a/_src/_assets/styles/page-front.scss +++ b/_src/_assets/styles/page-front.scss @@ -8,7 +8,7 @@ text-align: center; overflow: hidden; position: relative; - text-shadow: 0 1px 0 rgba(0,0,0,.3); + text-shadow: 0 1px 0 rgba(0,0,0,.1); // background background: url('../img/photo1.jpg') no-repeat center bottom; @@ -55,6 +55,24 @@ &:after { display: none } } + .btn-link { + color: #fff; + margin-top: ($spacer * 3); + opacity: .7; + + &:hover, + &:focus { opacity: 1; } + + // the caret + .icon { + width: 12px; + height: 12px; + stroke: #fff; + display: block; + margin: auto; + } + } + .btn { &:hover, &:focus, @@ -64,16 +82,21 @@ } // intro animation - .logo { + .logo, + .section-title, + .btn { @extend .animation-slide-in-from-bottom; animation-duration: 1s; + animation-fill-mode: backwards; + } + + .logo { animation-timing-function: $timing-default; } .section-title, .btn { @extend .animation-slide-in-from-bottom; - animation-fill-mode: backwards; animation-play-state: paused; } @@ -102,6 +125,19 @@ } } + +.section-whitepaper { + .icon { + stroke: $brand-main-gray; + stroke-dasharray: 4,4; + opacity: .3; + display: block; + margin: auto; + margin-bottom: $spacer; + } +} + + .section-earlyaccess { form { diff --git a/_src/index.html b/_src/index.html index 6951e4f..6ed9453 100644 --- a/_src/index.html +++ b/_src/index.html @@ -12,12 +12,17 @@ front_page: true

Bigchain is coming.

- Get Early Access +

+ Get Early Access +

+ Learn More + + -
+

Key Features

@@ -52,7 +57,12 @@ front_page: true

Whitepaper

-

Coming soon

+

+ + + + Coming soon +