From 9bbbbb7d9e98913caf8ec6145043fdb7be27ec37 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 30 Jan 2016 13:34:11 +0100 Subject: [PATCH] branding cleanup & tweaks --- _src/_assets/styles/bigchain/_buttons.scss | 49 ++++++++++--------- _src/_assets/styles/bigchain/_forms.scss | 8 +++ _src/_assets/styles/bigchain/_menus.scss | 11 +++-- .../styles/bigchain/_mixins/_buttons.scss | 29 ++--------- _src/_assets/styles/bigchain/_team.scss | 9 +++- _src/_assets/styles/bigchain/_typography.scss | 2 + _src/_assets/styles/bigchain/_variables.scss | 36 ++++++-------- _src/_assets/styles/page-community.scss | 9 +--- _src/_assets/styles/page-front.scss | 20 +------- _src/_data/colors.yml | 2 +- _src/community.html | 10 ++-- _src/features.html | 6 +-- _src/index.html | 2 +- _src/styleguide.md | 18 ------- 14 files changed, 84 insertions(+), 127 deletions(-) diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index 03695d8..0ac559b 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -16,11 +16,12 @@ cursor: pointer; user-select: none; border: none; + box-shadow: none; @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); &:hover, &:focus { - box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .15); + box-shadow: 0 1px 4px rgba($brand-main-blue-dark, .4); transform: translateY(-1px); } @@ -29,7 +30,7 @@ background-image: none; outline: 0; transform: translateY(0); - box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .05); + box-shadow: 0 1px 2px rgba($brand-main-blue-dark, .3); } &.disabled, &:disabled { @@ -37,6 +38,13 @@ opacity: 0.65; box-shadow: none; } + + .icon { + width: $font-size-base; + height: $font-size-base; + margin-right: .25rem; + margin-bottom: -1px; + } } // Future-proof disabling of clicks on `` elements @@ -67,25 +75,6 @@ fieldset[disabled] a.btn { @include button-variant($btn-danger-color, $btn-danger-bg); } -// Remove all backgrounds -.btn-primary-outline { - @include button-outline-variant($btn-primary-bg); -} -.btn-secondary-outline { - @include button-outline-variant($btn-secondary); -} -.btn-info-outline { - @include button-outline-variant($btn-info-bg); -} -.btn-success-outline { - @include button-outline-variant($btn-success-bg); -} -.btn-warning-outline { - @include button-outline-variant($btn-warning-bg); -} -.btn-danger-outline { - @include button-outline-variant($btn-danger-bg); -} // // Link buttons @@ -108,26 +97,42 @@ fieldset[disabled] a.btn { &:active { border-color: transparent; box-shadow: none; - + background: none; } &:disabled { } } + // // Button Sizes // .btn-lg { // line-height: ensure even-numbered height of button next to large input @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); + + .icon { + width: $font-size-lg; + height: $font-size-lg; + } } .btn-sm { // line-height: ensure proper height of button next to small input @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); + + .icon { + width: $font-size-sm; + height: $font-size-sm; + } } .btn-xs { // line-height: ensure proper height of button next to small input @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $line-height-xs, $btn-border-radius-xs); + + .icon { + width: $font-size-xs; + height: $font-size-xs; + } } // diff --git a/_src/_assets/styles/bigchain/_forms.scss b/_src/_assets/styles/bigchain/_forms.scss index 3ae23af..aff9f39 100644 --- a/_src/_assets/styles/bigchain/_forms.scss +++ b/_src/_assets/styles/bigchain/_forms.scss @@ -48,6 +48,10 @@ &:disabled { cursor: disabled; } + + .background--photo & { + border-bottom-color: rgba(#fff, .5); + } } @@ -67,6 +71,10 @@ font-size: $font-size-base; line-height: $line-height; color: $input-color-placeholder; + + .background--photo & { + color: rgba(#fff, .5); + } } .form-control { diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss index 5368fe4..3c6ce26 100644 --- a/_src/_assets/styles/bigchain/_menus.scss +++ b/_src/_assets/styles/bigchain/_menus.scss @@ -19,6 +19,7 @@ display: inline-block; padding: $spacer; text-transform: uppercase; + box-shadow: none; @media ($screen-md) { padding: ($spacer * 1.5) $spacer; @@ -41,6 +42,7 @@ &:hover, &:focus, &.active { + background: transparent; // show link line &:after { transform: scale(1); } } @@ -49,6 +51,7 @@ .menu__logo { display: block; margin-top: $spacer; + box-shadow: none; @media ($screen-md) { display: inline-block; @@ -61,9 +64,11 @@ opacity: .8; } - &:hover svg, - &:focus svg { - opacity: 1; + &:hover, + &:focus { + background: transparent; + + svg { opacity: 1; } } } diff --git a/_src/_assets/styles/bigchain/_mixins/_buttons.scss b/_src/_assets/styles/bigchain/_mixins/_buttons.scss index 4da6398..372e319 100644 --- a/_src/_assets/styles/bigchain/_mixins/_buttons.scss +++ b/_src/_assets/styles/bigchain/_mixins/_buttons.scss @@ -2,7 +2,7 @@ // Button variants // @mixin button-variant($color, $background) { - $active-background: darken($background, 5%); + $active-background: lighten($background, 5%); color: $color !important; background: $background; @@ -13,7 +13,7 @@ } &:active { color: $color !important; - background: darken($background, 10%); + background: darken($background, 2%); transition: none; } &.disabled, @@ -22,31 +22,8 @@ background-color: $background; } } -} -@mixin button-outline-variant($color) { - color: $color; - background-image: none; - background-color: transparent; - border: 1px solid $color; - &:hover, - &:focus { - background-color: $color; - border-color: $color; - color: #fff; - } - - &:active { - background-color: darken($color, 10%); - border-color: darken($color, 10%); - } - - &.disabled, - &:disabled { - &:focus { - border-color: lighten($color, 20%); - } - } + .icon { fill: $color; } } // Button sizes diff --git a/_src/_assets/styles/bigchain/_team.scss b/_src/_assets/styles/bigchain/_team.scss index 5527fb2..97217fe 100644 --- a/_src/_assets/styles/bigchain/_team.scss +++ b/_src/_assets/styles/bigchain/_team.scss @@ -43,8 +43,15 @@ .team__social__link { display: inline-block; margin: 0 ($spacer / 4); + box-shadow: none; + + &, + &:hover, + &:focus { + background: transparent; + } .icon { - fill: rgba($link-color, .4); + fill: $brand-primary; } } diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss index 502e7aa..9331ab2 100644 --- a/_src/_assets/styles/bigchain/_typography.scss +++ b/_src/_assets/styles/bigchain/_typography.scss @@ -55,10 +55,12 @@ a { @extend .transition; color: $link-color; text-decoration: none; + box-shadow: inset 0 -2px 0 $brand-primary; &:hover, &:focus { color: $link-hover-color; + background: $link-hover-bg; } &:active {} diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 4ce8ee5..e5fdd59 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -10,7 +10,7 @@ $brand-main-blue: #074354 !default; $brand-main-blue-light: #BFE6EC !default; $brand-main-blue-dark: #101A25 !default; -$brand-main-violet: #D98FD9 !default; +$brand-main-violet: #d37cd3 !default; $brand-main-gray: #70859B !default; $gray-darker: darken($brand-main-gray, 25%) !default; @@ -24,7 +24,7 @@ $brand-primary: $brand-main-violet !default; $brand-success: #388250 !default; $brand-info: #3E91CE !default; $brand-warning: #8E8E24 !default; -$brand-danger: #8F3B39 !default; +$brand-danger: #c9726a !default; // @@ -69,8 +69,9 @@ $headings-color: $brand-main-blue-light !default; $body-bg: $gray-dark !default; $text-color: $gray-lightest !default; -$link-color: $brand-primary !default; -$link-hover-color: lighten($link-color, 15%) !default; +$link-color: inherit !default; +$link-hover-color: #fff !default; +$link-hover-bg: rgba($brand-primary, .8) !default; // @@ -90,8 +91,8 @@ $screen-lg: 'min-width: #{$screen-lg-min}'; // $spacer: 1rem !default; $line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; -$line-height-xs: 1.5 !default; +$line-height-sm: 1.3 !default; +$line-height-xs: 1.2 !default; $border-radius: .15rem !default; $border-radius-lg: .2rem !default; @@ -128,33 +129,26 @@ $pre-scrollable-max-height: 340px !default; $btn-font-family: $font-family-avenir; $btn-font-weight: $font-weight-normal !default; -$btn-padding-x: 1.5rem !default; -$btn-padding-y: .375rem !default; +$btn-padding-x: 2rem !default; +$btn-padding-y: .5rem !default; $btn-primary-color: #fff !default; -$btn-primary-bg: $link-color !default; -$btn-primary-border: $link-color !default; +$btn-primary-bg: $brand-primary !default; -$btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: $gray-lightest !default; - -$btn-secondary: $gray-light !default; +$btn-secondary-color: #fff !default; +$btn-secondary-bg: $brand-main-gray !default; $btn-info-color: #fff !default; $btn-info-bg: $brand-info !default; -$btn-info-border: $btn-info-bg !default; $btn-success-color: #fff !default; $btn-success-bg: $brand-success !default; -$btn-success-border: $btn-success-bg !default; $btn-warning-color: #fff !default; $btn-warning-bg: $brand-warning !default; -$btn-warning-border: $btn-warning-bg !default; $btn-danger-color: #fff !default; $btn-danger-bg: $brand-danger !default; -$btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; @@ -162,10 +156,10 @@ $btn-padding-x-xs: .75rem !default; $btn-padding-y-xs: .15rem !default; $btn-padding-x-sm: 1.25rem !default; -$btn-padding-y-sm: .25rem !default; +$btn-padding-y-sm: .4rem !default; -$btn-padding-x-lg: 1.75rem !default; -$btn-padding-y-lg: .75rem !default; +$btn-padding-x-lg: 3rem !default; +$btn-padding-y-lg: 1rem !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; diff --git a/_src/_assets/styles/page-community.scss b/_src/_assets/styles/page-community.scss index a20a764..90cdb93 100644 --- a/_src/_assets/styles/page-community.scss +++ b/_src/_assets/styles/page-community.scss @@ -5,8 +5,8 @@ // .page-community { .header { - background: url('../img/photo2.jpg') no-repeat center top; - background-size: cover; + background-image: url('../img/photo2.jpg'); + background-position: center top; } } @@ -17,11 +17,6 @@ .section-community { .grid h1 { @extend .h3; } - - .icon--social { - width: 2rem; - height: 2rem; - } } .section-conduct { diff --git a/_src/_assets/styles/page-front.scss b/_src/_assets/styles/page-front.scss index ba120b0..9da7485 100644 --- a/_src/_assets/styles/page-front.scss +++ b/_src/_assets/styles/page-front.scss @@ -21,25 +21,7 @@ } .section-whitepaper { - - a { - @extend .transition; - display: block; - text-align: center; - - &:hover, - &:focus { - transform: scale(1.05); - } - } - - .icon { - stroke: $link-color; - stroke-width: 2; - display: block; - margin: auto; - margin-bottom: $spacer; - } + @extend .text-center; } diff --git a/_src/_data/colors.yml b/_src/_data/colors.yml index 9cb3c6d..4cba1db 100644 --- a/_src/_data/colors.yml +++ b/_src/_data/colors.yml @@ -6,7 +6,7 @@ primary: - name: brand-main-blue hex: 275B82 - name: brand-main-violet - hex: D98FD9 + hex: d37cd3 - name: brand-main-blue-dark hex: 101A25 - name: brand-main-blue-light diff --git a/_src/community.html b/_src/community.html index 126a172..d448fb4 100644 --- a/_src/community.html +++ b/_src/community.html @@ -14,17 +14,17 @@ title: Community

