Docs: Prepare for table of contents

styles/overrides.css

@@ -35,7 +35,7 @@ h6:target:before {
   margin: 0 2px;
 }
 
-td .glyphicon {
+table .glyphicon {
   margin: 0; /* within table in rules page */
 }
 
@@ -92,11 +92,85 @@ p.correct:before {
   content: "\e125"; /* thumbs-up */
 }
 
+ol,
+ul {
+  padding-left: 1.5em; /* same as indent for glyphicon at narrow width */
+}
+
+ol ul,
+ul ul {
+  list-style: disc;
+  margin-bottom: 12px; /* same as p, ol, ul */
+}
+
+#markdown-toc {
+  display: none; /* at narrow width */
+  position: absolute;
+  top: auto; /* aligned at the top of paragraph of content which follows in document order */
+  left: 51em; /* (padding-left of .container) + (max-width of children) + (6em gutter) + */
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 0;
+}
+
+#markdown-toc,
+#markdown-toc ul {
+  list-style: none;
+  margin-bottom: 0;
+}
+
+#markdown-toc a {
+  color: inherit; /* same as text */
+}
+
+a:active, a:focus, /* needed only to override main.css */
+a {
+  color: #4B32C3; /* ESLint logo outer hexagon blue hsl(250,59%,48%) */
+}
+
+pre {
+  font-size: 15px;
+  padding: 12px 2px; /* vertical same as margin-bottom of p and horizontal same as padding of code */
+  border-width: 1px;
+  border-color: #ccc; /* light gray hsl(0,0%,80%) */
+  border-top-style: solid;
+  border-right-style: none;
+  border-bottom-style: solid;
+  border-left-style: none;
+  border-radius: 0;
+}
+
+code {
+  font-size: 0.88235em; /* 15px / 17px */
+  padding: 2px; /* same as horizontal padding of pre */
+  color: inherit; /* same as text */
+  background-color: #f5f5f5; /* same as pre and GitHub code lighter gray hsl(0,0%,96%) */
+  white-space: normal;
+}
+
+.container {
+  position: relative;
+  width: auto; /* override media queries */
+  margin-left: 0; /* not centered */
+  margin-right: 0; /* not centered */
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+main h2, main h3, main h4, main p, main ol, main ul, main table, main div.highlighter-rouge {
+  max-width: 43em; /* about 3 alphabets and just enough for 80 characters in pre */
+}
+
+/* device breakpoint at least as wide as iPad (non-Pro) in portrait orientation */
 @media (min-width: 768px) {
 
+  .container {
+    padding-left: 2em;
+  }
+
   p.icon:before {
     position: absolute;
-    left: -20px;
+    left: -1.5em; /* negative padding-left of ul */
   }
 
   p.icon {
@@ -105,10 +179,12 @@ p.correct:before {
 
 }
 
-@media (max-width: 767px) {
+/* content breakpoint about as wide as iPad (non-Pro) in landscape orientation */
+/* (padding-left of .container) + (max-width of children) + (6em gutter) + (at least 9em for toc) = 1020px < 1024px */
+@media (min-width: 60em) {
 
-  code {
-    white-space: normal;
+  #markdown-toc {
+    display: block;
   }
 
 }