assets cleanup for smaller page sizes

* isolate some SVGs and don't include in sprite
* use smaller, cropped image for all default headers

_config.yml

@@ -40,7 +40,7 @@ social:
         url:    https://www.linkedin.com/company/bigchaindb
     youtube:
         title:  YouTube
-        url:    https://www.youtube.com/channel/UCh0Y3p3kJ9oyz9CRgZaO05w
+        url:    https://www.youtube.com/bigchaindb
 
 address:
     company:            BigchainDB GmbH

_src/_assets/javascripts/page-getstarted.js

@@ -46,6 +46,7 @@ stickyNav()
 // BigchainDB transaction tool
 //
 
+// makes this file huuuuge, consider loading this as additional request
 //=include bigchaindb-driver/dist/browser/bigchaindb-driver.window.min.js
 
 window.addEventListener('DOMContentLoaded', function domload(event) {

_src/_assets/styles/bigchain/_header.scss

@@ -1,5 +1,7 @@
 .header {
     @extend .background--photo;
+    background-image: url('../img/header-berlin.jpg');
+    background-position: center bottom;
 }
 
 .header__content {

_src/features.html

@@ -154,14 +154,14 @@ js: page-features.min.js
                 <h2 class="stacks__title">Traditional Stack</h2>
                 <figure class="stacks__image">
                     <figcaption>BigchainDB can be seamlessly integrated into the traditional stack as a blockchain database for decentralized timestamping, certificates, smart contracts and transactions.</figcaption>
-                    <img class="img--responsive" src="/assets/img/stack-traditional.svg" />
+                    <img class="img--responsive" src="/assets/img/nosprite/stack-traditional.svg" />
                 </figure>
             </div>
             <div class="grid__col">
                 <h2 class="stacks__title">Blockchain Stack</h2>
                 <figure class="stacks__image">
                     <figcaption>BigchainDB fills a missing gap in the emerging decentralized stack as a blockchain database that complements existing platforms, processing and file systems.</figcaption>
-                    <img class="img--responsive" src="/assets/img/stack-blockchain.svg" />
+                    <img class="img--responsive" src="/assets/img/nosprite/stack-blockchain.svg" />
                 </figure>
             </div>
         </div>

_src/getstarted.html

@@ -161,7 +161,7 @@ conn.postTransaction(txSigned)
     <aside class="starbase starbase--server">
         <div class="row row--wide">
             <figure class="starbase__image">
-                <img class="img--responsive" src="/assets/img/starbase-server.svg" alt="Starbase" width="1111" height="343">
+                <img class="img--responsive" src="/assets/img/nosprite/starbase-server.svg" alt="Starbase" width="1111" height="343">
             </figure>
         </div>
     </aside>
@@ -198,7 +198,7 @@ conn.postTransaction(txSigned)
     <aside class="starbase starbase--drivers">
         <div class="row row--wide">
             <figure class="starbase__image">
-                <img class="img--responsive" src="/assets/img/starbase-drivers.svg" alt="Starbase" width="1060" height="166">
+                <img class="img--responsive" src="/assets/img/nosprite/starbase-drivers.svg" alt="Starbase" width="1060" height="166">
             </figure>
         </div>
     </aside>

gulpfile.babel.js

@@ -211,7 +211,7 @@ export const js = () =>
 //
 // SVG sprite
 //
-export const svg = () => src(SRC + '_assets/images/**/*.svg')
+export const svg = () => src(SRC + '_assets/images/*.svg')
     .pipe($.if(isProduction || isStaging, $.imagemin({
         svgoPlugins: [{ removeRasterImages: true }]
     })))