TEST: move the table of contents into the <div>

This looks a bit more pleasant to me, personally.

Author: dscho

assets/sass/reference.scss

@@ -111,19 +111,6 @@ h3.plumbing {
     &#reference-languages-trigger {
       float: right;
     }
-
-    // Ensure the TOC trigger floats right like topics/languages
-    &#reference-toc-trigger {
-      float: right;
-    }
-  }
-
-  // Place the "last updated" span inline next to the left-floating versions trigger
-  > span.light {
-    display: inline-block;
-    clear: none;
-    margin-left: 6px;
-    vertical-align: middle;
   }
 }
 
@@ -226,25 +213,65 @@ h3.plumbing {
   }
 }
 
-// Position the Table of Contents dropdown under the right-floated TOC trigger
-#toc-dropdown {
-  width: 300px;
-  right: 12px;
-  padding: 12px;
-  font-weight: normal;
-  line-height: 1;
+// New inline TOC box styles
+.toc-box {
+  float: right;
+  width: 200px;
+  margin: 0 0 15px 20px;
+  padding: 10px 12px;
+  font-size: 13px;
+  background-color: var(--callout-color);
+  border: 1px solid var(--base-border-color);
+  @include border-radius(3px);
 
-  ul {
+  .toc-box-header {
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  .toc-list {
     margin: 0;
+    padding-left: 18px;
+    list-style: disc;
   }
 
-  li {
+  .toc-list li {
+    margin: 2px 0;
     line-height: $base-line-height * 0.8;
   }
 
-  a {
+  .toc-list a {
     font-weight: normal;
-    padding: 0;
+  }
+}
+
+// Ensure content can flow around the TOC naturally
+#documentation #main {
+  .sectionbody {
+    overflow: visible;
+  }
+
+  .verseblock {
+    overflow: visible;
+
+    .content {
+      overflow: visible;
+
+      pre {
+        overflow: visible;
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+
+// Stack TOC box full-width on small screens
+@media (max-width: $mobile-m) {
+  .toc-box {
+    float: none;
+    width: 80%;
+    max-width: none;
+    margin-right: 0;
   }
 }
 

layouts/_default/baseof.html

@@ -123,7 +123,6 @@ <h1>{{ .Params.book.section.cs_number }} {{ .Params.book.chapter.title }} - {{ .
           <div id='reference-version'>
             {{ partial "ref/languages.html" . }}
             {{ partial "ref/topics.html" . }}
-            {{ partial "ref/toc.html" . }}
             {{ partial "ref/versions.html" . }}
           </div>
 
@@ -136,6 +135,7 @@ <h2>This information is specific to the Git project</h2>
 	    <p>Please note that this information is only relevant to you if you plan on <a href="{{ relURL "community#contributing" }}">contributing to the Git project itself</a>. It is in no shape or form required reading for regular Git users.</p>
 	    </div>
 	    {{ end }}
+            {{ partial "ref/toc.html" . }}
             {{ .Content }}
             {{ $match := findRESubmatch "(?s)>NAME</h2>.*?<p[^>]*>(git-)?([^ ]+)" .Content 1 }}
             {{ if (eq ($match | len) 1) }}

layouts/partials/ref/toc.html

@@ -1,13 +1,11 @@
 {{ $headings := .Params.headings }}
 {{ if $headings }}
-<a class="dropdown-trigger" id="reference-toc-trigger" data-panel-id="toc-dropdown" href="#">Table of Contents ▾</a>
-<div class='dropdown-panel right' id='toc-dropdown'>
-  <div>
-    <ul class="toc">
-      {{ range $i, $item := $headings }}
-        <li><a href="#{{ .id }}">{{ .text }}</a></li>
-      {{ end }}
-    </ul>
-  </div>
+<div id='toc-box' class='toc-box'>
+  <div class='toc-box-header'>Table of Contents</div>
+  <ul class="toc-list">
+    {{ range $i, $item := $headings }}
+      <li><a href="#{{ .id }}">{{ .text }}</a></li>
+    {{ end }}
+  </ul>
 </div>
 {{ end }}