Sponsor update (#1489)

_data/berry.yml

@@ -1,4 +0,0 @@
-enabled: false
-token: "653d56e083fec2a9ae1b6c7cde4e5f5f"
-title: "Rollbar"
-description: "Real-time error monitoring, alerting, and analytics for developers 🚀"

_data/carbon.yml

@@ -1,2 +1,2 @@
-enabled: false
+enabled: true
-src: //cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom
+src: https://cdn.carbonads.com/carbon.js?serve=CE7IK5QM&placement=devhintsio

_includes/2017/codefund.html

@@ -1,7 +0,0 @@
-<aside class='codefund-sponsor' data-js-no-preview>
-  <div id="codefund"><!-- fallback content --></div>
-  <script src="https://codefund.app/properties/51/funder.js" async="async"></script>
-  <script type="text/javascript">var abp;</script>
-  <script type="text/javascript" src="https://cdn2.codefund.app/assets/px.js?ch=1"></script>
-  <script type="text/javascript" src="https://cdn2.codefund.app/assets/px.js?ch=2"></script>
-</aside>

_includes/2017/headline-ad.html

@@ -0,0 +1,7 @@
+<div class='HeadlineAd' role='complementary'>
+  <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
+  <span class='placeholder -one'></span>
+  <span class='placeholder -two'></span>
+  <span class='placeholder -three'></span>
+  <span class='placeholder -four'></span>
+</div>

_layouts/2017/home.html

@@ -14,12 +14,6 @@
 
 {% include 2017/top-nav.html page=page is_home=true noedit=true noback=true %}
 
-{% if site.data.carbon.enabled %}
-  <div class='SideAd' role='complementary'>
-    <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
-  </div>
-{% endif %}
-
 <div class='body-area -slim'>
   <div class='site-header' role='banner'>
     <h1>
@@ -31,10 +25,10 @@
 
     {% include 2017/search-form.html live=true %}
 
-    {% if site.data.codefund.enabled %}
+    {% if site.data.carbon.enabled %}
-    <div class='adbox' role='complementary'>
+      <div class='adbox'>
-      {% include 2017/codefund.html %}
+        {% include 2017/headline-ad.html %}
-    </div>
+      </div>
     {% endif %}
   </div>
 

_layouts/2017/sheet.html

@@ -13,16 +13,8 @@
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
 
     <div class='adbox' data-js-no-preview>
-      {% if site.data.codefund.enabled %}
-      <div class='ad -codefund' role='complementary'>
-        {% include 2017/codefund.html %}
-      </div>
-      {% endif %}
-
       {% if site.data.carbon.enabled %}
-        <div class='HeadlineAd ad -carbon' role='complementary'>
+        {% include 2017/headline-ad.html %}
-          <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
-        </div>
       {% endif %}
     </div>
   </header>

_parcel/critical-home.scss

@@ -7,7 +7,7 @@
 @import '../_sass/2017/components/announcements-list.scss';
 @import '../_sass/2017/components/back-button.scss';
 @import '../_sass/2017/components/body-area.scss';
-@import '../_sass/2017/components/codefund-sponsor.scss';
+@import '../_sass/2017/components/headline-ad.scss';
 @import '../_sass/2017/components/page-actions.scss';
 @import '../_sass/2017/components/pages-list.scss';
 @import '../_sass/2017/components/search-box.scss';

_parcel/critical-sheet.scss

@@ -13,9 +13,9 @@
 // Components
 @import '../_sass/2017/components/back-button.scss';
 @import '../_sass/2017/components/body-area.scss';
-@import '../_sass/2017/components/codefund-sponsor.scss';
 @import '../_sass/2017/components/h3-section.scss';
 @import '../_sass/2017/components/h3-section-list.scss';
+@import '../_sass/2017/components/headline-ad.scss';
 @import '../_sass/2017/components/main-heading.scss';
 @import '../_sass/2017/components/page-actions.scss';
 @import '../_sass/2017/components/top-nav.scss';

_sass/2017/components/codefund-sponsor.scss

@@ -1,10 +0,0 @@
-.codefund-sponsor {
-  & {
-    min-height: 114px;
-  }
-
-  .cf-wrapper {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}

_sass/2017/components/headline-ad.scss

@@ -1,33 +1,84 @@
 /*
  * Carbon ads
  *
- *     .headline-ad
+ *     .HeadlineAd
- *       #carbonads
+ *       div#carbonads
  *         span
  *           span.carbon-wrap
  *             a.carbon-img > img
- *           a.carbon-text {description}
+ *             a.carbon-text {description}
  *           a.carbon-poweredby {powered by Carbon}
  */
 
+$placeholder-bg-size: 450px;
+
 .HeadlineAd {
-  @include font-size(-1);
   @include carbon-style;
 
   & {
-    display: inline-block;
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 
+  // Hide placeholders after carbon has loaded
+  #carbonads ~ .placeholder {
+    display: none;
+  }
+
+  & > .placeholder {
+    background-image: linear-gradient(
+      92deg,
+      rgba($gray-text, 0.1),
+      rgba($gray-text, 0.17) 15%,
+      rgba($gray-text, 0.1) 30%
+    );
+    background-size: $placeholder-bg-size 100%;
+    animation: 2.5s ease-in-out infinite placeholder-swish;
+    border-radius: 3px;
+    position: absolute;
+    display: block;
+  }
+
+  & > .placeholder.-one {
+    left: 0;
+    top: 0;
+    width: 83px;
+    height: 64px;
+  }
+
+  & > .placeholder.-two,
+  & > .placeholder.-three,
+  & > .placeholder.-four {
+    left: 99px;
+    top: 6px;
+    height: 8px;
+    width: 280px;
+  }
+
+  & > .placeholder.-three {
+    top: 28px;
+  }
+
+  & > .placeholder.-four {
+    top: 50px;
+    width: 80px;
+  }
+
+  // Make the ad show up above the placeholder
+  #carbonads {
+    position: relative;
+    z-index: 1;
+  }
+
+  // Carbon wrapper
   &,
   & > div > span {
-    min-width: 130px + 16px + 64px;
+    display: block;
-    max-width: 380px;
+    width: 380px;
-    height: 100px;
+    height: 64px;
-  }
+    text-align: left;
-
-  & > div > span {
-    display: inline-block;
-    text-align: right;
   }
 
   // Clearfix
@@ -39,25 +90,22 @@
   }
 
   .carbon-img {
-    float: right;
+    float: left;
-    margin-left: 16px;
+    margin-right: 16px;
-  }
-
-  .carbon-text:first-line {
-    @include font-size(1);
-    color: $base-head;
-    font-weight: 300;
-    margin-bottom: -0.02em;
-  }
-
-  @media (min-width: 481px) {
-    .carbon-poweredby::before {
-      display: block;
-      content: '';
-      width: 32px;
-      height: 1px;
-      background: $dark-line-color;
-      margin: 8px (130px + 16px) 8px auto;
-    }
   }
 }
