Feature/bsa (#539)

* Build bsa

* Fix placement

docs/_includes/bsa.html

@@ -0,0 +1,19 @@
+<section class="hero is-light bsa">
+  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
+  <div class="container">
+    <div class="bsa-container">
+      <div class="bsa-cpc"></div>
+    </div>
+  </div>
+  <script>
+    (function(){
+      if(typeof _bsa !== 'undefined' && _bsa) {
+      _bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
+        target: '.bsa-cpc',
+        align: 'horizontal',
+        disable_css: 'true'
+      });
+        }
+    })();
+  </script>
+</section>

docs/_includes/footer.html

@@ -1,3 +1,5 @@
+{% include bsa.html %}
+
 <section id="newsletter" class="hero is-primary">
   <div class="hero-body">
     <div class="container">

docs/bulma-docs.sass

@@ -9,6 +9,7 @@
 @import "./sass/footer"
 @import "./sass/specific"
 @import "./sass/example"
+@import "./sass/bsa"
 
 html
   \::-moz-selection

docs/css/bulma-docs.css

@@ -7686,6 +7686,86 @@ html.route-index #carbon {
   border-right: none;
 }
 
+.bsa {
+  padding: 2rem;
+}
+
+#_default_ .default-ad {
+  background-color: #00d1b2;
+  border-radius: 2px;
+  color: #fff;
+  display: inline-block;
+  font-size: 12px;
+  padding: 0 4px;
+  text-transform: uppercase;
+  vertical-align: top;
+}
+
+#_default_ > a {
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  display: block;
+  margin-top: 15px;
+  max-width: 400px;
+  padding: 15px;
+  padding-left: 70px;
+  position: relative;
+}
+
+#_default_ > a:hover, #_default_ > a:focus {
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+}
+
+#_default_ > a:active {
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
+}
+
+#_default_ > a span {
+  display: block;
+}
+
+#_default_ > a .default-image {
+  display: block;
+  left: 15px;
+  height: 40px;
+  position: absolute;
+  top: 15px;
+  width: 40px;
+}
+
+#_default_ > a .default-image img {
+  display: block;
+  height: 40px;
+  width: 40px;
+}
+
+#_default_ > a .default-title {
+  color: #363636;
+  font-weight: 700;
+}
+
+@media screen and (min-width: 769px) {
+  #_default_ {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    padding: 0 60px;
+    position: relative;
+  }
+  #_default_ .default-ad {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  #_default_ > a {
+    margin: 0 20px;
+  }
+}
+
 html ::-moz-selection {
   background: #00d1b2;
   color: #fff;

docs/sass/bsa.sass

@@ -0,0 +1,57 @@
+.bsa
+  padding: 2rem
+
+#_default_
+  .default-ad
+    background-color: $primary
+    border-radius: 2px
+    color: $primary-invert
+    display: inline-block
+    font-size: 12px
+    padding: 0 4px
+    text-transform: uppercase
+    vertical-align: top
+  & > a
+    background-color: $white
+    border-radius: $radius-large
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+    display: block
+    margin-top: 15px
+    max-width: 400px
+    padding: 15px
+    padding-left: 70px
+    position: relative
+    &:hover,
+    &:focus
+      box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+    &:active
+      box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+    span
+      display: block
+    .default-image
+      display: block
+      left: 15px
+      height: 40px
+      position: absolute
+      top: 15px
+      width: 40px
+      img
+        display: block
+        height: 40px
+        width: 40px
+    .default-title
+      color: $text-strong
+      font-weight: $weight-bold
+
++tablet
+  #_default_
+    display: flex
+    justify-content: center
+    padding: 0 60px
+    position: relative
+    .default-ad
+      position: absolute
+      right: 0
+      top: 0
+    & > a
+      margin: 0 20px