Add Font Awesome 5 blog post

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index 5503d3266bbefde8479218f58b8d42ea6f9692b8..ada1544b9b0f4130e2324c8023f86fd7039ea25d 100644 (file)
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -3,30 +3,31 @@ layout: default
 route: blog
 ---
 
-{% include blog-hero.html %}
+{% include navbar.html id="BlogHero" %}
+
+<div class="bd-article-image is-single is-{{ page.color }}">
+  <span class="bd-article-overlay"></span>
+  <span class="bd-article-icon">
+    <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
+  </span>
+  <strong class="bd-article-info">
+    <span>
+      <time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
+        {{ page.date | date_to_string }}
+      </time>
+      <strong class="bd-article-title">
+        {{ page.name }}
+      </strong>
+    </span>
+  </strong>
+</div>
 
 <section class="section">
   <div class="container">
     <div class="columns">
       <div class="column is-offset-2 is-8">
-        <div class="bd-article-image is-single is-{{ page.color }}">
-          <span class="bd-article-overlay"></span>
-          <span class="bd-article-icon">
-            <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
-          </span>
-          <strong class="bd-article-info">
-            <span>
-              <time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
-                {{ page.date | date_to_string }}
-              </time>
-              <strong class="bd-article-title">
-                {{ page.name }}
-              </strong>
-            </span>
-          </strong>
-        </div>
         <p class="subtitle is-6">
-          <a class="bd-article-back" href="{{ site.url }}/blog">Back</a>
+          <a class="bd-article-back" href="{{ site.url }}/blog">Back to Blog home</a>
         </p>
         <h1 class="title is-2">
           {{ page.title }}

diff --git a/docs/_posts/2017-10-22-list-of-buttons.md b/docs/_posts/2017-10-22-list-of-buttons.md
index 3afc4b16b1337e08be25e3d47d27dd7e9750c747..760ee2ec02b05777100852d855fa2eaef8c649fe 100644 (file)
--- a/docs/_posts/2017-10-22-list-of-buttons.md
+++ b/docs/_posts/2017-10-22-list-of-buttons.md
@@ -4,7 +4,7 @@ title: "New feature: list of buttons"
 introduction: "What's better than one button? Multiple buttons!"
 color: "danger"
 name: "List of buttons"
-icon: "hand-pointer-o"
+icon: "hand-pointer"
 ---
 
 Similarly to the [list of tags](/2017/08/03/list-of-tags/) launched a few months ago, the [button](/documentation/elements/button/) has its own **list of buttons**:

diff --git a/docs/_posts/2017-11-01-fixed-navbar.md b/docs/_posts/2017-11-01-fixed-navbar.md
index fc5fe32285dbac624262949d7956a0a23f6b323b..16311c0ffb0a152f694e4082483996b8513ce07a 100644 (file)
--- a/docs/_posts/2017-11-01-fixed-navbar.md
+++ b/docs/_posts/2017-11-01-fixed-navbar.md
@@ -2,7 +2,7 @@
 layout: post
 title: "New feature: fixed navbar"
 introduction: "Fix your navbar at the top or bottom"
-color: "info"
+color: "success"
 name: "Fixed navbar"
 icon: "map-pin"
 ---

diff --git a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
new file mode 100644 (file)
index 0000000..1e0fd6b
--- /dev/null
+++ b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
@@ -0,0 +1,24 @@
+---
+title: "Bulma supports Font Awesome 5"
+layout: post
+introduction: "No change required!"
+color: "info"
+name: "Font Awesome 5"
+icon: "font-awesome-alt"
+icon_brand: true
+---
+
+Bulma is **icon library agnostic**: this means that you can use _any_ icon font library (like Font Awesome 4 or 5, Material Design Icons, Open Iconic, Ionicons…) with Bulma's `icon` class.
+
+As a result, **Bulma already supports Font Awesome 5**! 😃
+
+Since the `icon` element is simply a **container** for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5.
+
+For the sake of being in sync with Bulima users, I've recently updated the website to actually use Font Awesome 5! The process of **migrating** from Font Awesome 4 to 5 is straightforward. You simply need to:
+
+1. include Font Awesome 5 instead, [using the script tag](https://fontawesome.com/get-started)
+2. replace `fa` classes with their `fas` and `fab` equivalents
+
+That's it!
+
+Check out the [icon documentation](/documentation/elements/icon/).
\ No newline at end of file