Sponsor update (#1489)

This commit is contained in:
Rico Sta. Cruz 2020-07-03 00:42:02 +10:00 committed by GitHub
parent fcc6196aa4
commit b82849e840
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 127 additions and 146 deletions

View File

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

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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,9 +25,9 @@
{% include 2017/search-form.html live=true %}
{% if site.data.codefund.enabled %}
<div class='adbox' role='complementary'>
{% include 2017/codefund.html %}
{% if site.data.carbon.enabled %}
<div class='adbox'>
{% include 2017/headline-ad.html %}
</div>
{% endif %}
</div>

View File

@ -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'>
<script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
</div>
{% include 2017/headline-ad.html %}
{% endif %}
</div>
</header>

View File

@ -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';

View File

@ -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';

View File

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

View File

@ -1,8 +1,8 @@
/*
* Carbon ads
*
* .headline-ad
* #carbonads
* .HeadlineAd
* div#carbonads
* span
* span.carbon-wrap
* a.carbon-img > img
@ -10,24 +10,75 @@
* 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;
float: left;
margin-right: 16px;
}
}
.carbon-text:first-line {
@include font-size(1);
color: $base-head;
font-weight: 300;
margin-bottom: -0.02em;
@keyframes placeholder-swish {
0% {
background-position: ($placeholder-bg-size * -1 / 3) 0%;
}
@media (min-width: 481px) {
.carbon-poweredby::before {
display: block;
content: '';
width: 32px;
height: 1px;
background: $dark-line-color;
margin: 8px (130px + 16px) 8px auto;
}
50% {
background-position: ($placeholder-bg-size * 2 / 3) 0%;
}
100% {
background-position: ($placeholder-bg-size * 2 / 3) 0%;
}
}

View File

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

View File

@ -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;
}
}
}

View File

@ -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;
}
}
}

View File

@ -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';

View File

@ -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;
}
}