From 384da3702eb0ee18dbe0d7d7bf656c23a86e9bd3 Mon Sep 17 00:00:00 2001
From: Jesper Hess Nielsen <jesper@graffen.dk>
Date: Sun, 29 Jan 2017 10:28:23 +0100
Subject: [PATCH] Fix data.coop banner for small screens

Added a mixin for small/large screens to move the banner to the top when being shown on smaller displays.
---
 _includes/datacoopbanner.html |  3 +--
 _sass/banners.scss            | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/_includes/datacoopbanner.html b/_includes/datacoopbanner.html
index ddadc2f..0e72bb8 100644
--- a/_includes/datacoopbanner.html
+++ b/_includes/datacoopbanner.html
@@ -1,2 +1 @@
-<div class="ribbonbanner shadow">Brought to you by <br />
-<a href="https://data.coop">data.coop</a></div>
\ No newline at end of file
+<div class="ribbonbanner">Brought to you by <a href="https://data.coop">data.coop</a></div>
\ No newline at end of file
diff --git a/_sass/banners.scss b/_sass/banners.scss
index e588685..350239e 100644
--- a/_sass/banners.scss
+++ b/_sass/banners.scss
@@ -1,13 +1,36 @@
+@mixin large {
+  @media screen and (min-width: #{$large-breakpoint}) {
+    @content;
+  }
+}
+
+@mixin small {
+  @media screen and (max-width: #{$large-breakpoint}) {
+    @content;
+  }
+}
+
+
 .ribbonbanner {
-    padding: 10px 55px;
+    @include large {
+        padding: 10px 55px;
+        transform: rotate(-45deg);
+        top: 28px;
+        left: -60px;
+        width: 250px;
+    }
+
+    @include small {
+        padding: 3px 0;
+        top: 0px;
+        width: 100%;
+    }
+
     text-align: center;
     position: absolute;
     color: $header-heading-color;
     background-color: $header-bg-color;
-    transform: rotate(-45deg);
-    top: 28px;
-    left: -60px;
-
+    box-shadow: 0 0 3px rgba(0,0,0,0.3);
     a {
         color: $header-heading-color;
         text-decoration: underline;