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 @@ +
+
+

Overview

+
+
+* Auto generated table of contents +{:toc} +
+
\ 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/ --- -
-
-

Overview

-
-
-* Auto generated table of contents -{:toc} -
-
+{% 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 %} -
-
-

Overview

-
-
-* Auto generated table of contents -{:toc} -
-
+{% raw %}{% include _toc.html %}{% endraw %} {% endhighlight %} ### Paragraph Indentation