Initial implementation of berry.sh
This commit is contained in:
Rico Sta. Cruz
parent
7451b686ce
commit
6daf8d0b03
|
|
@ -0,0 +1,4 @@
|
|||
enabled: true
|
||||
token: "ff1cfaca-b614-423d-bda9-5daa28662c5b"
|
||||
title: "Rollbar"
|
||||
description: "Real-time error monitoring, alerting, and analytics for developers 🚀"
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{% assign pixel_href = 'https://cs.berry.sh/l/TOKEN/pixel.png' | replace: 'TOKEN', site.data.berry.token %}
|
||||
{% assign link_href = 'https://cs.berry.sh/c/TOKEN' | replace: 'TOKEN', site.data.berry.token %}
|
||||
|
||||
<aside class='berry-sponsor' data-js-no-preview>
|
||||
<div class='cs__wrapper'>
|
||||
<div class='cs__header'>Proudly sponsored by</div>
|
||||
<a href='{{ link_href }}' class='cs__blurb' target='_blank' rel='noopener'>
|
||||
<strong>{{ site.data.berry.title }}</strong>
|
||||
<span>{{ site.data.berry.description }}</span>
|
||||
</a>
|
||||
<img class='cs__pixel' src='{{ pixel_href }}' />
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<aside class='code-sponsor' data-js-no-preview>
|
||||
<div id='code-sponsor-widget'></div>
|
||||
<script id='code-sponsor-embed'>;(function(d,id){
|
||||
if (window.localStorage && window.localStorage._NOADS) return
|
||||
var s=d.createElement('script'),r=d.getElementById(id)
|
||||
s.async=true
|
||||
s.src='https://app.codesponsor.io/scripts/{{ site.data.codesponsor.id }}?theme=light&image=hide&height=130&width=319'
|
||||
setTimeout(function(){r.parentNode.insertBefore(s,r)})
|
||||
})(document, 'code-sponsor-embed')</script>
|
||||
</aside>
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
|
||||
{% include 2017/search-form.html live=true %}
|
||||
|
||||
{% if site.data.codesponsor.enabled %}
|
||||
{% if site.data.berry.enabled %}
|
||||
<div class='adbox' role='complementary'>
|
||||
{% include 2017/code-sponsor.html noprelude=true %}
|
||||
{% include 2017/berry-sponsor.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
|
||||
|
||||
<div class='adbox' data-js-no-preview>
|
||||
{% if site.data.codesponsor.enabled %}
|
||||
<div class='ad -codesponsor' role='complementary'>
|
||||
{% include 2017/code-sponsor.html %}
|
||||
{% if site.data.berry.enabled %}
|
||||
<div class='ad -berry' role='complementary'>
|
||||
{% include 2017/berry-sponsor.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $bounce: cubic-bezier(.75,-0.5,0,1.75);
|
|||
* Pop it in as the page loads
|
||||
*/
|
||||
|
||||
.code-sponsor {
|
||||
.berry-sponsor {
|
||||
html.WithJs & {
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
|
|
@ -45,18 +45,3 @@ $bounce: cubic-bezier(.75,-0.5,0,1.75);
|
|||
transition: opacity 100ms linear 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Subtle animation to drive attention to the ad on laod
|
||||
*/
|
||||
|
||||
// .code-sponsor {
|
||||
// html.WithJs & {
|
||||
// transform: translate3d(0, 16px, 0);
|
||||
// }
|
||||
|
||||
// html.WithJs.LoadDone & {
|
||||
// transform: translate3d(0, 0, 0);
|
||||
// transition: transform 200ms ease-out;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
.berry-sponsor {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Berry styles
|
||||
*/
|
||||
|
||||
.cs__header {
|
||||
color: $base-mute;
|
||||
@include font-size(-1);
|
||||
}
|
||||
|
||||
.cs__blurb {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& {
|
||||
color: $base-text;
|
||||
}
|
||||
|
||||
& > strong {
|
||||
color: $base-head;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
.code-sponsor {
|
||||
& {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prelude */
|
||||
& > .prelude {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: block;
|
||||
@include font-size(-1);
|
||||
color: lighten($gray-text, 20%);
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& > .prelude > a,
|
||||
& > .prelude > a:visited {
|
||||
text-decoration: none;
|
||||
color: lighten($gray-text, 20%);
|
||||
}
|
||||
|
||||
& > .prelude > a:hover,
|
||||
& > .prelude > a:focus {
|
||||
color: $gray-text;
|
||||
}
|
||||
|
||||
/* Compensate padding to put it next to prelude */
|
||||
& > div {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
/* Extra line between prelude and ad? */
|
||||
& > .prelude + div {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
& > div > iframe {
|
||||
display: inline-block;
|
||||
opacity: 0.9;
|
||||
transition: opacity 150ms linear;
|
||||
}
|
||||
|
||||
& > div:hover > iframe {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,17 +41,6 @@
|
|||
& > .adbox > .ad.-carbon {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
// Horizontal line
|
||||
// (no need for now)
|
||||
// & > .adbox > .ad.-codesponsor::before {
|
||||
// content: '';
|
||||
// display: block;
|
||||
// margin: 8px auto 24px auto;
|
||||
// width: 64px;
|
||||
// height: 1px;
|
||||
// background: lighten($gray-text, 40%);
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
@import './components/announcements-item';
|
||||
@import './components/announcements-list';
|
||||
@import './components/back-button';
|
||||
@import './components/berry-sponsor';
|
||||
@import './components/body-area';
|
||||
@import './components/code-sponsor';
|
||||
@import './components/comments-area';
|
||||
@import './components/comments-details';
|
||||
@import './components/comments-section';
|
||||
|
|
|
|||
Loading…
Reference in New Issue