Add extensions

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>