docs(layout): improved documentation

.gitignore

@@ -19,3 +19,5 @@ test/streams/test-*
 yarn.lock
 coverage/
 .nyc_output/
+_site
+Gemfile.lock

docs/Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins

docs/_layouts/default.html

@@ -21,14 +21,14 @@
           <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ github_name }}</small></a></p>
         {% endif %}
 
-        <ul>
+        <nav id="menu"><ul>
           <li><a href="{% link index.md %}">Home</a></li>
           <li><a href="{% link api.md %}">API</a></li>
           <li><a href="{% link appenders.md %}">Appenders</a></li>
           <li><a href="{% link layouts.md %}">Layouts</a></li>
           <li><a href="{% link terms.md %}">Terminology</a></li>
           <li><a href="{% link faq.md %}">FAQ</a></li>
-        </ul>
+        </ul></nav>
 
         {% if site.github.is_user_page %}
           <p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>

docs/assets/css/style.scss

@@ -0,0 +1,32 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+header ul {
+  display: block;
+  background-color: white;
+  border: none;
+  width: auto;
+  height: auto;
+  padding: 0;
+  list-style: disc;
+  clear:both;
+  margin-left: 20px;
+}
+
+header li {
+  display: list-item;
+  width: auto;
+  border: none;
+  float: none;
+  height: auto;
+}
+
+header ul a {
+  display: inline;
+  width: auto;
+  text-align: left;
+  color: #39c;
+  font-size: 14px;
+}