unify photo backgrounds/color overlays

Gemfile

@@ -4,7 +4,3 @@ group :jekyll do
     gem 'jekyll'
     gem 'jekyll-sitemap'
 end
-
-group :development do
-    gem 'redcarpet'
-end

_config.yml

@@ -30,7 +30,7 @@ permalink:              /:title/
 
 # Content Parsing
 # --------------------
-#markdown:               kramdown
+markdown:               kramdown
 
 kramdown:
     input: GFM

_src/_assets/styles/bigchain/_header.scss

@@ -1,30 +1,11 @@
 .header {
-    position: relative;
+    @extend .background--photo;
-
+    background-position: bottom;
-    // 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;
-    }
 }
 
 .header__title {
     position: relative;
     z-index: 1;
-    color: #fff;
     text-align: center;
     margin: 0;
     padding: ($spacer * 4) 0;

_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 }

_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;

_src/_assets/styles/bigchain/_mixins.scss

@@ -6,3 +6,4 @@
 
 @import "_mixins/_buttons";
 @import "_mixins/_alerts";
+@import "_mixins/_color-overlay";

_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();
+}

_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;
+    }
+}

_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;

_src/_assets/styles/page-community.scss

@@ -25,31 +25,5 @@
 }
 
 .section-conduct {
-    position: relative;
+    @extend .background--photo;
-
-    // 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;
-    }
 }

_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 {
-
-    }
 }

_src/features.html

@@ -59,7 +59,7 @@ title: Features
 </section>
 
 
-<section class="section section-timeline">
+<section class="section section-timeline background--photo">
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Timeline.</h1>

_src/index.html

@@ -93,7 +93,7 @@ tagline:    'Meet Bigchain, the world’s most scalable blockchain'
     </div>
 </section>
 
-<section id="earlyaccess" class="section section-earlyaccess background--darker">
+<section id="earlyaccess" class="section section-earlyaccess background--photo">
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Sign Up for Early Access</h1>

_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