From ea35b337fface4ceef7487f1cd6ad8fbcddc6212 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 29 Jan 2016 18:45:09 +0100 Subject: [PATCH] unify photo backgrounds/color overlays --- Gemfile | 4 --- _config.yml | 2 +- _src/_assets/styles/bigchain/_header.scss | 23 ++------------- _src/_assets/styles/bigchain/_hero.scss | 23 +-------------- _src/_assets/styles/bigchain/_icons.scss | 2 +- _src/_assets/styles/bigchain/_mixins.scss | 1 + .../bigchain/_mixins/_color-overlay.scss | 25 +++++++++++++++++ _src/_assets/styles/bigchain/_sections.scss | 19 +++++++++++++ _src/_assets/styles/bigchain/_variables.scss | 2 +- _src/_assets/styles/page-community.scss | 28 +------------------ _src/_assets/styles/page-features.scss | 28 ------------------- _src/features.html | 2 +- _src/index.html | 2 +- _src/styleguide.md | 3 ++ 14 files changed, 57 insertions(+), 107 deletions(-) create mode 100644 _src/_assets/styles/bigchain/_mixins/_color-overlay.scss diff --git a/Gemfile b/Gemfile index e309e6c..7068c75 100644 --- a/Gemfile +++ b/Gemfile @@ -4,7 +4,3 @@ group :jekyll do gem 'jekyll' gem 'jekyll-sitemap' end - -group :development do - gem 'redcarpet' -end diff --git a/_config.yml b/_config.yml index 04c972e..7f70523 100644 --- a/_config.yml +++ b/_config.yml @@ -30,7 +30,7 @@ permalink: /:title/ # Content Parsing # -------------------- -#markdown: kramdown +markdown: kramdown kramdown: input: GFM diff --git a/_src/_assets/styles/bigchain/_header.scss b/_src/_assets/styles/bigchain/_header.scss index 7a6c35c..c180a50 100644 --- a/_src/_assets/styles/bigchain/_header.scss +++ b/_src/_assets/styles/bigchain/_header.scss @@ -1,30 +1,11 @@ .header { - position: relative; - - // background - 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: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-blue-dark 100%); - opacity: .7; - z-index: 0; - } + @extend .background--photo; + background-position: bottom; } .header__title { position: relative; z-index: 1; - color: #fff; text-align: center; margin: 0; padding: ($spacer * 4) 0; diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss index bdd761a..b1594a3 100644 --- a/_src/_assets/styles/bigchain/_hero.scss +++ b/_src/_assets/styles/bigchain/_hero.scss @@ -7,10 +7,10 @@ $menu-height-md: 73px; .hero { + @extend .background--photo; text-align: center; overflow: hidden; position: relative; - text-shadow: 0 1px 0 rgba(0,0,0,.1); .section { @media ($screen-md) { @@ -18,27 +18,7 @@ $menu-height-md: 73px; } } - // background - 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: linear-gradient(to top left, $gray-dark 0%, $gray 100%); - opacity: .7; - z-index: 0; - } - .logo--full { - fill: #fff; fill-opacity: .8; margin: auto; max-width: 31em; @@ -50,7 +30,6 @@ $menu-height-md: 73px; } .section-title { - color: #fff; margin-bottom: $spacer; &:after { display: none } diff --git a/_src/_assets/styles/bigchain/_icons.scss b/_src/_assets/styles/bigchain/_icons.scss index 659cc3c..ea085c2 100644 --- a/_src/_assets/styles/bigchain/_icons.scss +++ b/_src/_assets/styles/bigchain/_icons.scss @@ -1,7 +1,7 @@ .icon { fill: none; - stroke: $headings-color; + stroke: $brand-main-violet; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; diff --git a/_src/_assets/styles/bigchain/_mixins.scss b/_src/_assets/styles/bigchain/_mixins.scss index d008724..8fa5f53 100644 --- a/_src/_assets/styles/bigchain/_mixins.scss +++ b/_src/_assets/styles/bigchain/_mixins.scss @@ -6,3 +6,4 @@ @import "_mixins/_buttons"; @import "_mixins/_alerts"; +@import "_mixins/_color-overlay"; diff --git a/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss b/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss new file mode 100644 index 0000000..fdfb39d --- /dev/null +++ b/_src/_assets/styles/bigchain/_mixins/_color-overlay.scss @@ -0,0 +1,25 @@ + +@mixin color-overlay($color-from: $brand-main-blue, $color-to: $brand-main-violet) { + position: relative; + + // color overlay + &:before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: linear-gradient(to bottom right, $color-from 0%, $color-to 100%); + opacity: .7; + z-index: 0; + } + + .row { z-index: 1 } +} + +.color-overlay { + @include color-overlay(); +} diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/bigchain/_sections.scss index 069b1a3..5b99dee 100644 --- a/_src/_assets/styles/bigchain/_sections.scss +++ b/_src/_assets/styles/bigchain/_sections.scss @@ -96,3 +96,22 @@ .background--gray { background: $brand-main-gray; } + + +// +// Photo background +// +.background--photo { + @extend .color-overlay; + text-shadow: 0 1px 0 rgba(0,0,0,.1); + + // background + background: url('../img/photo1.jpg') no-repeat center top; + background-size: cover; + + .section-title, + .section-description, + .header__title { + //color: #fff; + } +} diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 25a83cc..4ce8ee5 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -67,7 +67,7 @@ $headings-color: $brand-main-blue-light !default; // Scaffolding // $body-bg: $gray-dark !default; -$text-color: $gray-lighter !default; +$text-color: $gray-lightest !default; $link-color: $brand-primary !default; $link-hover-color: lighten($link-color, 15%) !default; diff --git a/_src/_assets/styles/page-community.scss b/_src/_assets/styles/page-community.scss index 387adfd..a20a764 100644 --- a/_src/_assets/styles/page-community.scss +++ b/_src/_assets/styles/page-community.scss @@ -25,31 +25,5 @@ } .section-conduct { - position: relative; - - // background - background: url('../img/photo1.jpg') no-repeat center top; - background-size: cover; - - // color overlay - &:before { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-violet 100%); - opacity: .7; - z-index: 0; - } - - .row { z-index: 1 } - - .section-title, - .section-description { - color: #fff; - } + @extend .background--photo; } diff --git a/_src/_assets/styles/page-features.scss b/_src/_assets/styles/page-features.scss index e821967..59cf129 100644 --- a/_src/_assets/styles/page-features.scss +++ b/_src/_assets/styles/page-features.scss @@ -22,36 +22,8 @@ .section-timeline { - position: relative; - // background - background: url('../img/photo1.jpg') no-repeat center top; - background-size: cover; - - // color overlay - &:before { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-violet 100%); - opacity: .7; - z-index: 0; - } - - .row { z-index: 1 } - - .section-title, - .section-description, .timeline { color: #fff; } - - .timeline { - - } } diff --git a/_src/features.html b/_src/features.html index af4951d..7705bfa 100644 --- a/_src/features.html +++ b/_src/features.html @@ -59,7 +59,7 @@ title: Features -
+

Timeline.

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

Sign Up for Early Access

diff --git a/_src/styleguide.md b/_src/styleguide.md index 62b3f4d..88830c7 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -109,8 +109,11 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo ## Headings # Heading 1 + ## Heading 2 + ### Heading 3 + #### Heading 4