Merge branch 'docs' of github.com:jgthms/bulma into docs

diff --cc docs/documentation/components/nav.html
index 3a1adfc4a5089e2c5b6eaee8e074e9b63063cb3a,0000000000000000000000000000000000000000..e80c6327c8de3f4969de7b1430d0a32181b471b8
mode 100644,000000..100644
--- 1/docs/documentation/components/nav.html
--- /dev/null
+++ b/docs/documentation/components/nav.html
@@@ -1,205 -1,0 +1,200 @@@
- <<<<<<< HEAD
 +---
 +layout: documentation
 +doc-tab: components
 +doc-subtab: nav
 +---
 +
 +{% include subnav-components.html %}
 +
 +<section class="section">
 +  <div class="container">
 +    <h1 class="title">Nav</h1>
 +    <h2 class="subtitle">
 +      A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
 +    </h2>
 +
 +    <hr>
 +
 +    <div class="content">
 +      <p>
 +        The <code>nav</code> container can have <strong>3 parts</strong>:
 +      </p>
 +      <ul>
 +        <li><code>nav-left</code></li>
 +        <li><code>nav-center</code></li>
 +        <li><code>nav-right</code></li>
 +      </ul>
 +      <p>
 +        For responsiveness, <strong>2 additional</strong> classes are available:
 +      </p>
 +      <ul>
 +        <li><code>nav-toggle</code> for the hamburger menu on mobile</li>
 +        <li><code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)</li>
 +      </ul>
 +    </div>
 +
 +<div class="example">
 +<nav class="nav">
 +  <div class="nav-left">
 +    <a class="nav-item is-brand" href="#">
 +      <img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
 +    </a>
 +  </div>
 +
 +  <div class="nav-center">
 +    <a class="nav-item" href="#">
 +      <span class="icon">
 +        <i class="fa fa-github"></i>
 +      </span>
 +    </a>
 +    <a class="nav-item" href="#">
 +      <span class="icon">
 +        <i class="fa fa-twitter"></i>
 +      </span>
 +    </a>
 +  </div>
 +
 +  <span class="nav-toggle">
 +    <span></span>
 +    <span></span>
 +    <span></span>
 +  </span>
 +
 +  <div class="nav-right nav-menu">
 +    <a class="nav-item" href="#">
 +      Home
 +    </a>
 +    <a class="nav-item" href="#">
 +      Documentation
 +    </a>
 +    <a class="nav-item" href="#">
 +      Blog
 +    </a>
 +
 +    <span class="nav-item">
 +      <a class="button" >
 +        <span class="icon">
 +          <i class="fa fa-twitter"></i>
 +        </span>
 +        <span>Tweet</span>
 +      </a>
 +      <a class="button is-primary" href="#">
 +        <span class="icon">
 +          <i class="fa fa-download"></i>
 +        </span>
 +        <span>Download</span>
 +      </a>
 +    </span>
 +  </div>
 +</nav>
 +</div>
 +
 +{% highlight html %}
 +<nav class="nav">
 +  <div class="nav-left">
-       <img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo}">
- =======
-     <a class="nav-item" href="#">
 +    <a class="nav-item is-brand" href="#">
- >>>>>>> master
 +      <img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
 +    </a>
 +  </div>
 +
 +  <div class="nav-center">
 +    <a class="nav-item" href="#">
 +      <span class="icon">
 +        <i class="fa fa-github"></i>
 +      </span>
 +    </a>
 +    <a class="nav-item" href="#">
 +      <span class="icon">
 +        <i class="fa fa-twitter"></i>
 +      </span>
 +    </a>
 +  </div>
 +
 +  <span class="nav-toggle">
 +    <span></span>
 +    <span></span>
 +    <span></span>
 +  </span>
 +
 +  <div class="nav-right nav-menu">
 +    <a class="nav-item" href="#">
 +      Home
 +    </a>
 +    <a class="nav-item" href="#">
 +      Documentation
 +    </a>
 +    <a class="nav-item" href="#">
 +      Blog
 +    </a>
 +
 +    <span class="nav-item">
 +      <a class="button" >
 +        <span class="icon">
 +          <i class="fa fa-twitter"></i>
 +        </span>
 +        <span>Tweet</span>
 +      </a>
 +      <a class="button is-primary" href="#">
 +        <span class="icon">
 +          <i class="fa fa-download"></i>
 +        </span>
 +        <span>Download</span>
 +      </a>
 +    </span>
 +  </div>
 +</nav>
 +
 +{% endhighlight %}
 +
 +    <hr>
 +
 +    <h3 class="title">Modifiers</h3>
 +
 +    <div class="content">
 +      <ul>
 +        <li>the <code>nav</code> container can have a <strong>shadow</strong> by adding the <code>has-shadow</code> modifier</li>
 +        <li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
 +        <li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
 +      </ul>
 +    </div>
 +  </div>
 +
 +<div class="example">
 +<nav class="nav has-shadow">
 +  <div class="container">
 +    <div class="nav-left">
 +      <a class="nav-item is-tab is-active">Card</a>
 +      <a class="nav-item is-tab">Level</a>
 +      <a class="nav-item is-tab">Media object</a>
 +      <a class="nav-item is-tab">Menu</a>
 +      <a class="nav-item is-tab">Message</a>
 +      <a class="nav-item is-tab">Modal</a>
 +      <a class="nav-item is-tab">Nav</a>
 +      <a class="nav-item is-tab">Pagination</a>
 +      <a class="nav-item is-tab">Panel</a>
 +      <a class="nav-item is-tab">Tabs</a>
 +    </div>
 +  </div>
 +</nav>
 +</div>
 +
 +{% highlight html %}
 +<nav class="nav has-shadow">
 +  <div class="container">
 +    <div class="nav-left">
 +      <a class="nav-item is-tab is-active">Card</a>
 +      <a class="nav-item is-tab">Level</a>
 +      <a class="nav-item is-tab">Media object</a>
 +      <a class="nav-item is-tab">Menu</a>
 +      <a class="nav-item is-tab">Message</a>
 +      <a class="nav-item is-tab">Modal</a>
 +      <a class="nav-item is-tab">Nav</a>
 +      <a class="nav-item is-tab">Pagination</a>
 +      <a class="nav-item is-tab">Panel</a>
 +      <a class="nav-item is-tab">Tabs</a>
 +    </div>
 +  </div>
 +</nav>
 +{% endhighlight %}
 +
 +</section>