The current adsense implementation only places ads on desktop-sized screens. This change allows ads of the appropriate size to be displayed on any device. fixes #224
70 lines
1.5 KiB
SCSS
70 lines
1.5 KiB
SCSS
//
|
|
// Crafting Guide - adsense.scss
|
|
//
|
|
// Copyright © 2014-2016 by Redwood Labs
|
|
// All rights reserved.
|
|
//
|
|
|
|
.view__adsense {
|
|
left : 50%;
|
|
margin : $size-margin-large 0;
|
|
position : relative;
|
|
transform : translate(-50%);
|
|
|
|
ins {
|
|
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
|
|
}
|
|
|
|
&.large-mobile-banner {
|
|
height : $size-ad-large-mobile-banner-height;
|
|
width : $size-ad-large-mobile-banner-width;
|
|
|
|
&.placeholder:before {
|
|
font-size : $font-size-large;
|
|
}
|
|
}
|
|
|
|
&.leaderboard {
|
|
height : $size-ad-leaderboard-height;
|
|
width : $size-ad-leaderboard-width;
|
|
|
|
&.placeholder:before {
|
|
font-size : $font-size-xxlarge;
|
|
}
|
|
}
|
|
|
|
&.skyscraper {
|
|
height : $size-ad-skyscraper-height;
|
|
width : $size-ad-skyscraper-width;
|
|
|
|
&.placeholder:before {
|
|
transform : rotate(90deg);
|
|
font-size : $font-size-xxlarge;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top : 0;
|
|
}
|
|
}
|
|
|
|
&.placeholder {
|
|
border : $size-border-small solid $color-gray-faint;
|
|
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content : center;
|
|
|
|
&:before {
|
|
color : $color-gray-faint;
|
|
content : "GOOGLE ADSENSE";
|
|
font-family : $font-family-control;
|
|
letter-spacing : $size-margin-small;
|
|
white-space : nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view__mod_tile + .view__adsense {
|
|
margin-top : 0;
|
|
}
|