Updates to default CSS (#6786)

- Fix margin before codeblock
- Add `monobackgroundcolor` variable, making the background color
  and padding of code optional.
- Ensure that backgrounds from highlighting styles take precedence over
  monobackgroundcolor
- Remove list markers from TOC
- Add margin-bottom where needed
- Remove italics from blockquote styling
- Change borders and spacing in tables to be more consistent with other
   output formats
- Style h5, h6
- Decrease root font-size to 18px
- Update tests for styles.html changes
- Add CSS example to MANUAL

6 files changed, 213 insertions, 43 deletions

diff --git a/MANUAL.txt b/MANUAL.txt
index 7ac314b62..74754e640 100644
--- a/MANUAL.txt
+++ b/MANUAL.txt
@@ -2190,7 +2190,7 @@ ODT or pptx.
 ### Variables for HTML
 
 `document-css`
-:   Enables inclusion of most of the CSS in the `styles.html`
+:   Enables inclusion of most of the [CSS] in the `styles.html`
     [partial](#partials) (have a look with
     `pandoc --print-default-data-file=templates/styles.html`).
     Unless you use [`--css`](#option--css), this variable
@@ -2214,6 +2214,9 @@ ODT or pptx.
 `monofont`
 :   sets the CSS `font-family` property on `code` elements.
 
+`monobackgroundcolor`
+:   sets the CSS `background-color` property on `code` elements.
+
 `linestretch`
 :   sets the CSS `line-height` property on the `html` element,
     which is preferred to be unitless.
@@ -2224,6 +2227,28 @@ ODT or pptx.
 `margin-left`, `margin-right`, `margin-top`, `margin-bottom`
 :   sets the corresponding CSS `padding` properties on the `body` element.
 
+To override or extend some [CSS] for just one document, include for example:
+
+    ---
+    header-includes: |
+      <style>
+      blockquote {
+        font-style: italic;
+      }
+      tr.even {
+        background-color: #f0f0f0;
+      }
+      td, th {
+        padding: 0.5em 2em 0.5em 0.5em;
+      }
+      tbody {
+        border-bottom: none;
+      }
+      </style>
+    ---
+
+[CSS]: https://developer.mozilla.org/en-US/docs/Learn/CSS
+
 ### Variables for HTML math
 
 `classoption`
diff --git a/data/templates/styles.html b/data/templates/styles.html
index 3d7ebb55d..f70797f70 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -2,7 +2,7 @@ $if(document-css)$
 html {
   line-height: $if(linestretch)$$linestretch$$else$1.7$endif$;
   font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
-  font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
+  font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
   color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
   background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
 }
@@ -38,7 +38,7 @@ body {
   }
 }
 p {
-  margin-top: 1.7em;
+  margin: 1.7em 0;
 }
 a {
   color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
@@ -52,6 +52,13 @@ img {
 h1, h2, h3, h4, h5, h6 {
   margin-top: 1.7em;
 }
+h5, h6 {
+  font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
+  font-style: italic;
+}
+h6 {
+  font-weight: normal;
+}
 ol, ul {
   padding-left: 1.7em;
   margin-top: 1.7em;
@@ -63,46 +70,68 @@ blockquote {
   margin: 1.7em 0 1.7em 1.7em;
   padding-left: 1em;
   border-left: 2px solid #e6e6e6;
-  font-style: italic;
+  color: #606060;
 }
 code {
   font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
-  background-color: #f0f0f0;
+  background-color: $if(monobackgroundcolor)$$monobackgroundcolor$$else$#f0f0f0$endif$;
   font-size: 85%;
   margin: 0;
   padding: .2em .4em;
 }
 pre {
+  margin: 1.7em 0;
   line-height: 1.5em;
   padding: 1em;
-  background-color: #f0f0f0;
+  background-color: $if(monobackgroundcolor)$$monobackgroundcolor$$else$#f0f0f0$endif$;
   overflow: auto;
 }
 pre code {
   padding: 0;
   overflow: visible;
 }
+.sourceCode {
+ background-color: transparent;
+ overflow: visible;
+}
 hr {
   background-color: #1a1a1a;
   border: none;
   height: 1px;
-  margin-top: 1.7em;
+  margin: 1.7em 0;
 }
 table {
+  margin: 1.7em 0;
   border-collapse: collapse;
   width: 100%;
   overflow-x: auto;
   display: block;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+table caption {
+  margin-bottom: 0.75em;
+}
+tbody {
+  border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+  border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
 }
-th, td {
-  border-bottom: 1px solid lightgray;
-  padding: 1em 3em 1em 0;
+th {
+  border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+  padding: 0.25em 0.5em 0.25em 0.5em;
+  line-height: 1;
+}
+td {
+  padding: 0.125em 0.5em 0.25em 0.5em;
+  line-height: 1;
 }
 header {
   margin-bottom: 6em;
   text-align: center;
 }
-nav a:not(:hover) {
+#TOC li {
+  list-style: none;
+}
+#TOC a:not(:hover) {
   text-decoration: none;
 }
 $endif$
diff --git a/test/lhs-test.html b/test/lhs-test.html
index e5f76051e..78bdb7238 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -9,7 +9,7 @@
     html {
       line-height: 1.7;
       font-family: Georgia, serif;
-      font-size: 20px;
+      font-size: 18px;
       color: #1a1a1a;
       background-color: #fdfdfd;
     }
@@ -45,7 +45,7 @@
       }
     }
     p {
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     a {
       color: #1a1a1a;
@@ -59,6 +59,13 @@
     h1, h2, h3, h4, h5, h6 {
       margin-top: 1.7em;
     }
+    h5, h6 {
+      font-size: 18px;
+      font-style: italic;
+    }
+    h6 {
+      font-weight: normal;
+    }
     ol, ul {
       padding-left: 1.7em;
       margin-top: 1.7em;
@@ -70,7 +77,7 @@
       margin: 1.7em 0 1.7em 1.7em;
       padding-left: 1em;
       border-left: 2px solid #e6e6e6;
-      font-style: italic;
+      color: #606060;
     }
     code {
       font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -80,6 +87,7 @@
       padding: .2em .4em;
     }
     pre {
+      margin: 1.7em 0;
       line-height: 1.5em;
       padding: 1em;
       background-color: #f0f0f0;
@@ -89,27 +97,48 @@
       padding: 0;
       overflow: visible;
     }
+    .sourceCode {
+     background-color: transparent;
+     overflow: visible;
+    }
     hr {
       background-color: #1a1a1a;
       border: none;
       height: 1px;
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     table {
+      margin: 1.7em 0;
       border-collapse: collapse;
       width: 100%;
       overflow-x: auto;
       display: block;
+      font-variant-numeric: lining-nums tabular-nums;
+    }
+    table caption {
+      margin-bottom: 0.75em;
+    }
+    tbody {
+      border-top: 1px solid #1a1a1a;
+      border-bottom: 1px solid #1a1a1a;
     }
-    th, td {
-      border-bottom: 1px solid lightgray;
-      padding: 1em 3em 1em 0;
+    th {
+      border-top: 1px solid #1a1a1a;
+      padding: 0.25em 0.5em 0.25em 0.5em;
+      line-height: 1;
+    }
+    td {
+      padding: 0.125em 0.5em 0.25em 0.5em;
+      line-height: 1;
     }
     header {
       margin-bottom: 6em;
       text-align: center;
     }
-    nav a:not(:hover) {
+    #TOC li {
+      list-style: none;
+    }
+    #TOC a:not(:hover) {
       text-decoration: none;
     }
     code{white-space: pre-wrap;}
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index fce29a114..90cb1fc0d 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -9,7 +9,7 @@
     html {
       line-height: 1.7;
       font-family: Georgia, serif;
-      font-size: 20px;
+      font-size: 18px;
       color: #1a1a1a;
       background-color: #fdfdfd;
     }
@@ -45,7 +45,7 @@
       }
     }
     p {
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     a {
       color: #1a1a1a;
@@ -59,6 +59,13 @@
     h1, h2, h3, h4, h5, h6 {
       margin-top: 1.7em;
     }
+    h5, h6 {
+      font-size: 18px;
+      font-style: italic;
+    }
+    h6 {
+      font-weight: normal;
+    }
     ol, ul {
       padding-left: 1.7em;
       margin-top: 1.7em;
@@ -70,7 +77,7 @@
       margin: 1.7em 0 1.7em 1.7em;
       padding-left: 1em;
       border-left: 2px solid #e6e6e6;
-      font-style: italic;
+      color: #606060;
     }
     code {
       font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -80,6 +87,7 @@
       padding: .2em .4em;
     }
     pre {
+      margin: 1.7em 0;
       line-height: 1.5em;
       padding: 1em;
       background-color: #f0f0f0;
@@ -89,27 +97,48 @@
       padding: 0;
       overflow: visible;
     }
+    .sourceCode {
+     background-color: transparent;
+     overflow: visible;
+    }
     hr {
       background-color: #1a1a1a;
       border: none;
       height: 1px;
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     table {
+      margin: 1.7em 0;
       border-collapse: collapse;
       width: 100%;
       overflow-x: auto;
       display: block;
+      font-variant-numeric: lining-nums tabular-nums;
+    }
+    table caption {
+      margin-bottom: 0.75em;
+    }
+    tbody {
+      border-top: 1px solid #1a1a1a;
+      border-bottom: 1px solid #1a1a1a;
     }
-    th, td {
-      border-bottom: 1px solid lightgray;
-      padding: 1em 3em 1em 0;
+    th {
+      border-top: 1px solid #1a1a1a;
+      padding: 0.25em 0.5em 0.25em 0.5em;
+      line-height: 1;
+    }
+    td {
+      padding: 0.125em 0.5em 0.25em 0.5em;
+      line-height: 1;
     }
     header {
       margin-bottom: 6em;
       text-align: center;
     }
-    nav a:not(:hover) {
+    #TOC li {
+      list-style: none;
+    }
+    #TOC a:not(:hover) {
       text-decoration: none;
     }
     code{white-space: pre-wrap;}
diff --git a/test/writer.html4 b/test/writer.html4
index 735fad48a..f1f6e9c98 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -12,7 +12,7 @@
     html {
       line-height: 1.7;
       font-family: Georgia, serif;
-      font-size: 20px;
+      font-size: 18px;
       color: #1a1a1a;
       background-color: #fdfdfd;
     }
@@ -48,7 +48,7 @@
       }
     }
     p {
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     a {
       color: #1a1a1a;
@@ -62,6 +62,13 @@
     h1, h2, h3, h4, h5, h6 {
       margin-top: 1.7em;
     }
+    h5, h6 {
+      font-size: 18px;
+      font-style: italic;
+    }
+    h6 {
+      font-weight: normal;
+    }
     ol, ul {
       padding-left: 1.7em;
       margin-top: 1.7em;
@@ -73,7 +80,7 @@
       margin: 1.7em 0 1.7em 1.7em;
       padding-left: 1em;
       border-left: 2px solid #e6e6e6;
-      font-style: italic;
+      color: #606060;
     }
     code {
       font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -83,6 +90,7 @@
       padding: .2em .4em;
     }
     pre {
+      margin: 1.7em 0;
       line-height: 1.5em;
       padding: 1em;
       background-color: #f0f0f0;
@@ -92,27 +100,48 @@
       padding: 0;
       overflow: visible;
     }
+    .sourceCode {
+     background-color: transparent;
+     overflow: visible;
+    }
     hr {
       background-color: #1a1a1a;
       border: none;
       height: 1px;
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     table {
+      margin: 1.7em 0;
       border-collapse: collapse;
       width: 100%;
       overflow-x: auto;
       display: block;
+      font-variant-numeric: lining-nums tabular-nums;
+    }
+    table caption {
+      margin-bottom: 0.75em;
+    }
+    tbody {
+      border-top: 1px solid #1a1a1a;
+      border-bottom: 1px solid #1a1a1a;
     }
-    th, td {
-      border-bottom: 1px solid lightgray;
-      padding: 1em 3em 1em 0;
+    th {
+      border-top: 1px solid #1a1a1a;
+      padding: 0.25em 0.5em 0.25em 0.5em;
+      line-height: 1;
+    }
+    td {
+      padding: 0.125em 0.5em 0.25em 0.5em;
+      line-height: 1;
     }
     header {
       margin-bottom: 6em;
       text-align: center;
     }
-    nav a:not(:hover) {
+    #TOC li {
+      list-style: none;
+    }
+    #TOC a:not(:hover) {
       text-decoration: none;
     }
     code{white-space: pre-wrap;}
diff --git a/test/writer.html5 b/test/writer.html5
index 76ede4cca..cb33a106d 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -12,7 +12,7 @@
     html {
       line-height: 1.7;
       font-family: Georgia, serif;
-      font-size: 20px;
+      font-size: 18px;
       color: #1a1a1a;
       background-color: #fdfdfd;
     }
@@ -48,7 +48,7 @@
       }
     }
     p {
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     a {
       color: #1a1a1a;
@@ -62,6 +62,13 @@
     h1, h2, h3, h4, h5, h6 {
       margin-top: 1.7em;
     }
+    h5, h6 {
+      font-size: 18px;
+      font-style: italic;
+    }
+    h6 {
+      font-weight: normal;
+    }
     ol, ul {
       padding-left: 1.7em;
       margin-top: 1.7em;
@@ -73,7 +80,7 @@
       margin: 1.7em 0 1.7em 1.7em;
       padding-left: 1em;
       border-left: 2px solid #e6e6e6;
-      font-style: italic;
+      color: #606060;
     }
     code {
       font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -83,6 +90,7 @@
       padding: .2em .4em;
     }
     pre {
+      margin: 1.7em 0;
       line-height: 1.5em;
       padding: 1em;
       background-color: #f0f0f0;
@@ -92,27 +100,48 @@
       padding: 0;
       overflow: visible;
     }
+    .sourceCode {
+     background-color: transparent;
+     overflow: visible;
+    }
     hr {
       background-color: #1a1a1a;
       border: none;
       height: 1px;
-      margin-top: 1.7em;
+      margin: 1.7em 0;
     }
     table {
+      margin: 1.7em 0;
       border-collapse: collapse;
       width: 100%;
       overflow-x: auto;
       display: block;
+      font-variant-numeric: lining-nums tabular-nums;
+    }
+    table caption {
+      margin-bottom: 0.75em;
+    }
+    tbody {
+      border-top: 1px solid #1a1a1a;
+      border-bottom: 1px solid #1a1a1a;
     }
-    th, td {
-      border-bottom: 1px solid lightgray;
-      padding: 1em 3em 1em 0;
+    th {
+      border-top: 1px solid #1a1a1a;
+      padding: 0.25em 0.5em 0.25em 0.5em;
+      line-height: 1;
+    }
+    td {
+      padding: 0.125em 0.5em 0.25em 0.5em;
+      line-height: 1;
     }
     header {
       margin-bottom: 6em;
       text-align: center;
     }
-    nav a:not(:hover) {
+    #TOC li {
+      list-style: none;
+    }
+    #TOC a:not(:hover) {
       text-decoration: none;
     }
     code{white-space: pre-wrap;}