Add native

This commit is contained in:
Jeremy Thomas 2018-04-08 17:22:23 +01:00
parent 409f53b248
commit a0190527a9
5 changed files with 291 additions and 2 deletions

10
docs/.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
# Files
.DS_Store
.jekyll-metadata
_config.local.yml
# Folders
.sass-cache
_site

View File

@ -1 +1 @@
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff;color:#666;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:18px;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body{font-size:1rem;font-weight:400;line-height:1.4;padding-bottom:calc((6.2rem * 3) - 2px)}.header,.nav,.main{margin-left:auto;margin-right:auto;max-width:25rem}a{color:#fc0c18;text-decoration:none}strong{color:#333;font-weight:700}.content{background:white;padding:3rem 1rem;position:relative;z-index:1}.header{text-align:center}.header figure{display:block;height:160px;margin:0 auto 1rem;width:160px}.header figure img{display:block;height:160px;width:160px}.header h1{color:#333;font-size:1.5rem;font-weight:700;margin:0}.header p{margin:0}.ghbtns{height:30px;margin-bottom:3rem;margin-top:1rem;text-align:center}.ghbtns iframe{display:inline-block;vertical-align:top}.nav{margin-bottom:3rem;margin-top:3rem;text-align:center}.button,.or{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button,.npm{align-items:center;border-radius:3px;display:flex;flex-direction:column;justify-content:center;line-height:1.2;padding:1.5rem;text-align:center;transition:background 86ms ease-out}.button{background:#fc0c18;color:#fff;cursor:pointer;font-size:0.9rem;text-decoration:none}.button strong{color:#fff;font-size:1.1em}.button span{display:block}.button small{display:block;opacity:0.7}.button em{color:rgba(255,255,255,0.5);display:block;font-size:0.8em;font-style:normal;margin-top:0.5em}.button:hover{background:#1a1a1a}.or{margin:1rem}.npm{background:#eee;color:#333;font-family:monospace;font-size:0.8rem}.main p{margin-bottom:1em}.main a:hover{text-decoration:underline}.main ul{list-style:disc outside}.main li+li{margin-top:1em}.main li strong{display:block;font-size:1.1em}.main li strong em{color:#fd3f49;font-style:normal}.main li strong em.preserves{color:#02d461}.main li strong em.sets{color:#0d91fd}.footer{background:#1a1a1a;bottom:0;box-shadow:inset 0 2rem 3rem black;color:#b3b3b3;left:0;padding-top:2rem;position:fixed;right:0}.footer a{color:#4d4d4d;display:block;line-height:1;padding:2rem;transition:background 29ms ease-out}.footer a span{display:block;font-size:0.8rem;margin-bottom:0.4rem}.footer a strong{color:gray;display:block;font-weight:normal;transition:background 29ms ease-out}.footer a:hover{background:#fd3f49;color:rgba(0,0,0,0.3)}.footer a:hover strong{color:rgba(0,0,0,0.5)}.footer a:nth-child(2):hover{background:#0d91fd}.footer a:nth-child(3):hover{background:#02d461}.fork-me{display:block;height:140px;position:fixed;right:0;top:0;width:140px}.fork-me img{display:block;height:140px;width:140px}@media (max-width: 699px){.main{padding:0 1rem 0 2rem}.fork-me{position:absolute}}@media (min-width: 700px){body{padding-bottom:calc(6.2rem - 2px)}.content{padding:5rem}.footer{display:flex}.footer a{flex-grow:1}} /*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff;color:#666;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:18px;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body{font-size:1rem;font-weight:400;line-height:1.4;padding-bottom:calc((6.2rem * 3) - 2px)}.header,.nav,.main{margin-left:auto;margin-right:auto;max-width:25rem}a{color:#fc0c18;text-decoration:none}strong{color:#333;font-weight:700}.content{background:white;padding:3rem 1rem;position:relative;z-index:1}.header{text-align:center}.header figure{display:block;height:160px;margin:0 auto 1rem;width:160px}.header figure img{display:block;height:160px;width:160px}.header h1{color:#333;font-size:1.5rem;font-weight:700;margin:0}.header p{margin:0}.ghbtns{height:30px;margin-bottom:3rem;margin-top:1rem;text-align:center}.ghbtns iframe{display:inline-block;vertical-align:top}.nav{margin-bottom:3rem;margin-top:3rem;text-align:center}.button,.or{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button,.npm{align-items:center;border-radius:3px;display:flex;flex-direction:column;justify-content:center;line-height:1.2;padding:1.5rem;text-align:center;transition:background 86ms ease-out}.button{background:#fc0c18;color:#fff;cursor:pointer;font-size:0.9rem;text-decoration:none}.button strong{color:#fff;font-size:1.1em}.button span{display:block}.button small{display:block;opacity:0.7}.button em{color:rgba(255,255,255,0.5);display:block;font-size:0.8em;font-style:normal;margin-top:0.5em}.button:hover{background:#1a1a1a}.or{margin:1rem}.npm{background:#eee;color:#333;font-family:monospace;font-size:0.8rem}.main p{margin-bottom:1em}.main a:hover{text-decoration:underline}.main ul{list-style:disc outside}.main li+li{margin-top:1em}.main li strong{display:block;font-size:1.1em}.main li strong em{color:#fd3f49;font-style:normal}.main li strong em.preserves{color:#02d461}.main li strong em.sets{color:#0d91fd}.footer{background:#1a1a1a;bottom:0;box-shadow:inset 0 2rem 3rem black;color:#b3b3b3;left:0;padding-top:2rem;position:fixed;right:0}.footer a{color:#4d4d4d;display:block;line-height:1;padding:2rem;transition:background 29ms ease-out}.footer a span{display:block;font-size:0.8rem;margin-bottom:0.4rem}.footer a strong{color:gray;display:block;font-weight:normal;transition:background 29ms ease-out}.footer a:hover{background:#fd3f49;color:rgba(0,0,0,0.3)}.footer a:hover strong{color:rgba(0,0,0,0.5)}.footer a:nth-child(2):hover{background:#0d91fd}.footer a:nth-child(3):hover{background:#02d461}.fork-me{display:block;height:140px;position:fixed;right:0;top:0;width:140px}.fork-me img{display:block;height:140px;width:140px}@media (max-width: 699px){.main{padding:0 1rem 0 2rem}.fork-me{position:absolute}}@media (min-width: 700px){body{padding-bottom:calc(6.2rem - 2px)}.content{padding:5rem}.footer{display:flex}.footer a{flex-grow:1}}.native-js{border-radius:3px;display:none;font-size:1rem;opacity:0;margin-bottom:3rem;margin-left:auto;margin-right:auto;max-width:50rem;visibility:hidden}.native-show{display:block;opacity:1;visibility:visible}.native-flex{align-items:center;display:flex;justify-content:center;padding:2em;text-decoration:none}.native-img{border-radius:3px;flex-grow:0;flex-shrink:0;height:50px;width:125px}.native-details{flex-grow:1;flex-shrink:1}.native-main{align-items:center;flex-grow:0;flex-shrink:1;max-width:640px}.native-company{display:block;font-size:0.625em;letter-spacing:2px;margin-bottom:4px;text-transform:uppercase}.native-desc{display:block}.native-cta{border:none;border-radius:3px;box-shadow:0 6px 13px 0 rgba(0,0,0,0.15);display:inline-block;flex-grow:0;flex-shrink:0;font-size:0.75em;font-weight:400;padding:0.75em 1em;text-transform:uppercase;transform:translateY(-1px);transition:transform .3s ease-in-out;vertical-align:top;white-space:nowrap}.native-cta:hover{box-shadow:none;transform:translateY(1px)}@media screen and (max-width: 599px){.native-flex{display:block;text-align:center}.native-main{margin-bottom:2em}.native-details{margin:1em}}@media screen and (min-width: 600px){.native-flex{display:flex;text-align:left}.native-main{display:flex;margin-right:2em}.native-details{margin-left:2em}}@media screen and (min-width: 1200px){.native-js{font-size:1.25rem}}

