{% include book-banner.html %}
-{% include bsa.html %}
-
{% include newsletter.html %}
<footer class="footer">
--- /dev/null
+<script src="{{ site.url }}/vendor/native.js"></script>
+<script>
+ _native.init("CKYIT2QJ", {
+ 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, #DA3925E5, #DA3925E5 45%, #DA3925 45%) #fff;
+ }
+
+ .native-details {
+ color: #FFFFFF !important;
+ }
+
+ .native-details:hover {
+ color: #FFFFFF !important;
+ }
+
+ .native-cta {
+ color: #FFFFFF;
+ background-color: #626469;
+ }
+
+ .native-cta:hover {
+ color: #native_cta_color_hover;
+ background-color: #626469;
+ }
+ </style>
+ <div class="native-main">
+ <img class="native-img" src="/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>
<section class="section bd-typo">
<div class="container">
+ {% include native.html %}
+
<p class="has-text-centered has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
<br>
This page is <strong class="has-text-grey">open source</strong>.
Noticed a typo? Or something unclear?
+ <br>
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
Improve this page on GitHub
</a>
</nav>
</div>
</div>
+
+ {% include native.html %}
</div>
</section>
--- /dev/null
+.native-js
+ display: none
+ margin-left: auto
+ margin-right: auto
+ max-width: 760px
+ opacity: 0
+ visibility: hidden
+ &:not(:first-child)
+ margin-top: 3rem
+ &:not(:last-child)
+ margin-bottom: 3rem
+
+.native-show
+ display: block
+ opacity: 1
+ visibility: visible
+
+.native-flex
+ align-items: center
+ display: flex
+ justify-content: space-between
+ padding: 1.5rem
+ 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: 1
+ flex-shrink: 1
+
+.native-company
+ display: block
+ font-size: 10px
+ 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: $size-small
+ font-weight: $weight-normal
+ 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
+
++until($native-bp)
+ .native-flex
+ display: block
+ text-align: center
+ .native-main
+ margin-bottom: 2rem
+ .native-details
+ margin: 1rem
+
++from($native-bp)
+ .native-flex
+ display: flex
+ text-align: left
+ .native-main
+ display: flex
+ margin-right: 2rem
+ .native-details
+ margin-left: 2rem
{% include blog-hero.html %}
- <section class="section">
- <div class="container">
- <div class="columns is-multiline">
- {% for post in site.posts %}
- <article class="column is-4">
- <a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
- <span class="bd-article-overlay"></span>
- <span class="bd-article-icon">
- <i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+<section class="section">
+ <div class="container">
+ <div class="columns is-multiline">
+ {% for post in site.posts %}
+ <article class="column is-4">
+ <a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
+ <span class="bd-article-overlay"></span>
+ <span class="bd-article-icon">
+ <i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+ </span>
+ <strong class="bd-article-info">
+ <span>
+ <time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
+ {{ post.date | date_to_string }}
+ </time>
+ <strong class="bd-article-title">
+ {{ post.name }}
+ </strong>
</span>
- <strong class="bd-article-info">
- <span>
- <time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
- {{ post.date | date_to_string }}
- </time>
- <strong class="bd-article-title">
- {{ post.name }}
- </strong>
- </span>
- </strong>
- </a>
- </article>
- {% endfor %}
- </div>
+ </strong>
+ </a>
+ </article>
+ {% endfor %}
</div>
- </section>
+
+ {% include native.html %}
+ </div>
+</section>
@import "./_sass/patreon"
@import "./_sass/sponsors"
@import "./_sass/book"
+@import "./_sass/native"
}
}
+.native-js {
+ display: none;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 760px;
+ opacity: 0;
+ visibility: hidden;
+}
+
+.native-js:not(:first-child) {
+ margin-top: 3rem;
+}
+
+.native-js:not(:last-child) {
+ margin-bottom: 3rem;
+}
+
+.native-show {
+ display: block;
+ opacity: 1;
+ visibility: visible;
+}
+
+.native-flex {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 1.5rem;
+ text-decoration: none;
+}
+
+.native-img {
+ border-radius: 3px;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ height: 50px;
+ width: 125px;
+}
+
+.native-details {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+}
+
+.native-main {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+}
+
+.native-company {
+ display: block;
+ font-size: 10px;
+ letter-spacing: 2px;
+ margin-bottom: 4px;
+ text-transform: uppercase;
+}
+
+.native-desc {
+ display: block;
+}
+
+.native-cta {
+ border: none;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15);
+ display: inline-block;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ font-size: 0.75rem;
+ font-weight: 400;
+ padding: 0.75em 1em;
+ text-transform: uppercase;
+ -webkit-transform: translateY(-1px);
+ transform: translateY(-1px);
+ -webkit-transition: -webkit-transform .3s ease-in-out;
+ transition: -webkit-transform .3s ease-in-out;
+ transition: transform .3s ease-in-out;
+ transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+ vertical-align: top;
+ white-space: nowrap;
+}
+
+.native-cta:hover {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ -webkit-transform: translateY(1px);
+ transform: translateY(1px);
+}
+
+@media screen and (max-width: 599px) {
+ .native-flex {
+ display: block;
+ text-align: center;
+ }
+ .native-main {
+ margin-bottom: 2rem;
+ }
+ .native-details {
+ margin: 1rem;
+ }
+}
+
+@media screen and (min-width: 600px) {
+ .native-flex {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ text-align: left;
+ }
+ .native-main {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-right: 2rem;
+ }
+ .native-details {
+ margin-left: 2rem;
+ }
+}
+
/*# sourceMappingURL=bulma-docs.css.map */
\ No newline at end of file
<span>Contribute</span>
</a>
</div>
+ {% include native.html %}
</div>
</section>
--- /dev/null
+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";
+ }
+ });
+};
projects / thirdparty / bulma.git / commitdiff
