Update docs to match current version

diff --git a/docs/documentation/grid.html b/docs/documentation/grid.html
deleted file mode 100644 (file)
index 1847c63..0000000
--- a/docs/documentation/grid.html
+++ /dev/null
@@ -1,749 +0,0 @@
----
-layout: documentation
-doc-tab: grid
----
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Grid</h1>
-    <h2 class="subtitle">A simple way to build columns</h2>
-    <hr>
-    <div class="content">
-      <p>To build a <strong>grid</strong>, just:</p>
-      <ol>
-        <li>Add a <code>columns</code> container</li>
-        <li>Add as many <code>column</code> elements as you want</li>
-      </ol>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <p class="notification is-info">First column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">Second column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">Third column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">Fourth column</p>
-      </div>
-    </div>
-
-{% highlight html %}
-<div class="columns">
-  <div class="column">
-    First column
-  </div>
-  <div class="column">
-    Second column
-  </div>
-  <div class="column">
-    Third column
-  </div>
-  <div class="column">
-    Fourth column
-  </div>
-</div>
-{% endhighlight %}
-
-    <hr>
-
-    <h3 class="title">Sizes</h3>
-    <div class="content">
-      <p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
-      <ul>
-        <li>
-          <code>is-three-quarters</code>
-        </li>
-        <li>
-          <code>is-two-thirds</code>
-        </li>
-        <li>
-          <code>is-half</code>
-        </li>
-        <li>
-          <code>is-one-third</code>
-        </li>
-        <li>
-          <code>is-one-quarter</code>
-        </li>
-      </ul>
-      <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
-    </div>
-    <div class="columns">
-      <div class="column is-three-quarters">
-        <p class="notification is-info">
-          <code class="html">is-three-quarters</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">Auto</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">Auto</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-two-thirds">
-        <p class="notification is-info">
-          <code class="html">is-two-thirds</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">Auto</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">Auto</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-half">
-        <p class="notification is-info">
-          <code class="html">is-half</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">Auto</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">Auto</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-one-third">
-        <p class="notification is-info">
-          <code class="html">is-one-third</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">Auto</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">Auto</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-one-quarter">
-        <p class="notification is-info">
-          <code class="html">is-one-quarter</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">Auto</p>
-      </div>
-    </div>
-
-{% highlight html %}
-<div class="columns">
-  <div class="column is-three-quarters">
-    <p class="notification is-info">
-      <code class="html">is-three-quarters</code>
-    </p>
-  </div>
-  <div class="column">
-    <p class="notification is-warning">Auto</p>
-  </div>
-  <div class="column">
-    <p class="notification is-danger">Auto</p>
-  </div>
-</div>
-
-<div class="columns">
-  <div class="column is-two-thirds">
-    <p class="notification is-info">
-      <code class="html">is-two-thirds</code>
-    </p>
-  </div>
-  <div class="column">
-    <p class="notification is-warning">Auto</p>
-  </div>
-  <div class="column">
-    <p class="notification is-danger">Auto</p>
-  </div>
-</div>
-
-<div class="columns">
-  <div class="column is-half">
-    <p class="notification is-info">
-      <code class="html">is-half</code>
-    </p>
-  </div>
-  <div class="column">
-    <p class="notification is-warning">Auto</p>
-  </div>
-  <div class="column">
-    <p class="notification is-danger">Auto</p>
-  </div>
-</div>
-
-<div class="columns">
-  <div class="column is-one-third">
-    <p class="notification is-info">
-      <code class="html">is-one-third</code>
-    </p>
-  </div>
-  <div class="column">
-    <p class="notification is-success">Auto</p>
-  </div>
-  <div class="column">
-    <p class="notification is-warning">Auto</p>
-  </div>
-</div>
-
-<div class="columns">
-  <div class="column is-one-quarter">
-    <p class="notification is-info">
-      <code class="html">is-one-quarter</code>
-    </p>
-  </div>
-  <div class="column">
-    <p class="notification is-success">Auto</p>
-  </div>
-</div>
-{% endhighlight %}
-
-
-    <h4 class="title is-4">12 columns</h4>
-    <div class="content">
-      <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
-      <ul>
-        <li><code>is-2</code></li>
-        <li><code>is-3</code></li>
-        <li><code>is-4</code></li>
-        <li><code>is-5</code></li>
-        <li><code>is-6</code></li>
-        <li><code>is-7</code></li>
-        <li><code>is-8</code></li>
-        <li><code>is-9</code></li>
-        <li><code>is-10</code></li>
-        <li><code>is-11</code></li>
-      </ul>
-    </div>
-    <div class="message is-danger">
-      <p class="message-header">Naming</p>
-      <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
-    </div>
-
-    <div class="columns">
-      <div class="column is-2">
-        <p class="notification is-info"><code>is-2</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-3">
-        <p class="notification is-info"><code>is-3</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-4">
-        <p class="notification is-info"><code>is-4</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-5">
-        <p class="notification is-info"><code>is-5</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-6">
-        <p class="notification is-info"><code>is-6</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-7">
-        <p class="notification is-info"><code>is-7</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-8">
-        <p class="notification is-info"><code>is-8</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-9">
-        <p class="notification is-info"><code>is-9</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-10">
-        <p class="notification is-info"><code>is-10</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success has-text-centered">1</p>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-11">
-        <p class="notification is-info"><code>is-11</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning has-text-centered">1</p>
-      </div>
-    </div>
-
-    <hr>
-
-    <h3 class="title">Offset</h3>
-    <div class="content">
-      <p>While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
-    </div>
-
-    <div class="columns is-mobile">
-      <div class="column is-half is-offset-one-quarter">
-        <p class="notification is-info">
-          <code class="html">is-half</code><br>
-          <code class="html">is-offset-one-quarter</code>
-        </p>
-      </div>
-    </div>
-
-    <div class="columns is-mobile">
-      <div class="column is-4 is-offset-8">
-        <p class="notification is-info">
-          <code class="html">is-4</code><br>
-          <code class="html">is-offset-8</code>
-        </p>
-      </div>
-    </div>
-
-    <div class="columns is-mobile">
-      <div class="column is-11 is-offset-1">
-        <p class="notification is-info">
-          <code class="html">is-11</code><br>
-          <code class="html">is-offset-1</code>
-        </p>
-      </div>
-    </div>
-
-{% highlight html %}
-<div class="columns is-mobile">
-  <div class="column is-half is-offset-one-quarter"></div>
-</div>
-
-<div class="columns is-mobile">
-  <div class="column is-4 is-offset-8"></div>
-</div>
-
-<div class="columns is-mobile">
-  <div class="column is-11 is-offset-1"></div>
-</div>
-{% endhighlight %}
-
-    <hr>
-
-    <h3 class="title">Responsiveness</h3>
-    <div class="content">
-      <p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
-      <p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
-    </div>
-    <div class="columns is-mobile">
-      <div class="column">
-        <p class="notification is-info">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">2</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">3</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">4</p>
-      </div>
-    </div>
-{% highlight html %}
-<div class="columns is-mobile">
-  <div class="column">1</div>
-  <div class="column">2</div>
-  <div class="column">3</div>
-  <div class="column">4</div>
-</div>
-{% endhighlight %}
-    <div class="message is-info">
-      <p class="message-header">Resize</p>
-      <p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
-    </div>
-    <div class="content">
-      <p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
-    </div>
-    <div class="columns is-desktop">
-      <div class="column">
-        <p class="notification is-info">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">2</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">3</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">4</p>
-      </div>
-    </div>
-{% highlight html %}
-<div class="columns is-desktop">
-  <div class="column">1</div>
-  <div class="column">2</div>
-  <div class="column">3</div>
-  <div class="column">4</div>
-</div>
-{% endhighlight %}
-
-    <h4 class="title is-4">Different sizes per breakpoint</h4>
-    <div class="content">
-      <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
-    </div>
-    <div class="columns is-mobile">
-      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
-        <p class="notification is-info">
-          <code>is-half-mobile</code><br>
-          <code>is-one-third-tablet</code><br>
-          <code>is-one-quarter-desktop</code>
-        </p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">1</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">1</p>
-      </div>
-    </div>
-    <div class="message is-info">
-      <p class="message-header">Resize</p>
-      <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
-    </div>
-{% highlight html %}
-<div class="columns is-mobile">
-  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
-    <code>is-half-mobile</code><br>
-    <code>is-one-third-tablet</code><br>
-    <code>is-one-quarter-desktop</code>
-  </div>
-  <div class="column">1</div>
-  <div class="column">1</div>
-  <div class="column">1</div>
-  <div class="column">1</div>
-</div>
-{% endhighlight %}
-
-    <hr>
-
-    <h3 class="title">Multiline</h3>
-    <div class="content">
-      <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
-    </div>
-    <div class="columns is-multiline is-mobile">
-      <div class="column is-one-quarter">
-        <p class="notification is-info"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-half">
-        <p class="notification is-info"><code>is-half</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-info">Auto</p>
-      </div>
-    </div>
-
-{% highlight html %}
-<div class="columns is-multiline is-mobile">
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-half">
-    <code>is-half</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column">
-    Auto
-  </div>
-</div>
-{% endhighlight %}
-    <hr>
-
-    <h3 class="title">Gapless</h3>
-    <div class="content">
-      <p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
-    </div>
-    <div class="columns is-gapless">
-      <div class="column">
-        <p class="notification is-info">First column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-success">Second column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-warning">Third column</p>
-      </div>
-      <div class="column">
-        <p class="notification is-danger">Fourth column</p>
-      </div>
-    </div>
-{% highlight html %}
-<div class="columns is-gapless">
-  <div class="column">First column</div>
-  <div class="column">Second column</div>
-  <div class="column">Third column</div>
-  <div class="column">Fourth column</div>
-</div>
-{% endhighlight %}
-    <div class="content">
-      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
-    </div>
-    <div class="columns is-multiline is-mobile is-gapless">
-      <div class="column is-one-quarter">
-        <p class="notification is-info"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-half">
-        <p class="notification is-info"><code>is-half</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column">
-        <p class="notification is-info">Auto</p>
-      </div>
-    </div>
-{% highlight html %}
-<div class="columns is-gapless is-multiline is-mobile">
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-half">
-    <code>is-half</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column">
-    Auto
-  </div>
-</div>
-{% endhighlight %}
-
-  </div>
-</section>

diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html
index 7a243901fda051e0dd041bbbc73b7c0986d5cfb7..13615243ea7ae4d84b06ceebfd3e8021847e5fb9 100644 (file)
--- a/docs/documentation/layout/container.html
+++ b/docs/documentation/layout/container.html
@@ -18,7 +18,7 @@ doc-subtab: container
     <div class="content">
       <p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
       <ul>
-        <li><code>.header</code></li>
+        <li><code>.nav</code></li>
         <li><code>.hero</code></li>
         <li><code>.section</code></li>
         <li><code>.footer</code></li>

diff --git a/docs/documentation/navbar.html b/docs/documentation/navbar.html
deleted file mode 100644 (file)
index ee75fc7..0000000
--- a/docs/documentation/navbar.html
+++ /dev/null
@@ -1,257 +0,0 @@
----
-layout: documentation
-doc-tab: navbar
----
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Navbar</h1>
-    <h2 class="subtitle">A multi-purpose <strong>horizontal navbar</strong>, which can contain almost any other element</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>The <strong>structure</strong> of a navbar is the following:</p>
-      <ul>
-        <li>
-          <code>navbar</code>: main container
-          <ul>
-            <li><code>navbar-left</code> for the left side</li>
-            <li>
-              <code>navbar-right</code> for the right side
-              <ul>
-                <li><code>navbar-item</code> for each individual element</li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <p>In a <code>navbar-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>navbar</code>, they will always be <strong>vertically aligned</strong>.</p>
-    </div>
-
-    <div class="structure">
-      <nav class="navbar structure-item is-structure-container" title="navbar">
-        <div class="navbar-left structure-item" title="navbar-left">
-          <div class="navbar-item">
-            <p class="subtitle is-5">
-              <strong>123</strong> posts
-            </p>
-          </div>
-          <div class="navbar-item">
-            <p class="control has-addons">
-              <input class="input" type="text" placeholder="Find a post">
-              <button class="button">
-                Search
-              </button>
-            </p>
-          </div>
-        </div>
-        <div class="navbar-right structure-item" title="navbar-right">
-          <p class="navbar-item">
-            <strong>All</strong>
-          </p>
-          <p class="navbar-item">
-            <a>Published</a>
-          </p>
-          <p class="navbar-item">
-            <a>Drafts</a>
-          </p>
-          <p class="navbar-item">
-            <a>Deleted</a>
-          </p>
-          <p class="navbar-item">
-            <a class="button is-success">
-              New
-            </a>
-          </p>
-        </div>
-      </nav>
-    </div>
-
-    <div class="example">
-      <nav class="navbar">
-        <div class="navbar-left">
-          <div class="navbar-item">
-            <p class="subtitle is-5">
-              <strong>123</strong> posts
-            </p>
-          </div>
-          <div class="navbar-item">
-            <p class="control has-addons">
-              <input class="input" type="text" placeholder="Find a post">
-              <button class="button">
-                Search
-              </button>
-            </p>
-          </div>
-        </div>
-        <div class="navbar-right">
-          <p class="navbar-item">
-            <strong>All</strong>
-          </p>
-          <p class="navbar-item">
-            <a>Published</a>
-          </p>
-          <p class="navbar-item">
-            <a>Drafts</a>
-          </p>
-          <p class="navbar-item">
-            <a>Deleted</a>
-          </p>
-          <p class="navbar-item">
-            <a class="button is-success">
-              New
-            </a>
-          </p>
-        </div>
-      </nav>
-    </div>
-
-{% highlight html %}
-<!-- Main container -->
-<nav class="navbar">
-  <!-- Left side -->
-  <div class="navbar-left">
-    <div class="navbar-item">
-      <p class="subtitle is-5">
-        <strong>123</strong> posts
-      </p>
-    </div>
-    <div class="navbar-item">
-      <p class="control has-addons">
-        <input class="input" type="text" placeholder="Find a post">
-        <button class="button">
-          Search
-        </button>
-      </p>
-    </div>
-  </div>
-
-  <!-- Right side -->
-  <div class="navbar-right">
-    <p class="navbar-item"><strong>All</strong></p>
-    <p class="navbar-item"><a>Published</a></p>
-    <p class="navbar-item"><a>Drafts</a></p>
-    <p class="navbar-item"><a>Deleted</a></p>
-    <p class="navbar-item"><a class="button is-success">New</a></p>
-  </div>
-</nav>
-{% endhighlight %}
-
-    <hr>
-    <h3 class="title">Centered navbar</h3>
-
-    <div class="content">
-      If you want a <strong>centered navbar</strong>, you can use as many <code>navbar-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>navbar</code> container.
-    </div>
-
-    <div class="example">
-      <nav class="navbar">
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Tweets</p>
-          <p class="title">3,456</p>
-        </div>
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Following</p>
-          <p class="title">123</p>
-        </div>
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Followers</p>
-          <p class="title">456K</p>
-        </div>
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Likes</p>
-          <p class="title">789</p>
-        </div>
-      </nav>
-    </div>
-
-{% highlight html %}
-<nav class="navbar">
-  <div class="navbar-item has-text-centered">
-    <p class="heading">Tweets</p>
-    <p class="title">3,456</p>
-  </div>
-  <div class="navbar-item has-text-centered">
-    <p class="heading">Following</p>
-    <p class="title">123</p>
-  </div>
-  <div class="navbar-item has-text-centered">
-    <p class="heading">Followers</p>
-    <p class="title">456K</p>
-  </div>
-  <div class="navbar-item has-text-centered">
-    <p class="heading">Likes</p>
-    <p class="title">789</p>
-  </div>
-</nav>
-{% endhighlight %}
-
-    <div class="example">
-      <nav class="navbar">
-        <p class="navbar-item has-text-centered">
-          <a class="link is-info">Home</a>
-        </p>
-        <p class="navbar-item has-text-centered">
-          <a class="link is-info">Menu</a>
-        </p>
-        <p class="navbar-item has-text-centered">
-          <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
-        </p>
-        <p class="navbar-item has-text-centered">
-          <a class="link is-info">Reservations</a>
-        </p>
-        <p class="navbar-item has-text-centered">
-          <a class="link is-info">Contact</a>
-        </p>
-      </nav>
-    </div>
-
-{% highlight html %}
-<nav class="navbar">
-  <p class="navbar-item has-text-centered">
-    <a class="link is-info">Home</a>
-  </p>
-  <p class="navbar-item has-text-centered">
-    <a class="link is-info">Menu</a>
-  </p>
-  <p class="navbar-item has-text-centered">
-    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
-  </p>
-  <p class="navbar-item has-text-centered">
-    <a class="link is-info">Reservations</a>
-  </p>
-  <p class="navbar-item has-text-centered">
-    <a class="link is-info">Contact</a>
-  </p>
-</nav>
-{% endhighlight %}
-
-    <hr>
-    <h3 class="title">Mobile navbar</h3>
-    <div class="content">
-      By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>navbar</code> container.
-    </div>
-
-    <div class="example">
-      <nav class="navbar is-mobile">
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Tweets</p>
-          <p class="title">3,456</p>
-        </div>
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Following</p>
-          <p class="title">123</p>
-        </div>
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Followers</p>
-          <p class="title">456K</p>
-        </div>
-        <div class="navbar-item has-text-centered">
-          <p class="heading">Likes</p>
-          <p class="title">789</p>
-        </div>
-      </nav>
-    </div>
-  </div>
-</section>