View File

@ -218,3 +218,105 @@ strong
display: flex display: flex
a a
flex-grow: 1 flex-grow: 1
.native-js
border-radius: 3px
display: none
font-size: 1rem
opacity: 0
margin-bottom: 3rem
margin-left: auto
margin-right: auto
max-width: 50rem
visibility: hidden
.native-show
display: block
opacity: 1
visibility: visible
.native-flex
align-items: center
display: flex
justify-content: center
padding: 2em
text-decoration: none
.native-img
border-radius: 3px
flex-grow: 0
flex-shrink: 0
height: 50px
width: 125px
.native-details
flex-grow: 1
flex-shrink: 1
.native-main
align-items: center
flex-grow: 0
flex-shrink: 1
max-width: 640px
.native-company
display: block
font-size: 0.625em
letter-spacing: 2px
margin-bottom: 4px
text-transform: uppercase
.native-desc
display: block
.native-cta
border: none
border-radius: 3px
box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15)
display: inline-block
flex-grow: 0
flex-shrink: 0
font-size: 0.75em
font-weight: 400
padding: 0.75em 1em
text-transform: uppercase
transform: translateY(-1px)
transition: transform .3s ease-in-out
vertical-align: top
white-space: nowrap
&:hover
box-shadow: none
transform: translateY(1px)
$native-bp: 600px
=from($device)
@media screen and (min-width: $device)
@content
=until($device)
@media screen and (max-width: $device - 1px)
@content
+until($native-bp)
.native-flex
display: block
text-align: center
.native-main
margin-bottom: 2em
.native-details
margin: 1em
+from($native-bp)
.native-flex
display: flex
text-align: left
.native-main
display: flex
margin-right: 2em
.native-details
margin-left: 2em
+from($native-bp * 2)
.native-js
font-size: 1.25rem

