diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..c0d9748
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,10 @@
+# Files
+
+.DS_Store
+.jekyll-metadata
+_config.local.yml
+
+# Folders
+
+.sass-cache
+_site
diff --git a/docs/docs.css b/docs/docs.css
index 6eafa25..518ba8a 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -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}}
diff --git a/docs/docs.sass b/docs/docs.sass
index eb8ffff..3b5c8ac 100644
--- a/docs/docs.sass
+++ b/docs/docs.sass
@@ -218,3 +218,105 @@ strong
display: flex
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 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
diff --git a/docs/index.html b/docs/index.html
index fdfe403..f036b19 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,7 +42,7 @@
-
+
@@ -55,6 +55,83 @@
npm install minireset.css
+
+
+
+
+
+
- resets the font sizesso that using semantic markup doesn't affect the styling
diff --git a/docs/vendor/native.js b/docs/vendor/native.js
new file mode 100644
index 0000000..1e96b20
--- /dev/null
+++ b/docs/vendor/native.js
@@ -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 += '';
+ });
+ 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";
+ }
+ });
+};