Improve table of contents

- Replace html snippet with _includes/toc.html
- Add FA icon to table of contents header
- Display table of contents on small screens
- Add hierarchy to toc with indents

_includes/_toc.html

@@ -0,0 +1,9 @@
+<section id="table-of-contents" class="toc">
+  <header>
+    <h3><i class="fa fa-book"></i> Overview</h3>
+  </header>
+<div id="drawer" markdown="1">
+*  Auto generated table of contents
+{:toc}
+</div>
+</section><!-- /#table-of-contents -->

_sass/page.scss

@@ -450,9 +450,8 @@ $button-size: 1.5rem;
 
 /* Table of contents */
 .toc {
-	display: none;
 	font-size: 95%;
-	@media #{$small} {
+	@media #{$large} {
 		display: block;
 		@include grid(12,2);
 		@include prefix(12,0.5);
@@ -503,13 +502,16 @@ $button-size: 1.5rem;
 		}
 		ul {
 			margin: 1px 0 0;
+			li a {
+				padding-left: 20px;
+			}
 		}
 	}
 }
 
 /* TOC trigger for collapsing */
 #drawer {
-	height: 100%;
+	max-height: 100%;
 	overflow: hidden;
 	&.js-hidden {
 		max-height: 0;

theme-setup/index.md

@@ -9,15 +9,7 @@ image:
   creditlink: http://wegraphics.net/downloads/free-ultimate-blurred-background-pack/
 ---
 
-<section id="table-of-contents" class="toc">
+{% include _toc.html %}
-  <header>
-    <h3>Overview</h3>
-  </header>
-<div id="drawer" markdown="1">
-*  Auto generated table of contents
-{:toc}
-</div>
-</section><!-- /#table-of-contents -->
 
 ## Installation
 
@@ -268,23 +260,12 @@ To assign Billy Rick as an author for our post. We'd add the following YAML fron
 author: billy_rick
 {% endhighlight %}
 
-### Table of Contents
+### Kramdown Table of Contents
 
-Any post or page that you want a *table of contents* to render insert the following HTML in your post before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into a contents list.
+To include an auto-generated **table of contents** for posts and pages, add the following `_include` before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into list of links.
-
-**PS:** The TOC is hidden on small devices because I haven't gotten around to optimizing it. For now it only appears on larger screens (tablet and desktop).
-{: .notice}
 
 {% highlight html %}
-<section id="table-of-contents" class="toc">
+{% raw %}{% include _toc.html %}{% endraw %}
-  <header>
-    <h3>Overview</h3>
-  </header>
-<div id="drawer" markdown="1">
-*  Auto generated table of contents
-{:toc}
-</div>
-</section><!-- /#table-of-contents -->
 {% endhighlight %}
 
 ### Paragraph Indentation