View File

@ -42,7 +42,7 @@
</header> </header>
<div class="ghbtns"> <div class="ghbtns">
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=star&count=true&size=large" frameborder="0" scrolling="0" width="130px" height="30px"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
</div> </div>
@ -55,6 +55,83 @@
<pre class="npm">npm install minireset.css</pre> <pre class="npm">npm install minireset.css</pre>
</nav> </nav>
<script src="vendor/native.js"></script>
<script>
_native.init("CKYI42QI", {
targetClass: 'native-js',
fallback: `<a href="https://jgthms.com/css-in-44-minutes-ebook" class="native-flex" target="_blank">
<style>
.native-js {
background: linear-gradient(-30deg, #4f38a4, #a244bc 45%, #4f38a4 45%) #4f38a4;
}
.native-details {
color: #FFFFFF !important;
}
.native-details:hover {
color: #FFFFFF !important;
}
.native-cta {
color: #FFFFFF;
background-color: #3bb76d;
}
.native-cta:hover {
color: #native_cta_color_hover;
background-color: #3bb76d;
}
</style>
<div class="native-main">
<img class="native-img" src="https://bulma.io/images/fortyfour-native.png">
<div class="native-details">
<span class="native-company">CSS in 44 minutes</span>
<span class="native-desc">Learn how to build your own webpage from scratch!</span>
</div>
</div>
<span class="native-cta">Buy the book</span>
</a>`
});
</script>
<div class="native-js">
<a href="#native_link#" class="native-flex">
<style>
.native-js {
background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
}
.native-details {
color: #native_color# !important;
}
.native-details:hover {
color: #native_color_hover# !important;
}
.native-cta {
color: #native_cta_color#;
background-color: #native_cta_bg_color#;
}
.native-cta:hover {
color: #native_cta_color_hover;
background-color: #native_cta_bg_color_hover#;
}
</style>
<div class="native-main">
<img class="native-img" src="#native_logo#">
<div class="native-details">
<span class="native-company">#native_company#</span>
<span class="native-desc">#native_desc#</span>
</div>
</div>
<span class="native-cta">#native_cta#</span>
</a>
</div>
<main class="main"> <main class="main">
<ul> <ul>
<li><strong><em>resets</em> the font sizes</strong>so that using semantic markup doesn't affect the styling</li> <li><strong><em>resets</em> the font sizes</strong>so that using semantic markup doesn't affect the styling</li>

100
docs/vendor/native.js vendored Normal file
View File

