mirror of
https://github.com/jgm/pandoc.git
synced 2026-08-28 17:20:47 +08:00
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
This commit is contained in:
Mauro Bieg
+26
-1
@@ -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`
|
||||
|
||||
+39
-10
@@ -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;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding: 1em 3em 1em 0;
|
||||
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 {
|
||||
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$
|
||||
|
||||
+37
-8
@@ -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;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding: 1em 3em 1em 0;
|
||||
table caption {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
tbody {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
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;}
|
||||
|
||||
+37
-8
@@ -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;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding: 1em 3em 1em 0;
|
||||
table caption {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
tbody {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
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;}
|
||||
|
||||
+37
-8
@@ -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;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding: 1em 3em 1em 0;
|
||||
table caption {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
tbody {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
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;}
|
||||
|
||||
+37
-8
@@ -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;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding: 1em 3em 1em 0;
|
||||
table caption {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
tbody {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
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;}
|
||||
|
||||
Reference in New Issue
Block a user