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

1 files changed, 39 insertions, 10 deletions

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$