spec: generated TOC with linkable headers

This adds a table of contents to the spec, with a way to get the link of a
header on hover (like on GitHub) and a "return to top" small icon at the
end of each section.

Jekyll generates the H1-level table of contents, and then the current
one is expended using jQuery all the way down to H5 titles. Examples and
H6 headers are ignored.

GitHub's (MIT licensed) octicons are used for nice "link" and "up"
icons.

1 files changed, 73 insertions, 5 deletions

diff --git a/spec/public/stylesheets/screen.css b/spec/public/stylesheets/screen.css
index 725eb0b3f3..ce8318f819 100644
--- a/spec/public/stylesheets/screen.css
+++ b/spec/public/stylesheets/screen.css
@@ -7,7 +7,7 @@ body {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: white;
-  padding: 30px;
+  padding-left: 30px;
 }
 
 body > *:first-child {
@@ -25,18 +25,23 @@ a.absent {
 }
 a.anchor {
   display: block;
-  padding-left: 30px;
-  margin-left: -30px;
+  margin-left: -35px;
+  padding-left: 10px;
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
+  color: black;
+  width: 35px; height: 100%;
+}
+
+a.anchor span {
+  vertical-align: middle;
 }
 
 h1, h2, h3, h4, h5, h6 {
   margin: 20px 0 10px;
-  padding: 0;
   font-weight: bold;
   -webkit-font-smoothing: antialiased;
   cursor: text;
@@ -44,10 +49,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
-  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
   text-decoration: none;
 }
 
+h1:hover a.anchor span, h2:hover a.anchor span, h3:hover a.anchor span, h4:hover a.anchor span, h5:hover a.anchor span, h6:hover a.anchor span {
+  display: inline-block;
+}
+
+h1 a.anchor span, h2 a.anchor span, h3 a.anchor span, h4 a.anchor span, h5 a.anchor span, h6 a.anchor span {
+  display: none;
+}
+
+h1 a.anchor:hover span, h2 a.anchor:hover span, h3 a.anchor:hover span, h4 a.anchor:hover span, h5 a.anchor:hover span, h6 a.anchor:hover span {
+  display: inline-block;
+}
+
 h1 tt, h1 code {
   font-size: inherit;
 }
@@ -330,3 +346,55 @@ code {
   font-size: 16px;
 }
 
+#navigation {
+  margin-top: 120px;
+  margin-right: 10px;
+  float: right;
+  width: 26%;
+  display: inline;
+  color: #8B8B8B;
+  font-size: 15px;
+  font-weight: bold;
+  background-color: #F3F4F4;
+}
+
+#content-container {
+  float: left;
+  width: 70%;
+  display: inline;
+}
+
+#container {
+  width: 100%;
+}
+
+#navigation a {
+  text-decoration: none;
+  color: #8B8B8B;
+}
+
+#navigation a:hover {
+  text-decoration: underline;
+}
+
+.active-page {
+  color: #171717;
+}
+
+.active-page a {
+  color: #171717 !important;
+}
+
+.to_top {
+  position: absolute;
+  margin-top: -35px;
+  right: 27%;
+  color: gray;
+  cursor: pointer;
+  width: 16px; height: 16px;
+  display: block;
+}
+
+.to_top:hover {
+  color: black;
+}