From b82849e840a26e43755d503ef0d94a6439e97c97 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Fri, 3 Jul 2020 00:42:02 +1000 Subject: [PATCH] Sponsor update (#1489) --- _data/berry.yml | 4 - _data/carbon.yml | 4 +- _includes/2017/codefund.html | 7 -- _includes/2017/headline-ad.html | 7 ++ _layouts/2017/home.html | 14 +-- _layouts/2017/sheet.html | 10 +- _parcel/critical-home.scss | 2 +- _parcel/critical-sheet.scss | 2 +- _sass/2017/components/codefund-sponsor.scss | 10 -- _sass/2017/components/headline-ad.scss | 114 ++++++++++++++------ _sass/2017/components/main-heading.scss | 7 +- _sass/2017/components/side-ad.scss | 49 --------- _sass/2017/components/site-header.scss | 6 +- _sass/2017/style.scss | 2 - _sass/2017/utils/carbon-style.scss | 35 +++--- 15 files changed, 127 insertions(+), 146 deletions(-) delete mode 100644 _data/berry.yml delete mode 100644 _includes/2017/codefund.html create mode 100644 _includes/2017/headline-ad.html delete mode 100644 _sass/2017/components/codefund-sponsor.scss delete mode 100644 _sass/2017/components/side-ad.scss 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/home.html b/_layouts/2017/home.html index 36b3dde6e..c2070e3dd 100644 --- a/_layouts/2017/home.html +++ b/_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 %} - -{% endif %} -
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 %} - - {% 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; } } -