Google Group

Participate in our Google Group

-
Bigchain Google Group + Bigchain Google Group

Social

Follow us for the latest updates

- -

@@ -40,7 +40,7 @@ title: Community

- Read Code of Conduct + Read Code of Conduct

diff --git a/_src/features.html b/_src/features.html index 7705bfa..a00e590 100644 --- a/_src/features.html +++ b/_src/features.html @@ -52,8 +52,8 @@ title: Features Open source, public version for the world and a private one for specific industry use cases.

-

- For more insight, read our whitepaper. +

+ For more insight, read our whitepaper.

@@ -63,7 +63,7 @@ title: Features

Timeline.

-

Private beta is shipping now. Contact us more information. Public Bigchain will be released soon

+

Private beta is shipping now. Contact us for more information. Public Bigchain will be released soon

diff --git a/_src/index.html b/_src/index.html index 0dbd665..caee145 100644 --- a/_src/index.html +++ b/_src/index.html @@ -84,7 +84,7 @@ tagline: 'Meet Bigchain, the world’s most scalable blockchain'

Whitepaper

- + diff --git a/_src/styleguide.md b/_src/styleguide.md index 88830c7..f004e7a 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -150,24 +150,6 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo Button ``` -Button Button Button Button - -```html -Button -Button -Button -Button -``` - -Button Button Button Button - -```html -Button -Button -Button -Button -``` - Button Button Button Button ```html