Add list of tags post

docs/_includes/navbar.html

@@ -39,6 +39,9 @@
           <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
             Grid
           </a>
+          <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
           <a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
             Form
           </a>
@@ -54,9 +57,6 @@
               Components
             </a>
           {% endif %}
-          <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
-            Layout
-          </a>
           <hr class="navbar-divider">
           <div class="navbar-item">
             <div>

docs/_posts/2017-08-03-list-of-tags.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: "New feature: list of tags"
+introduction: "What's better than one tag? Multiple tags!"
+color: "orange"
+name: "List of tags"
+icon: "tag"
+---
+
+The [tag](/documentation/elements/tag/) is a small but useful element that can be used in many contexts, to **enhance** the meaning of the text it's attached to.
+
+A tag rarely comes on its own though, so Bulma now supports [list of tags](/documentation/elements/tag/#list-of-tags). The same way you can [group controls](together), you can now **group tags together** to form a list that can span multiple lines.
+
+<figure>
+  <a href="/documentation/elements/tag/#list-of-tags">
+    <img src="/images/blog/list-of-tags.png" alt="List of tags in CSS" width="660" height="401">
+  </a>
+</figure>
+
+As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!

docs/_sass/specific.sass

@@ -61,6 +61,8 @@
       background-color: $color
   &.is-bootstrap
     background-color: $bootstrap
+  &.is-orange
+    background-color: $orange
   &:hover
     .article-overlay
       opacity: 0.25

docs/css/bulma-docs.css

@@ -2310,6 +2310,7 @@ a.box:active {
 }
 
 .content figure {
+  margin: 2em;
   text-align: center;
 }
 
@@ -10269,6 +10270,10 @@ html.route-index #carbon {
   background-color: #6f5499;
 }
 
+.article-image.is-orange {
+  background-color: #ff470f;
+}
+
 .article-image:hover .article-overlay {
   opacity: 0.25;
 }

sass/elements/content.sass

@@ -86,6 +86,7 @@ $content-table-foot-cell-color: $text-strong !default
   dd
     margin-left: 2em
   figure
+    margin: 2em
     text-align: center
     img
       display: inline-block