Add native

docs/_includes/footer.html

@@ -1,7 +1,5 @@
 {% include book-banner.html %}
 
-{% include bsa.html %}
-
 {% include newsletter.html %}
 
 <footer class="footer">

docs/_includes/native.html

@@ -0,0 +1,75 @@
+<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>

docs/_layouts/documentation.html

@@ -59,6 +59,8 @@ route: documentation
 
 <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">
@@ -66,6 +68,7 @@ route: documentation
       <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>

docs/_layouts/post.html

@@ -47,5 +47,7 @@ route: blog
         </nav>
       </div>
     </div>
+
+    {% include native.html %}
   </div>
 </section>

docs/_sass/native.sass

@@ -0,0 +1,89 @@
+.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

docs/blog.html

@@ -5,29 +5,31 @@ route: blog
 
 {% include blog-hero.html %}
 
-  <section class="section">
+<section class="section">
-    <div class="container">
+  <div class="container">
-      <div class="columns is-multiline">
+    <div class="columns is-multiline">
-        {% for post in site.posts %}
+      {% for post in site.posts %}
-          <article class="column is-4">
+        <article class="column is-4">
-            <a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
+          <a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
-              <span class="bd-article-overlay"></span>
+            <span class="bd-article-overlay"></span>
-              <span class="bd-article-icon">
+            <span class="bd-article-icon">
-                <i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+              <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">
+            </strong>
-                <span>
+          </a>
-                  <time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
+        </article>
-                    {{ post.date | date_to_string }}
+      {% endfor %}
-                  </time>
-                  <strong class="bd-article-title">
-                    {{ post.name }}
-                  </strong>
-                </span>
-              </strong>
-            </a>
-          </article>
-        {% endfor %}
-      </div>
     </div>
-  </section>
+
+    {% include native.html %}
+  </div>
+</section>

docs/bulma-docs.sass

@@ -30,3 +30,4 @@ $bleeding-red: #CA1F26
 @import "./_sass/patreon"
 @import "./_sass/sponsors"
 @import "./_sass/book"
+@import "./_sass/native"

docs/css/bulma-docs.css

@@ -13771,4 +13771,146 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   }
 }
 
+.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 */

docs/index.html

@@ -493,5 +493,6 @@ fixed_navbar: true
         <span>Contribute</span>
       </a>
     </div>
+    {% include native.html %}
   </div>
 </section>

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 += '<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";
+    }
+  });
+};