First version of ecobookstore billboard

app/assets/stylesheets/billboards/_billboard-ecobookstore.scss

@@ -0,0 +1,171 @@
+/**
+ * Ecobookstore billboard
+ */
+
+
+// General stuff
+#billboard-ecobookstore > article h2 {
+  font-weight: 600;
+  color: #4f2e28;
+  text-transform: uppercase;
+  text-align: right;
+}
+
+#billboard-ecobookstore > article h3 {
+  color: #9e0013;
+  text-align: right;
+}
+
+#billboard-ecobookstore > article > ul > li p {
+  text-align: left;
+  font-weight: 600;
+  font-size: 18px;
+  color: #428fbd;
+}
+
+
+// Responsive code: small version
+@include till-breakpoint($bp-tablet) {
+  #billboard-ecobookstore {
+    background-image: image-url('welcome/billboard_ecobookstore_small.jpg');
+  }
+
+  #billboard-ecobookstore > article h2 {
+    display: none;
+  }
+
+  #billboard-ecobookstore > article h3 {
+    @include static-position($top: 17px, $right: 30px, $width: 150px);
+    font-size: 18px;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-align: center;
+  }
+
+  #billboard-ecobookstore > article > ul > li p {
+    font-size: 14px;
+
+    &:after {
+      content: ' >';
+    }
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link1 div {
+    @include static-position($top: 295px, $left: 30px, $height: 110px, $width: 130px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link2 div {
+    @include static-position($top: 70px, $left: 10px, $height: 90px, $width: 50px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link3 div {
+    @include static-position($top: 180px, $left: 5px, $height: 100px, $width: 105px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link1 p {
+    @include static-position($top: 331px, $left: 133px, $height: 23px, $width: 61px);
+    padding: 4px 0 0 7px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link2 p {
+    @include static-position($top: 86px, $left: 50px, $height: 26px, $width: 146px);
+    padding: 5px 0 0 7px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link3 p {
+    @include static-position($top: 202px, $left: 88px, $height: 25px, $width: 106px);
+    padding: 5px 0 0 8px;
+  }
+
+
+}
+
+
+// Responsive code: medium version
+@include between-breakpoints($bp-tablet, $bp-tablet-horizontal) {
+  #billboard-ecobookstore {
+    background-image: image-url('welcome/billboard_ecobookstore_medium.jpg');
+  }
+
+  #billboard-ecobookstore > article h2 {
+    @include static-position($top: 20px, $right: 25px, $width: 450px);
+    font-size: 20px;
+  }
+
+  #billboard-ecobookstore > article h3 {
+    @include static-position($top: 50px, $right: 25px, $width: 250px);
+    font-size: 18px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link1 div {
+    @include static-position($top: 295px, $left: 50px, $height: 115px, $width: 160px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link2 div {
+    @include static-position($top: 183px, $left: 164px, $height: 100px, $width: 60px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link3 div {
+    @include static-position($top: 60px, $left: 15px, $height: 120px, $width: 135px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link1 p {
+    @include static-position($top: 324px, $left: 254px, $height: 29px, $width: 83px);
+    padding: 5px 0 0 11px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link2 p {
+    @include static-position($top: 220px, $left: 245px, $height: 29px, $width: 185px);
+    padding: 5px 0 0 9px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link3 p {
+    @include static-position($top: 105px, $left: 179px, $height: 30px, $width: 136px);
+    padding: 4px 0 0 11px;
+  }
+}
+
+
+// Responsive code: big version
+@include at-breakpoint($bp-tablet-horizontal) {
+  #billboard-ecobookstore {
+    background-image: image-url('welcome/billboard_ecobookstore_big.jpg');
+  }
+
+  #billboard-ecobookstore > article h2 {
+    @include static-position($top: 27px, $right: 5px, $width: 650px);
+    font-size: 30px;
+  }
+
+  #billboard-ecobookstore > article h3 {
+    @include static-position($top: 67px, $right: 5px, $width: 300px);
+    font-size: 24px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link1 div {
+    @include static-position($top: 185px, $left: 545px, $height: 225px, $width: 150px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link2 div {
+    @include static-position($top: 173px, $left: 313px, $height: 120px, $width: 180px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link3 div {
+    @include static-position($top: 85px, $left: 125px, $height: 210px, $width: 145px);
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link1 p {
+    @include static-position($top: 341px, $left: 481px, $height: 28px, $width: 84px);
+    padding: 5px 0 0 11px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link2 p {
+    @include static-position($top: 147px, $left: 392px, $height: 29px, $width: 184px);
+    padding: 5px 0 0 10px;
+  }
+
+  #billboard-ecobookstore > article > ul > li#billboard-ecobookstore-link3 p {
+    @include static-position($top: 158px, $left: 14px, $height: 30px, $width: 136px);
+    padding: 4px 0 0 11px;
+  }
+}

app/assets/stylesheets/controller/welcome.css.scss

@@ -1,4 +1,5 @@
 @import "mixins/all";
+@import "billboards/billboard-ecobookstore";
 @import "billboards/billboard-books";
 @import "billboards/billboard-gourmet";
 @import "billboards/billboard-vintage";

app/views/welcome/index.html.slim

@@ -39,6 +39,23 @@
           span.slides-arrow.slides-arrow--right
             i.fa.fa-chevron-right
 
+        / Ecobookstore
+        .billboard#billboard-ecobookstore
+          article
+            = link_to 'categories/bucher' do
+              hgroup
+                h2 Ab sofort bei unserem Händler:
+                h3 ecobookstore.de
+              p Jetzt stöbern
+            p Alle Bücher, Filme, Audio-CDs und Spiele <span>versandkostenfrei</span> und CO<sup>2</sup>-neutral liefern lassen.
+            p Ein Anteil des Umsatzes wird für den Regenwald gespendet.
+            ul
+              li#billboard-ecobookstore-link1
+                = link_to 'categories/bucher' do
+                  div
+                  div
+                  div
+
         / Bücher
         .billboard#billboard-books
           article