mirror of
https://github.com/jgthms/minireset.css.git
synced 2024-10-22 22:31:05 +08:00
Add native
This commit is contained in:
parent
409f53b248
commit
a0190527a9
10
docs/.gitignore
vendored
Normal file
10
docs/.gitignore
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
# Files
|
||||
|
||||
.DS_Store
|
||||
.jekyll-metadata
|
||||
_config.local.yml
|
||||
|
||||
# Folders
|
||||
|
||||
.sass-cache
|
||||
_site
|
@ -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}}
|
||||
|
102
docs/docs.sass
102
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
|
||||
|
@ -42,7 +42,7 @@
|
||||
</header>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -55,6 +55,83 @@
|
||||
<pre class="npm">npm install minireset.css</pre>
|
||||
</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">
|
||||
<ul>
|
||||
<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
100
docs/vendor/native.js
vendored
Normal 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";
|
||||
}
|
||||
});
|
||||
};
|
Loading…
Reference in New Issue
Block a user