Update the Docs

1 files changed, 23 insertions, 7 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 479078b..7954871 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -376,8 +376,8 @@
                   <a href="#navbar" class="navbar-brand mr-10">Spectre.css</a>
                 </section>
                 <section class="navbar-section">
-                  <a href="#navbar" class="btn btn-link">features</a>
-                  <a href="#navbar" class="btn btn-link">documents</a>
+                  <a href="#navbar" class="btn btn-link">Docs</a>
+                  <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a>
                 </section>
                 <section class="navbar-section">
                   <div class="input-group input-inline">
@@ -388,10 +388,26 @@
               </section>
             </div>
           </div>
-
           <section class="notes">
-            <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p>
+            <p>The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p>
           </section>
+          <div class="columns">
+            <div class="column col-12">
+              <section class="navbar">
+                <section class="navbar-section">
+                  <a href="#navbar" class="btn btn-link">Docs</a>
+                  <a href="#navbar" class="btn btn-link">Examples</a>
+                </section>
+                <section class="navbar-primary">
+                  <figure class="avatar" data-initial="S" style="background-color: #5764c6;"></figure>
+                </section>
+                <section class="navbar-section">
+                  <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a>
+                  <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a>
+                </section>
+              </section>
+            </div>
+          </div>
 
 <!-- navbar example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">&quot;navbar&quot;</span>&gt;
@@ -399,8 +415,8 @@
     &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-brand mr-10&quot;</span>&gt;Spectre.css&lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">/section</span>&gt;
   &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;features&lt;<span class="tag">/a</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;documents&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Docs&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;https://github.com/picturepan2/spectre&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;GitHub&lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">/section</span>&gt;
   &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group input-inline&quot;</span>&gt;
@@ -622,7 +638,7 @@
           </div>
 
           <section class="notes">
-            <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
+            <p>An empty state component can include icons, messages (title and meta messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
           </section>
 
 <!-- empty states example -->