website: Avoid using IDs starting with "toc-" for website elements.

Links in the generated ToC have IDs starting with "toc-", so #toc-list also
matches the "List" link in the ToC of ref/language.html.

This fixes #1608.

website/style.css

@@ -206,7 +206,7 @@ code, pre {
  * Table of content.
  */
 
-.toc {
+#pandoc-toc-wrapper {
     background-color: #f0f0f0;
     padding: 1em;
     margin: 0 16px 16px 0;
@@ -219,23 +219,23 @@ code, pre {
     clear: both;
 }
 
-#toc-list {
+#pandoc-toc {
     margin-left: -0.6em;
 }
 
 @media (min-width: 600px) and (max-width: 899px) {
-    #toc-list {
+    #pandoc-toc {
         column-count: 2;
     }
 }
 
 @media (min-width: 900px) {
-    #toc-list {
+    #pandoc-toc {
         column-count: 3;
     }
 }
 
-#toc-list li {
+#pandoc-toc li {
     list-style: none;
     /* Keep first-level ToC within one column */
     break-inside: avoid;
@@ -460,7 +460,7 @@ pre.ttyshot, pre.ttyshot code {
     background-color: #181818;
 }
 
-.dark .toc {
+.dark #pandoc-toc-wrapper {
     background-color: #181818;
 }
 

website/tools/pandoc/templates/toc-and-body.html

@@ -1,13 +1,17 @@
-<div class="toc">
-  <p>Table of Content: <span id="toc-toggle-wrapper"></span></p>
-  <div id="toc-list">
+<div id="pandoc-toc-wrapper">
+  <p>Table of Content: <span id="pandoc-toc-toggle-wrapper"></span></p>
+  <div id="pandoc-toc">
+    <!--
+    Note: links in the generated ToC have IDs starting with "toc-", so
+    avoid that prefix elsewhere.
+    -->
     $toc$
   </div>
   <script>
   (function() {
     var shown = true,
-        tocToggleWrapper = document.getElementById('toc-toggle-wrapper'),
-        tocList = document.getElementById('toc-list');
+        tocToggleWrapper = document.getElementById('pandoc-toc-toggle-wrapper'),
+        tocList = document.getElementById('pandoc-toc');
     var tocToggle = document.createElement('a');
     tocToggle.innerText = "[Hide]";
     tocToggle.href = "";