Add extensions

docs/_includes/blog-hero.html

@@ -2,7 +2,7 @@
   {% include navbar.html id="BlogHero" %}
 </div>
 
-<section class="hero is-primary">
+<section class="hero is-warning">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">
@@ -13,7 +13,7 @@
           <p class="subtitle">
             Stay updated about new features, bug fixes, and releases
           </p>
-          <a class="button is-primary is-inverted" href="{{ site.url }}/atom.xml">
+          <a class="button is-rss" href="{{ site.url }}/atom.xml">
             <span class="icon">
               <i class="fa fa-rss"></i>
             </span>

docs/_includes/navbar.html

@@ -62,7 +62,7 @@
           </a>
           <hr class="navbar-divider">
           <div class="navbar-item">
-            <div>version <p class="has-text-info">{{ site.version }}</p></div>
+            <div>version <p class="has-text-info is-size-6-desktop">{{ site.version }}</p></div>
           </div>
         </div>
       </div>
@@ -108,6 +108,33 @@
           </div>
         </div>
       </div>
+      <div class="navbar-item has-dropdown is-hoverable">
+        <div class="navbar-link">
+          More
+        </div>
+        <div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
+          <a class="navbar-item {% if page.route == 'extensions' %}is-active{% endif %}" href="{{ site.url }}/extensions/">
+            <div class="level is-mobile">
+              <div class="level-left">
+                <div class="level-item">
+                  <p>
+                    <strong>Extensions</strong>
+                    <br>
+                    <small>Side projects to enhance Bulma</small>
+                  </p>
+                </div>
+              </div>
+              <div class="level-right">
+                <div class="level-item">
+                  <span class="icon has-text-info">
+                    <i class="fa fa-plug"></i>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
     </div>
 
     <div class="navbar-end">

docs/_sass/header.sass

@@ -22,3 +22,9 @@ $twitter: #55acee
     width: 16rem
     .navbar-item
       white-space: normal
+  #moreDropdown
+    width: 16rem
+    .navbar-item
+      padding-right: 1rem
+      .level
+        flex-grow: 1

docs/extensions.html

@@ -0,0 +1,90 @@
+---
+layout: default
+route: extensions
+extensions:
+- name: bulma-badge
+  url: https://github.com/Wikiki/bulma-badge
+  slug: bulma-badge
+  width: 455
+  height: 133
+- name: bulma-steps
+  url: https://github.com/Wikiki/bulma-steps
+  slug: bulma-steps
+  width: 989
+  height: 89
+- name: bulma-tooltip
+  url: https://github.com/Wikiki/bulma-tooltip
+  slug: bulma-tooltip
+  width: 215
+  height: 55
+- name: bulma-timeline
+  url: https://github.com/Wikiki/bulma-timeline
+  slug: bulma-timeline
+  width: 435
+  height: 228
+---
+
+<div class="container">
+  {% include navbar.html id="Extensions" %}
+</div>
+
+<section class="hero is-info">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column">
+          <h1 class="title">
+            <a href="{{ site.url }}/blog">Extensions</a>
+          </h1>
+          <p class="subtitle">
+            Side projects to enhance Bulma
+          </p>
+        </div>
+        <div class="column is-narrow">
+          {% include carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container">
+    {% for extension in page.extensions %}
+      <a class="box" href="{{ extension.url }}">
+        <div class="columns">
+          <div class="column is-one-third">
+            <h3 class="title is-4">
+              <strong>{{ extension.name }}</strong>
+            </h3>
+            <h4 class="subtitle is-6">
+              {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }}
+            </h4>
+          </div>
+          <div class="column">
+            <img src="{{site.url}}/images/extensions/{{ extension.slug }}.png" width="{{ extension.width }}" height="{{ extension.height }}">
+          </div>
+        </div>
+      </a>
+    {% endfor %}
+
+    <div class="message">
+      <div class="message-body">
+        <div class="level">
+          <div class="level-left">
+            <div class="level-item">
+              <p>Have an extension to share with the community?</p>
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+              <a class="button is-primary" href="https://github.com/jgthms/bulma/pulls">
+                Submit a Pull Request
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

sass/base/generic.sass

@@ -62,6 +62,7 @@ hr
   margin: 1.5rem 0
 
 img
+  height: auto
   max-width: 100%
 
 input[type="checkbox"],

sass/base/helpers.sass

@@ -50,6 +50,29 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 // Text
 
+@each $size in $sizes
+  $i: index($sizes, $size)
+  .is-size-#{$i}
+    font-size: $size
+  +mobile
+    .is-size-#{$i}-mobile
+      font-size: $size
+  +tablet
+    .is-size-#{$i}-tablet
+      font-size: $size
+  +touch
+    .is-size-#{$i}-touch
+      font-size: $size
+  +desktop
+    .is-size-#{$i}-desktop
+      font-size: $size
+  +widescreen
+    .is-size-#{$i}-widescreen
+      font-size: $size
+  +fullhd
+    .is-size-#{$i}-fullhd
+      font-size: $size
+
 .has-text-centered
   text-align: center !important
 

sass/components/message.sass

@@ -30,10 +30,10 @@
   line-height: 1.25
   padding: 0.5em 0.75em
   position: relative
-  a,
+  a:not(.button),
   strong
     color: currentColor
-  a
+  a:not(.button)
     text-decoration: underline
   .delete
     flex-grow: 0
@@ -49,10 +49,10 @@
   border-radius: $radius
   color: $text
   padding: 1em 1.25em
-  a,
+  a:not(.button),
   strong
     color: currentColor
-  a
+  a:not(.button)
     text-decoration: underline
   code,
   pre