style the banner

_src/_assets/styles/bigchain.scss

@@ -38,6 +38,7 @@
 @import 'bigchain/terminal';
 @import 'bigchain/nyan';
 @import 'bigchain/dropdowns';
+@import 'bigchain/cookie-banner';
 @import 'bigchain/utilities';
 
 // Content types

_src/_assets/styles/bigchain/_cookie-banner.scss

@@ -0,0 +1,59 @@
+.cookie-banner {
+    position: fixed;
+    bottom: $spacer / 2;
+    z-index: 10;
+    background: rgba($brand-main-blue-dark, .6);
+    backdrop-filter: saturate(150%) blur(10px);
+    font-size: $font-size-sm;
+    padding: $spacer / 2 $spacer;
+    text-align: center;
+    max-width: 36rem;
+    border-radius: $border-radius;
+    transition: opacity .6s ease-out;
+    opacity: 0;
+    transition-delay: 3s;
+
+    .wf-active &,
+    .wf-inactive & {
+        opacity: 1;
+    }
+
+    p {
+        margin-bottom: $spacer / 2;
+
+        &:first-child {
+            opacity: .8;
+        }
+    }
+
+    @media ($screen-sm) {
+        left: 50%;
+        margin-left: -18rem;
+        text-align: left;
+        justify-content: space-between;
+        align-items: center;
+
+        p {
+            margin: 0;
+
+            &:first-child {
+                flex: 0 0 75%;
+            }
+
+            &:last-child {
+                flex: 0 0 22%;
+                text-align: right;
+            }
+        }
+
+        .btn {
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+
+        &[style='display: block;'] { // work around plugin style injection
+            display: flex !important; // stylelint-disable-line declaration-no-important
+        }
+    }
+}

_src/_includes/cookie-banner.html

@@ -1,6 +1,10 @@
-<div id="cookies-eu-banner" style="display: none;">
+<div class="cookie-banner" id="cookies-eu-banner" style="display: none;">
-    By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.
+    <p>
-    <a href="./read-more.html" id="cookies-eu-more">Read more</a>
+        By continuing your visit to this site, you accept the use of cookies from Google Analytics so we can improve the site for you.
-    <button id="cookies-eu-reject">Reject</button>
+        <a href="{% link privacy.md %}" id="cookies-eu-more">Read more</a>
-    <button id="cookies-eu-accept">Accept</button>
+    </p>
+    <p>
+        <button class="btn btn-xs btn-secondary" id="cookies-eu-accept">Accept</button>
+        <button class="btn btn-xs btn-link" id="cookies-eu-reject">Reject</button>
+    </p>
 </div>

_src/_includes/scripts.html

@@ -3,9 +3,13 @@
 // Site scripts
 //
 -->
-<script src="/assets/js/bigchain.min.js"></script> {% if page.js %}
+<script src="/assets/js/bigchain.min.js"></script>
-<script src="/assets/js/{{ page.js }}"></script> {% elsif layout.js %}
+
-<script src="/assets/js/{{ layout.js }}"></script> {% endif %}
+{% if page.js %}
+    <script src="/assets/js/{{ page.js }}"></script>
+{% elsif layout.js %}
+    <script src="/assets/js/{{ layout.js }}"></script>
+{% endif %}
 
 <!--
 svg4everybody.js

_src/_layouts/base.html

@@ -15,7 +15,7 @@
 
         {{ content }}
 
-         {% include banner.html %}
+        {% include banner.html %}
 
         {% include footer.html %}