Override table of contents layout to enable dynamic positioning (#27)

* Dynamic layout for TOC on documents.

* whitespace cleanup

layouts/docs/single.html

@@ -0,0 +1,25 @@
+{{ define "title"}} {{ .Title}} {{end}}
+{{ define "header"}} {{ partial "header" .}} {{end}}
+{{ define "main"}}
+  <div id="main">
+    <div id="hero">
+      <h1> {{ .Title}} </h1>
+      <p class="hero-lead">
+           {{ .Params.bref | safeHTML }}.
+      </p>
+
+    </div>
+    <div id="toc" data-component="toclocator">
+    {{ partial "toc" .}}
+    </div>
+    <div id="kube-component" class="content">
+
+    {{ .Content}}
+<!-- Inject script tag in this template  -->
+    {{if .Params.script}}
+     {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+    {{ partial (string $script) .}}
+    {{end }}
+    </div>
+    </div>
+{{ end }}

static/css/custom.css

@@ -0,0 +1,4 @@
+div#toc {
+    position: static;
+    z-index: 10000;
+}

static/js/master.js

@@ -0,0 +1,43 @@
+(function(Kube) {
+    Kube.TocLocator = function(element, options) {
+        this.namespace = "toclocator";
+
+        // Parent Constructor
+        Kube.apply(this, arguments);
+
+        // Services
+        this.detect = new Kube.Detect();
+
+        // Initialization
+        this.start();
+    };
+
+    // Functionality
+    Kube.TocLocator.prototype = {
+        start: function() {
+            this.$element = $( "#toc" )
+
+            p = this
+            $(document).scroll(function() {
+                p.styleToc();
+            });
+        },
+        styleToc: function() {
+          if (this.detect.isDesktopScreen()) {
+            if ($(document).scrollTop() > 100) {
+                this.$element.css({ position: "fixed", right: "1em" });
+            } else {
+                this.$element.css({ position: "static" });
+            }
+          }
+        }
+    };
+
+    // Inheritance
+    Kube.TocLocator.inherits(Kube);
+
+    // Plugin
+    Kube.Plugin.create("TocLocator");
+    Kube.Plugin.autoload("TocLocator");
+
+}(Kube));