diff --git a/_data/berry.yml b/_data/berry.yml
deleted file mode 100644
index 51c27f714..000000000
--- a/_data/berry.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-enabled: false
-token: "653d56e083fec2a9ae1b6c7cde4e5f5f"
-title: "Rollbar"
-description: "Real-time error monitoring, alerting, and analytics for developers 🚀"
diff --git a/_data/carbon.yml b/_data/carbon.yml
index 6a5668beb..536d89c68 100644
--- a/_data/carbon.yml
+++ b/_data/carbon.yml
@@ -1,2 +1,2 @@
-enabled: false
-src: //cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom
+enabled: true
+src: https://cdn.carbonads.com/carbon.js?serve=CE7IK5QM&placement=devhintsio
diff --git a/_includes/2017/codefund.html b/_includes/2017/codefund.html
deleted file mode 100644
index e394b2797..000000000
--- a/_includes/2017/codefund.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/_includes/2017/headline-ad.html b/_includes/2017/headline-ad.html
new file mode 100644
index 000000000..f0ee2c741
--- /dev/null
+++ b/_includes/2017/headline-ad.html
@@ -0,0 +1,7 @@
+
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html
index 1690b5233..62a2d83c2 100644
--- a/_layouts/2017/sheet.html
+++ b/_layouts/2017/sheet.html
@@ -13,16 +13,8 @@
{{ page.title }} {{ site.data.content.sheet.suffix }}
- {% if site.data.codefund.enabled %}
-
- {% include 2017/codefund.html %}
-
- {% endif %}
-
{% if site.data.carbon.enabled %}
-
-
-
+ {% include 2017/headline-ad.html %}
{% endif %}
diff --git a/_parcel/critical-home.scss b/_parcel/critical-home.scss
index c97e2bb79..549f120ce 100644
--- a/_parcel/critical-home.scss
+++ b/_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';
diff --git a/_parcel/critical-sheet.scss b/_parcel/critical-sheet.scss
index d8fab1425..26e081792 100644
--- a/_parcel/critical-sheet.scss
+++ b/_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';
diff --git a/_sass/2017/components/codefund-sponsor.scss b/_sass/2017/components/codefund-sponsor.scss
deleted file mode 100644
index 4e8e61a04..000000000
--- a/_sass/2017/components/codefund-sponsor.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.codefund-sponsor {
- & {
- min-height: 114px;
- }
-
- .cf-wrapper {
- margin-left: auto;
- margin-right: auto;
- }
-}
diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-ad.scss
index 94f5886c8..f3adf3600 100644
--- a/_sass/2017/components/headline-ad.scss
+++ b/_sass/2017/components/headline-ad.scss
@@ -1,33 +1,84 @@
/*
* Carbon ads
*
- * .headline-ad
- * #carbonads
+ * .HeadlineAd
+ * 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;
- max-width: 380px;
- height: 100px;
- }
-
- & > div > span {
- display: inline-block;
- text-align: right;
+ display: block;
+ width: 380px;
+ height: 64px;
+ text-align: left;
}
// Clearfix
@@ -39,25 +90,22 @@
}
.carbon-img {
- float: right;
- margin-left: 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;
- }
+ float: left;
+ margin-right: 16px;
}
}
+
+@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%;
+ }
+}
+
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index 222f88417..6cf6d155f 100644
--- a/_sass/2017/components/main-heading.scss
+++ b/_sass/2017/components/main-heading.scss
@@ -38,8 +38,11 @@
display: inline-block;
}
- & > .adbox > .ad.-carbon {
- margin-top: 16px;
+ @media (min-width: 769px) {
+ & > .adbox {
+ margin-top: 24px;
+ margin-bottom: 24px;
+ }
}
}
diff --git a/_sass/2017/components/side-ad.scss b/_sass/2017/components/side-ad.scss
deleted file mode 100644
index 019c9c973..000000000
--- a/_sass/2017/components/side-ad.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/_sass/2017/components/site-header.scss b/_sass/2017/components/site-header.scss
index 6c54fa3f5..983b6fd4e 100644
--- a/_sass/2017/components/site-header.scss
+++ b/_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-right: -16px;
+ margin-top: 32px;
+ margin-bottom: 32px;
}
}
}
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index c69fcde89..39dc89027 100644
--- a/_sass/2017/style.scss
+++ b/_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';
diff --git a/_sass/2017/utils/carbon-style.scss b/_sass/2017/utils/carbon-style.scss
index 7887e4680..fb7ae9b7a 100644
--- a/_sass/2017/utils/carbon-style.scss
+++ b/_sass/2017/utils/carbon-style.scss
@@ -7,38 +7,47 @@
.carbon-text,
.carbon-poweredby {
text-decoration: none;
- display: block;
}
- .carbon-img {
- width: 130px;
- height: 100px;
- box-shadow: $shadow3;
+ // Increase hit area
+ .carbon-text,
+ .carbon-poweredby {
+ 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,
- .carbon-poweredby:visited {
- color: lighten($gray-text, 20%);
+ // Allow line breaks
+ .carbon-text::after {
+ content: ' ';
}
.carbon-text:hover,
.carbon-poweredby:hover {
- color: $base-a;
+ color: $base-b;
+ }
+
+ .carbon-poweredby,
+ .carbon-poweredby:visited {
+ white-space: nowrap;
+ color: $gray-text;
}
}
-