Docs: Prepare for table of contents

_layouts/rule.html

@@ -0,0 +1,20 @@
+{% include header.html %}
+{% include menu.html %}
+<main class="rule doc">
+  <article class="container">
+    {{ content
+      | replace: '<p>Examples of <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of <strong>incorrect</strong> code'
+      | replace: '<p>Example of <strong>incorrect</strong> code', '<p class="incorrect icon">Example of <strong>incorrect</strong> code'
+      | replace: '<p>Examples of additional <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of additional <strong>incorrect</strong> code'
+      | replace: '<p>Example of additional <strong>incorrect</strong> code', '<p class="incorrect icon">Example of additional <strong>incorrect</strong> code'
+      | replace: '<p>Examples of <strong>correct</strong> code', '<p class="correct icon">Examples of <strong>correct</strong> code'
+      | replace: '<p>Example of <strong>correct</strong> code', '<p class="correct icon">Example of <strong>correct</strong> code'
+      | replace: '<p>Examples of additional <strong>correct</strong> code', '<p class="correct icon">Examples of additional <strong>correct</strong> code'
+      | replace: '<p>Example of additional <strong>correct</strong> code', '<p class="correct icon">Example of additional <strong>correct</strong> code'
+      | replace: '<p>(removed) ', '<p class="removed icon">'
+      | replace: '<p>(recommended) ', '<p class="recommended icon">'
+      | replace: '<p>(fixable) ', '<p class="fixable icon">'
+    }}
+  </article>
+</main>
+{% include footer.html %}

_layouts/rules.html

@@ -0,0 +1,11 @@
+{% include header.html %}
+{% include menu.html %}
+<main class="rules doc">
+  <article class="container">
+    {{ content
+      | replace: '(recommended)', '<span title="recommended" aria-label="recommended" class="glyphicon glyphicon-ok"></span>'
+      | replace: '(fixable)', '<span title="fixable" aria-label="fixable" class="glyphicon glyphicon-wrench"></span>'
+    }}
+  </article>
+</main>
+{% include footer.html %}

styles/overrides.css

@@ -35,10 +35,14 @@ h6:target:before {
   margin: 0 2px;
 }
 
-td .glyphicon {
+table .glyphicon {
   margin: 0; /* within table in rules page */
 }
 
+tr {
+  vertical-align: baseline;
+}
+
 th,
 td {
   padding-left: 0.5em;
@@ -50,10 +54,6 @@ td:first-child {
   padding-left: 0;
 }
 
-tr {
-  vertical-align: baseline;
-}
-
 p.incorrect + div + div + div > pre, /* vars-on-top */
 p.incorrect + div + div > pre, /* no-continue */
 p.incorrect + div > pre {
@@ -72,6 +72,11 @@ p.icon:before {
   margin-right: 0.5em;
 }
 
+p.removed ~ p.recommended:before,
+p.removed ~ p.fixable:before {
+  color: #ccc; /* light gray hsl(0,0%,80%) */
+}
+
 p.recommended:before {
   content: "\e013"; /* ok */
 }
@@ -92,11 +97,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, a:hover, /* 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 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 +184,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;
   }
 
 }