Skip to content

Instantly share code, notes, and snippets.

@nelsonpecora
Created June 29, 2017 21:07
Show Gist options
  • Save nelsonpecora/93048020aa6b71328c5dc374afd0eb78 to your computer and use it in GitHub Desktop.
Save nelsonpecora/93048020aa6b71328c5dc374afd0eb78 to your computer and use it in GitHub Desktop.
Strict style rules
// sites/di/ad.css
@import 'mixins';
@import 'styleguide';
.ad {
display: none;
margin: 0 auto;
position: relative;
text-align: center;
z-index: $ad-layer;
@include only(medium) {
margin-top: 4px;
}
// hide ads when printing
@media print {
display: none;
}
// remove z-index in edit mode:
// this allows component selectors to display properly
&.ad_editMode {
z-index: 0;
}
// out of page ad
&.ad_oop {
height: 0;
left: 0;
position: absolute;
top: 0;
}
// 'bordered' ads only have a border on mobile
&.ad_bordered {
@include only(small) {
border-bottom: 1px solid $ad-border;
border-top: 1px solid $ad-border;
margin: 10px 0 20px;
padding: 5px 0;
}
}
// set min-height for different sizes
&[data-sizes*='300x1050'] {
min-height: 1050px;
}
&[data-sizes*='300x600'] {
margin-bottom: 30px;
min-height: 600px;
}
&[data-sizes*='970x251'] {
min-height: 251px;
}
&[data-sizes*='300x250'],
&[data-sizes*='300x252'] {
min-height: 250px;
@media screen and (max-width: 340px) {
margin-left: calc((300px - 100vw) / 2);
}
}
&[data-sizes*='610x190'] {
min-height: 190px;
}
&[data-sizes*='612x168'] {
min-height: 168px;
}
&[data-sizes*='280x115'] {
min-height: 115px;
}
&[data-sizes*='320x100'] {
min-height: 100px;
}
&[data-sizes*='1024x91'],
&[data-sizes*='970x91'],
&[data-sizes*='728x91'] {
min-height: 91px;
}
&[data-sizes*='1024x90'],
&[data-sizes*='970x90'],
&[data-sizes*='728x90'] {
min-height: 90px;
}
&[data-sizes*='495x80'] {
min-height: 80px;
}
&[data-sizes*='970x66'] {
min-height: 66px;
}
&[data-sizes*='495x63'],
&[data-sizes*='280x63'] {
min-height: 63px;
}
&[data-sizes*='980x60'],
&[data-sizes*='480x60'],
&[data-sizes*='468x60'],
&[data-sizes*='260x60'] {
min-height: 60px;
}
&[data-sizes*='320x50'],
&[data-sizes*='300x50'] {
min-height: 50px;
}
&[data-sizes*='1024x'] {
min-width: 1024px;
}
&[data-sizes*='980x'] {
min-width: 980px;
}
&[data-sizes*='970x'] {
min-width: 970px;
}
&[data-sizes*='728x'] {
min-width: 728px;
}
&[data-sizes*='612x'] {
min-width: 612px;
}
&[data-sizes*='610x'] {
min-width: 610px;
}
&[data-sizes*='495x'] {
min-width: 495px;
}
&[data-sizes*='480x'] {
min-width: 480px;
}
&[data-sizes*='468x'] {
min-width: 468px;
}
&[data-sizes*='320x'] {
min-width: 320px;
}
&[data-sizes*='300x'] {
min-width: 300px;
}
&[data-sizes*='280x'] {
min-width: 280px;
}
&[data-sizes*='260x'] {
min-width: 260px;
}
&[data-label*='DesktopBanner'] {
border-bottom: 1px solid $ad-border-dark;
border-top: 1px solid $ad-border-dark;
margin-bottom: 30px;
margin-left: -150px;
margin-top: 30px;
min-width: 970px;
padding-top: 10px;
&:before {
color: $ad-border-dark;
content: 'Story continued below';
display: block;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
text-align: center;
}
[width$='970'] {
margin: 10px 0 20px;
}
[width$='728'] {
margin: 10px 0 20px;
}
}
&[data-label*='BottomLeaderboard'] {
clear: both;
margin: 0 auto 30px;
padding: 5px 0;
text-align: center;
width: 100%;
}
&[data-label*='MidBanner'],
&[data-label*='colMobile'] {
margin-bottom: 30px;
}
&[data-label*='inArticle'] {
margin-bottom: 25px;
&:before {
color: $dark-grey;
content: 'Story continued below';
display: block;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
margin-bottom: 7px;
text-align: center;
}
}
&[data-label*='premiumDesktop'],
&[data-label*='outStreamDesktop'],
&[data-label*='outStreamMobile'] {
height: 1px;
overflow: hidden;
user-select: none;
}
&[data-label*='Desktop300x250'] {
float: right;
left: 150px;
margin-left: -115px;
}
&[data-cb-ad-id*='TopLeaderboard'] {
background: $ad-background;
@include min(668) {
background: none;
}
}
&[data-label*=inSplash] {
border-bottom: 1px solid $ad-splash-border;
border-top: 1px solid $ad-splash-border;
margin-bottom: 30px;
padding: 10px 0;
&:before {
// Hide the "Article continued below" for dynamically added ads in splash pages
display: none;
}
}
// Define the visibility based on view port
// The class name is vp-(min or 0)-(max or plus)
// Examples: .vp-0-600, .vp-600-800, .vp-800-plus
&.ad_vp-0-plus {
display: block;
}
&.ad_vp-0-480 {
@media screen and (max-width: 479.9px) {
display: block;
}
}
&.ad_vp-0-600 {
@media screen and (max-width: 599.9px) {
display: block;
}
}
// some older instances of mobile landscape ads use this
&.ad_vp-480-667 {
@media screen and (max-width: 666.9px) {
display: block;
}
}
&.ad_vp-480-728 {
@media screen and (min-width: 480px) and (max-width: 727.9px) {
display: block;
}
}
&.ad_vp-600-1024 {
@media screen and (min-width: 600px) and (max-width: 1023.9px) {
display: block;
}
}
&.ad_vp-728-1024 {
@media screen and (min-width: 728px) and (max-width: 1023.9px) {
display: block;
}
}
&.ad_vp-1024-plus {
@media screen and (min-width: 1024px) {
display: block;
}
}
& > div,
& > iframe {
margin: 0 auto;
}
.layout-tertiary &[data-sizes*='300x250'] {
margin-bottom: 20px; // Add bottom margin to ad when its in tertiary so it doesn't bump against masthead
}
}
@nelsonpecora
Copy link
Author

One rule might be added to the class naming syntax: numbers may be separated from things by hyphens (e.g. .ad_vp-1024-plus) rather than camelCased (e.g. .ad_vp1024Plus)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment