Skip to content

Instantly share code, notes, and snippets.

@andresgallo
Last active June 23, 2023 18:00
Show Gist options
  • Save andresgallo/da6de1f78bd3342efe48c4920fbb591b to your computer and use it in GitHub Desktop.
Save andresgallo/da6de1f78bd3342efe48c4920fbb591b to your computer and use it in GitHub Desktop.
var items = [
['sovrn-rail', 640, 300],
['sovrn-rail-sticky', 640, 0],
['sovrn-rail-home', 640, 300],
['sovrn-rail-sticky', 640, 0],
['sovrn-rail-home-sticky', 640, 0],
['sovrn-rail-hub', 640, 300],
['sovrn-rail-hub-large', 640, 300],
['sovrn-rail-hub-sticky', 640, 0],
['sovrn-rail-story', 640, 0],
['sovrn-rail-story-sticky', 640, 0],
['sovrn-rail-video', 640, 0],
['sovrn-curated-home', 278, 300],
['sovrn-infeed', 278, 300],
['sovrn-curated-hub', 278, 300],
['sovrn-home-feed', 278, 300],
['sovrn-hub-feed', 278, 300],
['sovrn-story-feed', 278, 300],
['sovrn-home-mobile', 0, 278],
['sovrn-hub-mobile', 0, 278]
]
function genCSS(items) {
return `
@media only screen and (min-width: 768px) {
${items.map(item => `
.SovrnAd.${item[0]} {
min-height: ${item[1]}px;
}
`).join('')}
}
@media only screen and (max-width: 767px) {
${items.map(item => `
.SovrnAd.${item[0]} {
min-height: ${item[1]}px;
}
`).join('')}
}
`
}
console.log(genCSS(items))
@media only screen and (min-width: 768px) {
.SovrnAd.sovrn-rail {
min-height: 640px;
}
.SovrnAd.sovrn-rail-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-home {
min-height: 640px;
}
.SovrnAd.sovrn-rail-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-home-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-hub {
min-height: 640px;
}
.SovrnAd.sovrn-rail-hub-large {
min-height: 640px;
}
.SovrnAd.sovrn-rail-hub-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-story {
min-height: 640px;
}
.SovrnAd.sovrn-rail-story-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-video {
min-height: 640px;
}
.SovrnAd.sovrn-curated-home {
min-height: 278px;
}
.SovrnAd.sovrn-infeed {
min-height: 278px;
}
.SovrnAd.sovrn-curated-hub {
min-height: 278px;
}
.SovrnAd.sovrn-home-feed {
min-height: 278px;
}
.SovrnAd.sovrn-hub-feed {
min-height: 278px;
}
.SovrnAd.sovrn-story-feed {
min-height: 278px;
}
.SovrnAd.sovrn-home-mobile {
min-height: 0px;
}
.SovrnAd.sovrn-hub-mobile {
min-height: 0px;
}
}
@media only screen and (max-width: 767px) {
.SovrnAd.sovrn-rail {
min-height: 640px;
}
.SovrnAd.sovrn-rail-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-home {
min-height: 640px;
}
.SovrnAd.sovrn-rail-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-home-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-hub {
min-height: 640px;
}
.SovrnAd.sovrn-rail-hub-large {
min-height: 640px;
}
.SovrnAd.sovrn-rail-hub-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-story {
min-height: 640px;
}
.SovrnAd.sovrn-rail-story-sticky {
min-height: 640px;
}
.SovrnAd.sovrn-rail-video {
min-height: 640px;
}
.SovrnAd.sovrn-curated-home {
min-height: 278px;
}
.SovrnAd.sovrn-infeed {
min-height: 278px;
}
.SovrnAd.sovrn-curated-hub {
min-height: 278px;
}
.SovrnAd.sovrn-home-feed {
min-height: 278px;
}
.SovrnAd.sovrn-hub-feed {
min-height: 278px;
}
.SovrnAd.sovrn-story-feed {
min-height: 278px;
}
.SovrnAd.sovrn-home-mobile {
min-height: 0px;
}
.SovrnAd.sovrn-hub-mobile {
min-height: 0px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment