Bulma v9 website (#3249)

* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute

docs/_includes/elements/anchor.html

@@ -1,5 +1,3 @@
-<hr class="hr" style="margin-bottom: 0;">
-
 <h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
   <span class="bd-anchor-name">
     {{ include.name }}

docs/_includes/elements/backers-group.html

@@ -0,0 +1,19 @@
+{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %}
+  <div class="bd-backers-heading">
+    <h2>{{ include.title }}</h2>
+  </div>
+
+  <div class="bd-backers-group">
+    <ul class="bd-backers-list bd-is-patreon">
+      {% for pt in site.data.backers[include.tier] reversed %}
+        {% include elements/patreon-item.html backer=pt %}
+      {% endfor %}
+    </ul>
+
+    <ul class="bd-backers-list bd-is-github">
+      {% for gh in site.data.github[include.tier] reversed %}
+        {% include elements/github-item.html sponsor=gh %}
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}

docs/_includes/elements/banner.html

@@ -0,0 +1,9 @@
+<section class="bd-banner bd-is-{{ include.color }}">
+  <div class="bd-banner-body">
+    <p class="bd-banner-title">
+      {{ include.title }}
+    </p>
+
+    {{ include.more }}
+  </div>
+</section>

docs/_includes/elements/github-item.html

@@ -1,4 +1,8 @@
-<tr>
-  <td>{{ backer }}</td>
-  <td colspan="2"><a href="https://github.com/{{ backer }}" target="_blank" rel="nofollow">GitHub</a></td>
-</tr>
+<li>
+  <span class="icon-text">
+    <span>{{ include.sponsor }}</span>
+    <a class="icon" href="https://github.com/{{ include.sponsor }}" target="_blank" rel="nofollow">
+      <i class="fab fa-github-alt"></i>
+    </a>
+  </span>
+</li>

docs/_includes/elements/improve-page.html

@@ -1,9 +1,8 @@
-<div id="typo" class="bd-typo">
+<div id="typo" class="bd-docs-typo">
   <p class="has-text-grey-light">
-    <a href="{{ site.url }}/made-with-bulma/">
+    <a class="is-pulled-right" href="{{ site.url }}/made-with-bulma/">
       <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
     </a>
-    <br>
     This page is <strong class="has-text-grey">open source</strong>.
     Noticed a typo? Or something unclear?
     <br>

docs/_includes/elements/link.html

@@ -5,31 +5,33 @@
     </p>
   {% endif %}
 
-  <h2 class="bd-link-name">
-    <figure class="bd-link-figure">
-      {% if include.icon %}
-        <span class="bd-link-icon has-text-link">
-          <i class="{% if include.icon_brand %}fab{% elsif include.icon_regular %}far{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
-        </span>
-      {% else %}
-        <span class="bd-link-counter"></span>
-      {% endif %}
-    </figure>
-    {% if include.new %}
-      <span style="float: right;" class="ml-2 tag is-primary">
-        New!
-      </span>
-    {% endif %}
-    {{ include.name }}
-  </h2>
-
-  <div class="bd-link-subtitle">
-    {{ include.subtitle }}
-  </div>
-
-  {% if include.more %}
-    <div class="bd-link-more">
-      {{ include.more }}
-    </div>
+  {% if include.icon %}
+    <span class="icon bd-link-icon">
+      <i class="{% if include.icon_brand %}fab{% elsif include.icon_regular %}far{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
+    </span>
+  {% else %}
+    <span class="bd-link-counter"></span>
   {% endif %}
+
+  <div class="bd-link-body">
+    <h2 class="bd-link-title">
+      {% if include.new %}
+        <span style="float: right;" class="ml-2 tag is-primary">
+          New!
+        </span>
+      {% endif %}
+
+      {{ include.name }}
+    </h2>
+
+    <div class="bd-link-subtitle">
+      {{ include.subtitle }}
+    </div>
+
+    {% if include.more %}
+      <div class="bd-link-more">
+        {{ include.more }}
+      </div>
+    {% endif %}
+  </div>
 </a>

docs/_includes/elements/meta.html

@@ -1,60 +1,56 @@
-<div id="meta" class="field is-grouped is-grouped-multiline">
+<div id="meta" class="bd-features">
+  <div class="bd-features-title">
+    Features
+  </div>
 
-  {% if include.new %}
-    <div class="control">
-      <div class="tags">
-        <span class="tag is-primary">New!</span>
-      </div>
-    </div>
-  {% endif %}
+  <ul class="bd-features-list">
+    {% if include.new %}
+      <li class="bd-feature">
+        <span class="bd-feature-label">New!</span>
+      </li>
+    {% endif %}
 
-  {% if include.experimental %}
-    <div class="control">
-      <div class="tags">
-        <span class="tag is-warning">Experimental</span>
-      </div>
-    </div>
-  {% endif %}
+    {% if include.experimental %}
+      <li class="bd-feature">
+        <strong class="bd-feature-label has-text-danger">Experimental</strong>
+      </li>
+    {% endif %}
 
-  {% if include.since %}
-    <div class="control">
-      <div class="tags has-addons">
-        <span class="tag">Since</span>
-        <span class="tag is-info">{{ include.since }}</span>
-      </div>
-    </div>
-  {% endif %}
+    {% if include.since %}
+      <li class="bd-feature">
+        <span class="bd-feature-label">Since</span>
+        <span class="bd-feature-since">{{ include.since }}</span>
+      </li>
+    {% endif %}
+
+    <li class="bd-feature">
+      <span class="bd-feature-label">Colors</span>
 
-  <div class="control">
-    <div class="tags has-addons">
-      <span class="tag">Colors</span>
       {% if include.colors %}
-        <a class="tag is-success" href="#colors">Yes</a>
+        <a class="bd-feature-yes" href="#colors">Yes</a>
       {% else %}
-        <span class="tag is-danger">No</span>
+        <span class="bd-feature-no">No</span>
       {% endif %}
-    </div>
-  </div>
+    </li>
+
+    <li class="bd-feature">
+      <span class="bd-feature-label">Sizes</span>
 
-  <div class="control">
-    <div class="tags has-addons">
-      <span class="tag">Sizes</span>
       {% if include.sizes %}
-        <a class="tag is-success" href="#sizes">Yes</a>
+        <a class="bd-feature-yes" href="#sizes">Yes</a>
       {% else %}
-        <span class="tag is-danger">No</span>
+        <span class="bd-feature-no">No</span>
       {% endif %}
-    </div>
-  </div>
+    </li>
+
+    <li class="bd-feature">
+      <span class="bd-feature-label">Variables</span>
 
-  <div class="control">
-    <div class="tags has-addons">
-      <span class="tag">Variables</span>
       {% if include.variables %}
-        <a class="tag is-success" href="#variables">Yes</a>
+        <a class="bd-feature-yes" href="#variables">Yes</a>
       {% else %}
-        <span class="tag is-danger">No</span>
+        <span class="bd-feature-no">No</span>
       {% endif %}
-    </div>
-  </div>
+    </li>
+  </ul>
 </div>

docs/_includes/elements/patreon-item.html

@@ -1,19 +1,17 @@
-<tr>
-  <td>{{ backer.name }}</td>
+<li>
+  <p>{{ include.backer.name }}</p>
 
-  <td>
-    {% if backer.twitter != "" %}
-      <a href="https://twitter.com/{{ backer.twitter }}" target="_blank" rel="nofollow">
-        @{{ backer.twitter }}
-      </a>
-    {% endif %}
-  </td>
+  {% if include.backer.twitter != "" %}
+    <a class="icon-text bd-is-twitter" href="https://twitter.com/{{ include.backer.twitter }}" target="_blank" rel="nofollow">
+      <span class="icon"><i class="fab fa-twitter"></i></span>
+      <span>{{ include.backer.twitter }}</span>
+    </a>
+  {% endif %}
 
-  <td>
-    {% if backer.website_url %}
-      <a href="{{ backer.website_url }}" target="_blank" rel="nofollow">
-        {{ backer.website_name }}
-      </a>
-    {% endif %}
-  </td>
-</tr>
+  {% if include.backer.discord != "" %}
+    <span class="icon-text bd-is-discord">
+      <span class="icon"><i class="fab fa-discord"></i></span>
+      <span>{{ include.backer.discord }}</span>
+    </span>
+  {% endif %}
+</li>

docs/_includes/elements/post.html

@@ -0,0 +1,34 @@
+{% assign date = post.date | date: "%B %-d" %}
+{% assign title = post.title | markdownify %}
+{% assign introduction = post.introduction | markdownify %}
+
+<div class="bd-post {% if post.featured %}is-featured{% endif %}">
+  <a class="bd-post-link" href="{{ site.url }}{{ post.url }}" style="--color: var(--{{ post.color }});">
+    <div class="bd-post-body">
+      <figure class="icon">
+        <i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+      </figure>
+
+      <div class="bd-post-content">
+        <h2 class="title">
+          {{ title }}
+        </h2>
+        <div class="subtitle">
+          {{ introduction }}
+        </div>
+      </div>
+    </div>
+
+    {% if post.image %}
+      <figure class="bd-post-image">
+        <img
+             src="https://source.unsplash.com/{{ post.image }}/400x240"
+          srcset="https://source.unsplash.com/{{ post.image }}/400x240 1x,
+                  https://source.unsplash.com/{{ post.image }}/800x480 2x"
+          alt="{{ post.alt }}"
+          width="400"
+          height="240">
+      </figure>
+    {% endif %}
+  </a>
+</div>

docs/_includes/elements/rss-button.html

@@ -0,0 +1,6 @@
+<a class="button is-rss" href="{{ site.url }}/atom.xml">
+  <span class="icon">
+    <i class="fas fa-rss"></i>
+  </span>
+  <span>Subscribe</span>
+</a>

docs/_includes/elements/snippet.html

@@ -1,24 +1,16 @@
-{% if include.plain %}
-  <div class="columns">
-    <div class="column is-half">
-      <div class="bd-example">
-        {{ include.content }}
-      </div>
-    </div>
-    <div class="column is-half">
-      {% highlight html %}{{ include.content }}{% endhighlight %}
-    </div>
-  </div>
-{% else %}
-  <div class="
-    bd-snippet
-    {% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
-    {% if include.clipped %}bd-is-clipped{% endif %}
-    {% if include.size %}bd-is-{{ include.size }}{% endif %}
-    {% if include.one_fifth %}bd-is-one-fifth{% endif %}
-    {% if include.fullwidth %}bd-is-fullwidth{% endif %}
-    ">
-    <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
+<div class="
+  bd-snippet
+  {% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
+  {% if include.fullwidth %}bd-is-fullwidth{% endif %}
+  {% if include.clipped %}bd-is-clipped{% endif %}
+  {% if include.size %}bd-is-size-{{ include.size }}{% endif %}
+  ">
+  <div class="bd-snippet-example">
+    <p class="bd-snippet-title">
+      <span class="bd-snippet-tag bd-is-example">Example</span>
+    </p>
+
+    <div class="bd-snippet-preview">
       {% if include.wrapper %}
         <div class="{{ include.wrapper }}">
           {{ include.content }}
@@ -27,8 +19,21 @@
         {{ include.content }}
       {% endif %}
     </div>
-    <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
+  </div>
+
+  <div class="bd-snippet-source">
+    <p class="bd-snippet-title">
+      <span class="bd-snippet-tag bd-is-html">HTML</span>
+    </p>
+
+    <div
+      class="
+        bd-snippet-code
+        {% unless include.clipped %}bd-highlight-full{% endunless %}
+        {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}
+      "
+    >
       {% highlight html %}{{ include.content }}{% endhighlight %}
     </div>
   </div>
-{% endif %}
+</div>

docs/_includes/elements/sponsor-button.html

@@ -0,0 +1,6 @@
+<a class="button bd-fat-button is-sponsor"
+  href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}">
+  <span>
+    Become a sponsor
+  </span>
+</a>

docs/_includes/elements/sponsor-item.html

@@ -5,30 +5,28 @@
   {% assign sponsor_alt = sponsor.title %}
 {% endif %}
 
-<div class="{{ include.classname }}">
-  <a
-    class="bd-sponsor-item"
-    href="{{ sponsor.url }}"
-    target="_blank"
-    {% unless sponsor.follow or sponsor.noopener %}
-    rel="nofollow"
-    {% endunless %}
-    {% if sponsor.noopener %}
-    rel="noopener"
-    {% endif %}
-    title="{{ sponsor_alt }}"
-    >
-    {% if sponsor.textOnly %}
-      <strong>{{ sponsor.textOnly }}</strong>
-    {% else %}
-    {%
-        include elements/responsive-image-2x.html
-        path=sponsor_path
-        extension="png"
-        alt=sponsor_alt
-        width=sponsor.width
-        height=sponsor.height
-      %}
-    {% endif %}
-  </a>
-</div>
+<a
+class="bd-sponsor-item {{ include.classname }}"
+href="{{ sponsor.url }}"
+target="_blank"
+{% unless sponsor.follow or sponsor.noopener %}
+rel="nofollow"
+{% endunless %}
+{% if sponsor.noopener %}
+rel="noopener"
+{% endif %}
+title="{{ sponsor_alt }}"
+>
+{% if sponsor.textOnly %}
+  <strong>{{ sponsor.textOnly }}</strong>
+{% else %}
+{%
+    include elements/responsive-image-2x.html
+    path=sponsor_path
+    extension="png"
+    alt=sponsor_alt
+    width=sponsor.width
+    height=sponsor.height
+  %}
+{% endif %}
+</a>

docs/_includes/elements/tw-button.html

@@ -1,9 +1,9 @@
-<a class="bd-tw-button button"
+<a class="bd-tw-button bd-fat-button button is-twitter"
   data-social-network="Twitter"
   data-social-action="tweet"
   data-social-target="https://bulma.io"
   target="_blank"
-  href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&hashtags=bulmaio&url={{ 'https://bulma.io' | urlencode }}&via=jgthms">
+  href="{{ include.href }}">
   <span class="icon">
     <i class="fab fa-twitter"></i>
   </span>

docs/_includes/elements/tw.html

@@ -28,27 +28,29 @@
     </a>
   </p>
 
-  <ul class="Tweet-actions">
-    <li class="Tweet-action">
-      <a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
-        <div class="Icon Icon--reply TweetAction-icon Icon--replyEdge"></div>
+  <ul class="bd-tw-actions">
+    <li class="bd-tw-action is-reply">
+      <a class="bd-tw-action-link" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
+        <div class="bd-tw-icon"></div>
       </a>
     </li>
-    <li class="Tweet-action Tweet-action--retweet">
-      <a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
-        <div class="Icon Icon--retweet TweetAction-icon Icon--retweetEdge"></div>
+
+    <li class="bd-tw-action is-retweet">
+      <a class="bd-tw-action-link" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
+        <div class="bd-tw-icon"></div>
         {% if tweet.retweets != 0 %}
-          <span class="TweetAction-stat">
+          <span class="bd-tw-action-stat">
             {{ tweet.retweets }}
           </span>
         {% endif %}
       </a>
     </li>
-    <li class="Tweet-action Tweet-action--heart">
-      <a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
-        <div class="Icon Icon--heartEdge TweetAction-icon Icon--heartEdge"></div>
+
+    <li class="bd-tw-action is-heart">
+      <a class="bd-tw-action-link" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
+        <div class="bd-tw-icon"></div>
         {% if tweet.hearts != 0 %}
-          <span class="TweetAction-stat">
+          <span class="bd-tw-action-stat">
             {{ tweet.hearts }}
           </span>
         {% endif %}