+
+@keyframes placeholder-swish {
+  0% {
+    background-position: ($placeholder-bg-size * -1 / 3) 0%;
+  }
+
+  50% {
+    background-position: ($placeholder-bg-size * 2 / 3) 0%;
+  }
+
+  100% {
+    background-position: ($placeholder-bg-size * 2 / 3) 0%;
+  }
+}
+

_sass/2017/components/main-heading.scss

@@ -38,8 +38,11 @@
     display: inline-block;
   }
 
-  & > .adbox > .ad.-carbon {
+  @media (min-width: 769px) {
-    margin-top: 16px;
+    & > .adbox {
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
   }
 }
 

_sass/2017/components/side-ad.scss

@@ -1,49 +0,0 @@
-.SideAd {
-  @include font-size(-1);
-  @include carbon-style;
-
-  @media (min-width: 961px) {
-    position: absolute;
-    right: 32px;
-    top: 80px;
-    width: 130px;
-    text-align: left;
-
-    .carbon-img {
-      margin-bottom: 16px;
-    }
-  }
-
-  .carbon-text:first-line {
-    color: $base-head;
-    font-weight: bold;
-  }
-
-  .carbon-poweredby::before {
-    display: block;
-    content: '';
-    width: 32px;
-    height: 1px;
-    background: $dark-line-color;
-    margin: 12px 0;
-  }
-
-  @media (max-width: 960px) {
-    & {
-      margin: 16px auto;
-      max-width: 300px;
-    }
-
-    &::after {
-      content: '';
-      display: table;
-      clear: both;
-      zoom: 1;
-    }
-
-    .carbon-img {
-      float: left;
-      margin-right: 16px;
-    }
-  }
-}

_sass/2017/components/site-header.scss

@@ -35,10 +35,10 @@
     margin: 16px auto;
   }
 
-  @media (max-width: 480px) {
+  @media (min-width: 481px) {
     & > .adbox {
-      margin-left: -16px;
+      margin-top: 32px;
-      margin-right: -16px;
+      margin-bottom: 32px;
     }
   }
 }

_sass/2017/style.scss

@@ -25,7 +25,6 @@
 @import './components/announcements-list';
 @import './components/back-button';
 @import './components/body-area';
-@import './components/codefund-sponsor';
 @import './components/comments-area';
 @import './components/comments-details';
 @import './components/comments-section';
@@ -51,7 +50,6 @@
 @import './components/related-post-item';
 @import './components/search-box';
 @import './components/search-footer';
-@import './components/side-ad';
 @import './components/site-header';
 @import './components/top-nav';
 @import './components/top-sheet';

_sass/2017/utils/carbon-style.scss

@@ -7,38 +7,47 @@
   .carbon-text,
   .carbon-poweredby {
     text-decoration: none;
-    display: block;
   }
 
-  .carbon-img {
+  // Increase hit area
-    width: 130px;
+  .carbon-text,
-    height: 100px;
+  .carbon-poweredby {
-    box-shadow: $shadow3;
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 
   .carbon-img > img {
+    width: 83px; // 13:10 ratio
+    height: 64px;
+    box-shadow: $shadow3;
     border-radius: 3px;
-    background: white;
+    background: rgba($gray-text, 0.2);
+    color: transparent;
   }
 
-  .carbon-img:hover {
+  .carbon-img:hover img {
     transform: translate3d(0, -1px, 0);
     box-shadow: $shadow6;
   }
 
   .carbon-text,
   .carbon-text:visited {
-    color: $gray-text;
+    color: $base-text;
   }
 
-  .carbon-poweredby,
+  // Allow line breaks
-  .carbon-poweredby:visited {
+  .carbon-text::after {
-    color: lighten($gray-text, 20%);
+    content: '  ';
   }
 
   .carbon-text:hover,
   .carbon-poweredby:hover {
-    color: $base-a;
+    color: $base-b;
+  }
+
+  .carbon-poweredby,
+  .carbon-poweredby:visited {
+    white-space: nowrap;
+    color: $gray-text;
   }
 }
-