From ccbea20b357f2bcd7aecd421558980c956f03475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=CE=9C=CE=B1=CE=BA=CE=B1=CF=81=CF=8C=CE=BD=CE=B9=CE=B1=20?=
 =?UTF-8?q?=CE=BC=CE=B5?= <32320229+makaroniame@users.noreply.github.com>
Date: Wed, 21 Jan 2015 10:16:48 -0500
Subject: [PATCH] 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  |  9 +++++++++
 _sass/page.scss      |  8 +++++---
 theme-setup/index.md | 27 ++++-----------------------
 3 files changed, 18 insertions(+), 26 deletions(-)
 create mode 100644 _includes/_toc.html

diff --git a/_includes/_toc.html b/_includes/_toc.html
new file mode 100644
index 000000000000..cca407ddffd4
--- /dev/null
+++ b/_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 -->
\ No newline at end of file
diff --git a/_sass/page.scss b/_sass/page.scss
index 4475bb56889e..cdcb36abfd8c 100644
--- a/_sass/page.scss
+++ b/_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;
diff --git a/theme-setup/index.md b/theme-setup/index.md
index 23eb731ca789..11e8f04b6d72 100644
--- a/theme-setup/index.md
+++ b/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">
-  <header>
-    <h3>Overview</h3>
-  </header>
-<div id="drawer" markdown="1">
-*  Auto generated table of contents
-{:toc}
-</div>
-</section><!-- /#table-of-contents -->
+{% include _toc.html %}
 
 ## 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.
-
-**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}
+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.
 
 {% highlight html %}
-<section id="table-of-contents" class="toc">
-  <header>
-    <h3>Overview</h3>
-  </header>
-<div id="drawer" markdown="1">
-*  Auto generated table of contents
-{:toc}
-</div>
-</section><!-- /#table-of-contents -->
+{% raw %}{% include _toc.html %}{% endraw %}
 {% endhighlight %}
 
 ### Paragraph Indentation