aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--MANUAL.txt27
-rw-r--r--data/templates/styles.html49
-rw-r--r--test/lhs-test.html45
-rw-r--r--test/lhs-test.html+lhs45
-rw-r--r--test/writer.html445
-rw-r--r--test/writer.html545
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;}