@ -0,0 +1,100 @@
var _native = {
construct: function(e) {
var default_options = {
display: "block",
fallback: "",
placement: "",
prefix: "native",
targetClass: "native-ad",
visibleClass: "native-show"
};
if (typeof e == "undefined") return default_options;
Object.keys(default_options).forEach((key, index) => {
if (typeof e[key] == "undefined") {
e[key] = default_options[key];
}
});
return e;
},
init: function(zone, options) {
options = this.construct(options);
this.className = options["targetClass"];
this.displayStyle = options["display"];
this.fallback = options["fallback"];
this.visibleClassName = options["visibleClass"];
this.prefix = options["prefix"];
this.placement = options["placement"];
let jsonUrl = "https://srv.buysellads.com/ads/" + zone + ".json?callback=_native_go";
if (options["placement"] !== "") {
jsonUrl += "&segment=placement:" + options["placement"];
}
let srv = document.createElement("script");
srv.src = jsonUrl;
document.getElementsByTagName("head")[0].appendChild(srv);
},
sanitize: function(ads) {
return ads
.filter(ad => {
return Object.keys(ad).length > 0;
})
.filter(ad => {
return ad.hasOwnProperty("statlink");
});
},
pixel: function(p, timestamp) {
let c = "";
if (p)
p.split("||").forEach((pixel, index) => {
c += '<img src="' + pixel.replace("[timestamp]", timestamp) + '" style="display:none;" height="0" width="0" />';
});
return c;
}
};
var _native_go = function(json) {
let ads = _native.sanitize(json["ads"]);
if (ads.length < 1) {
document.querySelectorAll("." + _native.className).forEach((className, index) => {
document.getElementsByClassName(_native.className)[index].innerHTML = _native.fallback;
if (_native.fallback !== "") document.getElementsByClassName(_native.className)[index].className += " " + _native.visibleClassName;
});
return "No ads found";
}
document.querySelectorAll("." + _native.className).forEach((className, index) => {
if (ads[index] && className) {
let adElement = document.getElementsByClassName(_native.className)[index].innerHTML;
let ad = adElement
.replace(new RegExp("#" + _native.prefix + "_bg_color#", "g"), ads[index]["backgroundColor"])
.replace(new RegExp("#" + _native.prefix + "_bg_color_hover#", "g"), ads[index]["backgroundHoverColor"])
.replace(new RegExp("#" + _native.prefix + "_company#", "g"), ads[index]["company"])
.replace(new RegExp("#" + _native.prefix + "_cta#", "g"), ads[index]["callToAction"])
.replace(new RegExp("#" + _native.prefix + "_cta_bg_color#", "g"), ads[index]["ctaBackgroundColor"])
.replace(new RegExp("#" + _native.prefix + "_cta_bg_color_hover#", "g"), ads[index]["ctaBackgroundHoverColor"])
.replace(new RegExp("#" + _native.prefix + "_cta_color#", "g"), ads[index]["ctaTextColor"])
.replace(new RegExp("#" + _native.prefix + "_cta_color_hover#", "g"), ads[index]["ctaTextColorHover"])
.replace(new RegExp("#" + _native.prefix + "_desc#", "g"), ads[index]["description"])
.replace(new RegExp("#" + _native.prefix + "_index#", "g"), _native.prefix + "-" + ads[index]["i"])
.replace(new RegExp("#" + _native.prefix + "_img#", "g"), ads[index]["image"])
.replace(new RegExp("#" + _native.prefix + "_link#", "g"), ads[index]["statlink"])
.replace(new RegExp("#" + _native.prefix + "_logo#", "g"), ads[index]["logo"])
.replace(new RegExp("#" + _native.prefix + "_color#", "g"), ads[index]["textColor"])
.replace(new RegExp("#" + _native.prefix + "_color_hover#", "g"), ads[index]["textColorHover"])
.replace(new RegExp("#" + _native.prefix + "_title#", "g"), ads[index]["title"]);
document.getElementsByClassName(_native.className)[index].innerHTML = null;
document.getElementsByClassName(_native.className)[index].innerHTML += ad + _native.pixel(ads[index]["pixel"], ads[index]["timestamp"]);
document.getElementsByClassName(_native.className)[index].style.display = _native.displayStyle;
if (_native.className !== "") document.getElementsByClassName(_native.className)[index].className += " " + _native.visibleClassName;
} else {
document.getElementsByClassName(_native.className)[index].innerHTML = null;
document.getElementsByClassName(_native.className)[index].style.display = "none";
}
});
};