Merge pull request #178 from ascribe/feature/oceanbanner

add Ocean banner

_src/_assets/styles/_9984.scss

@@ -17,17 +17,18 @@ $font-family-silkscreen:    silkscreennormal, monospace !default;
 
 
 .banner--ninenine {
-    text-align: center;
+    display: block;
     background: $brand-9984-03;
     font-family: $font-family-silkscreen;
     font-weight: $font-weight-normal;
     font-style: normal;
-    padding-top: $spacer;
-    padding-bottom: $spacer;
-
-    @media ($screen-sm) {
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
+    box-shadow: none;
+
+    @media ($screen-sm) {
+        padding-top: $spacer / 3;
+        padding-bottom: $spacer / 3;
     }
 
     &,
@@ -56,7 +57,7 @@ $font-family-silkscreen:    silkscreennormal, monospace !default;
 
 .ninenine__title,
 .ninenine__meta {
-    font-size: .8rem;
+    font-size: .7rem;
     line-height: $line-height;
     margin: 0;
     color: $brand-9984-04;
@@ -71,14 +72,13 @@ $font-family-silkscreen:    silkscreennormal, monospace !default;
     box-shadow: none;
     color: $brand-9984-04;
     background: $brand-9984-01;
-    padding: $spacer / 5 $spacer / 4;
+    padding: 0 $spacer / 4;
     display: block;
-    margin-top: $spacer / 2;
+    margin-top: $spacer / 6;
+    font-size: .65rem;
 
     @media ($screen-sm) {
-        display: inline;
+        display: inline-block;
-        margin-top: 0;
-        margin-left: $spacer / 2;
     }
 }
 

_src/_assets/styles/_oceanprotocol.scss

@@ -0,0 +1,44 @@
+.banner--ocean {
+    display: block;
+    box-shadow: none;
+    height: 100%;
+    background: #000;
+    padding-top: $spacer / 2;
+    padding-bottom: $spacer / 2;
+
+    &:hover,
+    &:focus {
+        background: #fff;
+
+        .ocean__title {
+            opacity: 1;
+            color: #000;
+        }
+
+        .ocean__logo {
+            fill: #000;
+        }
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+}
+
+.ocean__title {
+    font-size: .8rem;
+    margin: 0;
+    opacity: .8;
+    color: #fff;
+}
+
+.ocean__logo {
+    fill: #fff;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-right: $spacer / 4;
+    margin-bottom: -.4rem;
+    display: inline-block;
+}

_src/_assets/styles/bigchain.scss

@@ -64,3 +64,4 @@
 @import 'page-faq';
 @import 'ipdb';
 @import '9984';
+@import 'oceanprotocol';

_src/_includes/9984.html

@@ -1,9 +0,0 @@
-<aside class="banner--ninenine ninenine">
-    <a href="https://2017.9984.io/?utm_source=bigchaindb.com&utm_medium=banner&utm_campaign=9984_banner">
-        <div class="row row--wide">
-            <h1 class="ninenine__title">9984 <em class="divider--9984">>></em> SUMMIT <span class="ninenine__tagline"><em class="divider--9984slashes">//</em> Blockchain Futures for Developers, Enterprises &amp; Society</span></h1>
-
-            <h2 class="ninenine__meta">October 5 - 6, 2017 <em class="divider--9984slashes">//</em> Berlin, Germany <span class="ninenine__action">Get your ticket now</span></h2>
-        </div>
-    </a>
-</aside>

_src/_includes/banner.html

@@ -0,0 +1,26 @@
+<aside class="banner">
+
+    <div class="grid grid--full grid-small--half">
+        <div class="grid__col">
+            <a class="banner--ocean ocean" href="https://oceanprotocol.com/?utm_source=bigchaindb.com&utm_medium=banner&utm_campaign=ocean_banner">
+                <div class="row row--wide">
+                    <h1 class="ocean__title">
+                        <svg class="ocean__logo">
+                            <use xlink:href="/assets/img/sprite.svg#logo-oceanprotocol"></use>
+                        </svg>
+                        Meet Ocean. A Decentralized Data Exchange Protocol</h1>
+                </div>
+            </a>
+        </div>
+
+        <div class="grid__col">
+            <a class="banner--ninenine ninenine" href="https://2017.9984.io/?utm_source=bigchaindb.com&utm_medium=banner&utm_campaign=9984_banner">
+                <div class="row row--wide">
+                    <h1 class="ninenine__title">9984 <em class="divider--9984">>></em> SUMMIT <em class="divider--9984slashes">//</em> October 5 - 6, 2017 <em class="divider--9984slashes">//</em> Berlin, Germany</h1>
+                    <h2 class="ninenine__meta"><span class="ninenine__action">Get your ticket now</span></h2>
+                </div>
+            </a>
+        </div>
+    </div>
+
+</aside>

_src/_layouts/base.html

@@ -13,7 +13,7 @@
         </div>
         <![endif]-->
 
-        {% include 9984.html %}
+        {% include banner.html %}
 
         {{ content }}