Restyle ad

Author: jlukic

server/files/stylesheets/docs.css

@@ -2054,13 +2054,19 @@ code .chunk {
   width: auto;
 }
 
+#example .bsa-cpc {
+  height: 38px;
+}
 #example .bsa-cpc #_default_ {
   position: relative;
-  background-color: #FAFAFA;
   border-bottom: solid 1px #dddddd;
   text-align: center;
   font-size: 14px;
   line-height: 1.5;
+  transition: background 0.3s ease;
+}
+#example .bsa-cpc #_default_:hover {
+  background-color: #FAFAFA;
 }
 
 #example .bsa-cpc .default-ad {
@@ -2070,8 +2076,13 @@ code .chunk {
 #example .bsa-cpc ._default_ {
   display: inline-block;
   overflow: hidden;
-  padding: .5em 1em .4em;
-  line-height: 1.5;
+  padding: 10px 3em;
+  max-width: 1044px;
+  color: #415a5a;
+  text-align: left;
+  line-height: 1;
+  margin-right: 344px;
+  display: block;
 }
 
 #example .bsa-cpc ._default_ > * {
@@ -2109,11 +2120,12 @@ code .chunk {
 
 #example .bsa-cpc .default-description:after {
   position: relative;
-  top: -1px;
-  right: -8px;
-  padding: 3px 6px;
+  top: 0px;
+  right: 0px;
+  padding: 4px 6px;
+  float: right;
   border-radius: 3px;
-  background-color: #35bdb2;
+  background-color: #848484;
   color: #fff;
   content: "Ad";
   text-transform: uppercase;
@@ -2207,6 +2219,9 @@ code .chunk {
     padding-left: 3em;
     padding-right: 0em;
   }
+  #example .bsa-cpc ._default_ {
+    margin-right: 0px;
+  }
 }
 
 /* Squish Content (Just For Small Computers) */
@@ -2387,6 +2402,12 @@ code .chunk {
           flex: 1 0 auto;
   }
 
+  /* Ad Label */
+  #example .bsa-cpc ._default_ {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
   /* Let Buttons Vertically Stack */
   #example .masthead .button {
     margin-bottom: 0.75em;

server/partials/header.html.eco

@@ -178,7 +178,6 @@
     <% end %>
   </div>
 </div>
-<% unless 'development' in @getEnvironments(): %>
   <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
   <div class="bsa-cpc"></div>
   <script>
@@ -192,4 +191,3 @@
         }
     })();
   </script>
-<% end %>