git.iko.soy/typeable/pandoc
on master help sign in
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

commit95d8713633f659e47a3684c0c30ba216fcd3fd63 authorMauro Bieg <mb21@users.noreply.github.com> dateSun 1 Nov 2020, 23:22 (6 years ago) parentba4dfd4
6 files changed+213−43
compare with master
unifiedsplit
MANUAL.txt+26−1 data/templates/styles.html+39−10 test/lhs-test.html+37−8 test/lhs-test.html+lhs+37−8 test/writer.html4+37−8 test/writer.html5+37−8
MANUAL.txt+26−1
@@ -2190,7 +2190,7 @@ ODT or pptx.
21902190### Variables for HTML
21912191
21922192`document-css`
2193−: Enables inclusion of most of the CSS in the `styles.html`
2193+: Enables inclusion of most of the [CSS] in the `styles.html`
21942194 [partial](#partials) (have a look with
21952195 `pandoc --print-default-data-file=templates/styles.html`).
21962196 Unless you use [`--css`](#option--css), this variable
@@ -2214,6 +2214,9 @@ ODT or pptx.
22142214`monofont`
22152215: sets the CSS `font-family` property on `code` elements.
22162216
2217+`monobackgroundcolor`
2218+: sets the CSS `background-color` property on `code` elements.
2219+
22172220`linestretch`
22182221: sets the CSS `line-height` property on the `html` element,
22192222 which is preferred to be unitless.
@@ -2224,6 +2227,28 @@ ODT or pptx.
22242227`margin-left`, `margin-right`, `margin-top`, `margin-bottom`
22252228: sets the corresponding CSS `padding` properties on the `body` element.
22262229
2230+To override or extend some [CSS] for just one document, include for example:
2231+
2232+ ---
2233+ header-includes: |
2234+ <style>
2235+ blockquote {
2236+ font-style: italic;
2237+ }
2238+ tr.even {
2239+ background-color: #f0f0f0;
2240+ }
2241+ td, th {
2242+ padding: 0.5em 2em 0.5em 0.5em;
2243+ }
2244+ tbody {
2245+ border-bottom: none;
2246+ }
2247+ </style>
2248+ ---
2249+
2250+[CSS]: https://developer.mozilla.org/en-US/docs/Learn/CSS
2251+
22272252### Variables for HTML math
22282253
22292254`classoption`
data/templates/styles.html+39−10
@@ -2,7 +2,7 @@ $if(document-css)$
22html {
33 line-height: $if(linestretch)$$linestretch$$else$1.7$endif$;
44 font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
5− font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
5+ font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
66 color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
77 background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
88}
@@ -38,7 +38,7 @@ body {
3838 }
3939}
4040p {
41− margin-top: 1.7em;
41+ margin: 1.7em 0;
4242}
4343a {
4444 color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
@@ -52,6 +52,13 @@ img {
5252h1, h2, h3, h4, h5, h6 {
5353 margin-top: 1.7em;
5454}
55+h5, h6 {
56+ font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
57+ font-style: italic;
58+}
59+h6 {
60+ font-weight: normal;
61+}
5562ol, ul {
5663 padding-left: 1.7em;
5764 margin-top: 1.7em;
@@ -63,46 +70,68 @@ blockquote {
6370 margin: 1.7em 0 1.7em 1.7em;
6471 padding-left: 1em;
6572 border-left: 2px solid #e6e6e6;
66− font-style: italic;
73+ color: #606060;
6774}
6875code {
6976 font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
70− background-color: #f0f0f0;
77+ background-color: $if(monobackgroundcolor)$$monobackgroundcolor$$else$#f0f0f0$endif$;
7178 font-size: 85%;
7279 margin: 0;
7380 padding: .2em .4em;
7481}
7582pre {
83+ margin: 1.7em 0;
7684 line-height: 1.5em;
7785 padding: 1em;
78− background-color: #f0f0f0;
86+ background-color: $if(monobackgroundcolor)$$monobackgroundcolor$$else$#f0f0f0$endif$;
7987 overflow: auto;
8088}
8189pre code {
8290 padding: 0;
8391 overflow: visible;
8492}
93+.sourceCode {
94+ background-color: transparent;
95+ overflow: visible;
96+}
8597hr {
8698 background-color: #1a1a1a;
8799 border: none;
88100 height: 1px;
89− margin-top: 1.7em;
101+ margin: 1.7em 0;
90102}
91103table {
104+ margin: 1.7em 0;
92105 border-collapse: collapse;
93106 width: 100%;
94107 overflow-x: auto;
95108 display: block;
109+ font-variant-numeric: lining-nums tabular-nums;
110+}
111+table caption {
112+ margin-bottom: 0.75em;
113+}
114+tbody {
115+ border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
116+ border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
96117}
97−th, td {
98− border-bottom: 1px solid lightgray;
99− padding: 1em 3em 1em 0;
118+th {
119+ border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
120+ padding: 0.25em 0.5em 0.25em 0.5em;
121+ line-height: 1;
122+}
123+td {
124+ padding: 0.125em 0.5em 0.25em 0.5em;
125+ line-height: 1;
100126}
101127header {
102128 margin-bottom: 6em;
103129 text-align: center;
104130}
105−nav a:not(:hover) {
131+#TOC li {
132+ list-style: none;
133+}
134+#TOC a:not(:hover) {
106135 text-decoration: none;
107136}
108137$endif$
test/lhs-test.html+37−8
@@ -9,7 +9,7 @@
99 html {
1010 line-height: 1.7;
1111 font-family: Georgia, serif;
12− font-size: 20px;
12+ font-size: 18px;
1313 color: #1a1a1a;
1414 background-color: #fdfdfd;
1515 }
@@ -45,7 +45,7 @@
4545 }
4646 }
4747 p {
48− margin-top: 1.7em;
48+ margin: 1.7em 0;
4949 }
5050 a {
5151 color: #1a1a1a;
@@ -59,6 +59,13 @@
5959 h1, h2, h3, h4, h5, h6 {
6060 margin-top: 1.7em;
6161 }
62+ h5, h6 {
63+ font-size: 18px;
64+ font-style: italic;
65+ }
66+ h6 {
67+ font-weight: normal;
68+ }
6269 ol, ul {
6370 padding-left: 1.7em;
6471 margin-top: 1.7em;
@@ -70,7 +77,7 @@
7077 margin: 1.7em 0 1.7em 1.7em;
7178 padding-left: 1em;
7279 border-left: 2px solid #e6e6e6;
73− font-style: italic;
80+ color: #606060;
7481 }
7582 code {
7683 font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -80,6 +87,7 @@
8087 padding: .2em .4em;
8188 }
8289 pre {
90+ margin: 1.7em 0;
8391 line-height: 1.5em;
8492 padding: 1em;
8593 background-color: #f0f0f0;
@@ -89,27 +97,48 @@
8997 padding: 0;
9098 overflow: visible;
9199 }
100+ .sourceCode {
101+ background-color: transparent;
102+ overflow: visible;
103+ }
92104 hr {
93105 background-color: #1a1a1a;
94106 border: none;
95107 height: 1px;
96− margin-top: 1.7em;
108+ margin: 1.7em 0;
97109 }
98110 table {
111+ margin: 1.7em 0;
99112 border-collapse: collapse;
100113 width: 100%;
101114 overflow-x: auto;
102115 display: block;
116+ font-variant-numeric: lining-nums tabular-nums;
117+ }
118+ table caption {
119+ margin-bottom: 0.75em;
120+ }
121+ tbody {
122+ border-top: 1px solid #1a1a1a;
123+ border-bottom: 1px solid #1a1a1a;
103124 }
104− th, td {
105− border-bottom: 1px solid lightgray;
106− padding: 1em 3em 1em 0;
125+ th {
126+ border-top: 1px solid #1a1a1a;
127+ padding: 0.25em 0.5em 0.25em 0.5em;
128+ line-height: 1;
129+ }
130+ td {
131+ padding: 0.125em 0.5em 0.25em 0.5em;
132+ line-height: 1;
107133 }
108134 header {
109135 margin-bottom: 6em;
110136 text-align: center;
111137 }
112− nav a:not(:hover) {
138+ #TOC li {
139+ list-style: none;
140+ }
141+ #TOC a:not(:hover) {
113142 text-decoration: none;
114143 }
115144 code{white-space: pre-wrap;}
test/lhs-test.html+lhs+37−8
@@ -9,7 +9,7 @@
99 html {
1010 line-height: 1.7;
1111 font-family: Georgia, serif;
12− font-size: 20px;
12+ font-size: 18px;
1313 color: #1a1a1a;
1414 background-color: #fdfdfd;
1515 }
@@ -45,7 +45,7 @@
4545 }
4646 }
4747 p {
48− margin-top: 1.7em;
48+ margin: 1.7em 0;
4949 }
5050 a {
5151 color: #1a1a1a;
@@ -59,6 +59,13 @@
5959 h1, h2, h3, h4, h5, h6 {
6060 margin-top: 1.7em;
6161 }
62+ h5, h6 {
63+ font-size: 18px;
64+ font-style: italic;
65+ }
66+ h6 {
67+ font-weight: normal;
68+ }
6269 ol, ul {
6370 padding-left: 1.7em;
6471 margin-top: 1.7em;
@@ -70,7 +77,7 @@
7077 margin: 1.7em 0 1.7em 1.7em;
7178 padding-left: 1em;
7279 border-left: 2px solid #e6e6e6;
73− font-style: italic;
80+ color: #606060;
7481 }
7582 code {
7683 font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -80,6 +87,7 @@
8087 padding: .2em .4em;
8188 }
8289 pre {
90+ margin: 1.7em 0;
8391 line-height: 1.5em;
8492 padding: 1em;
8593 background-color: #f0f0f0;
@@ -89,27 +97,48 @@
8997 padding: 0;
9098 overflow: visible;
9199 }
100+ .sourceCode {
101+ background-color: transparent;
102+ overflow: visible;
103+ }
92104 hr {
93105 background-color: #1a1a1a;
94106 border: none;
95107 height: 1px;
96− margin-top: 1.7em;
108+ margin: 1.7em 0;
97109 }
98110 table {
111+ margin: 1.7em 0;
99112 border-collapse: collapse;
100113 width: 100%;
101114 overflow-x: auto;
102115 display: block;
116+ font-variant-numeric: lining-nums tabular-nums;
117+ }
118+ table caption {
119+ margin-bottom: 0.75em;
120+ }
121+ tbody {
122+ border-top: 1px solid #1a1a1a;
123+ border-bottom: 1px solid #1a1a1a;
103124 }
104− th, td {
105− border-bottom: 1px solid lightgray;
106− padding: 1em 3em 1em 0;
125+ th {
126+ border-top: 1px solid #1a1a1a;
127+ padding: 0.25em 0.5em 0.25em 0.5em;
128+ line-height: 1;
129+ }
130+ td {
131+ padding: 0.125em 0.5em 0.25em 0.5em;
132+ line-height: 1;
107133 }
108134 header {
109135 margin-bottom: 6em;
110136 text-align: center;
111137 }
112− nav a:not(:hover) {
138+ #TOC li {
139+ list-style: none;
140+ }
141+ #TOC a:not(:hover) {
113142 text-decoration: none;
114143 }
115144 code{white-space: pre-wrap;}
test/writer.html4+37−8
@@ -12,7 +12,7 @@
1212 html {
1313 line-height: 1.7;
1414 font-family: Georgia, serif;
15− font-size: 20px;
15+ font-size: 18px;
1616 color: #1a1a1a;
1717 background-color: #fdfdfd;
1818 }
@@ -48,7 +48,7 @@
4848 }
4949 }
5050 p {
51− margin-top: 1.7em;
51+ margin: 1.7em 0;
5252 }
5353 a {
5454 color: #1a1a1a;
@@ -62,6 +62,13 @@
6262 h1, h2, h3, h4, h5, h6 {
6363 margin-top: 1.7em;
6464 }
65+ h5, h6 {
66+ font-size: 18px;
67+ font-style: italic;
68+ }
69+ h6 {
70+ font-weight: normal;
71+ }
6572 ol, ul {
6673 padding-left: 1.7em;
6774 margin-top: 1.7em;
@@ -73,7 +80,7 @@
7380 margin: 1.7em 0 1.7em 1.7em;
7481 padding-left: 1em;
7582 border-left: 2px solid #e6e6e6;
76− font-style: italic;
83+ color: #606060;
7784 }
7885 code {
7986 font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -83,6 +90,7 @@
8390 padding: .2em .4em;
8491 }
8592 pre {
93+ margin: 1.7em 0;
8694 line-height: 1.5em;
8795 padding: 1em;
8896 background-color: #f0f0f0;
@@ -92,27 +100,48 @@
92100 padding: 0;
93101 overflow: visible;
94102 }
103+ .sourceCode {
104+ background-color: transparent;
105+ overflow: visible;
106+ }
95107 hr {
96108 background-color: #1a1a1a;
97109 border: none;
98110 height: 1px;
99− margin-top: 1.7em;
111+ margin: 1.7em 0;
100112 }
101113 table {
114+ margin: 1.7em 0;
102115 border-collapse: collapse;
103116 width: 100%;
104117 overflow-x: auto;
105118 display: block;
119+ font-variant-numeric: lining-nums tabular-nums;
120+ }
121+ table caption {
122+ margin-bottom: 0.75em;
123+ }
124+ tbody {
125+ border-top: 1px solid #1a1a1a;
126+ border-bottom: 1px solid #1a1a1a;
106127 }
107− th, td {
108− border-bottom: 1px solid lightgray;
109− padding: 1em 3em 1em 0;
128+ th {
129+ border-top: 1px solid #1a1a1a;
130+ padding: 0.25em 0.5em 0.25em 0.5em;
131+ line-height: 1;
132+ }
133+ td {
134+ padding: 0.125em 0.5em 0.25em 0.5em;
135+ line-height: 1;
110136 }
111137 header {
112138 margin-bottom: 6em;
113139 text-align: center;
114140 }
115− nav a:not(:hover) {
141+ #TOC li {
142+ list-style: none;
143+ }
144+ #TOC a:not(:hover) {
116145 text-decoration: none;
117146 }
118147 code{white-space: pre-wrap;}
test/writer.html5+37−8
@@ -12,7 +12,7 @@
1212 html {
1313 line-height: 1.7;
1414 font-family: Georgia, serif;
15− font-size: 20px;
15+ font-size: 18px;
1616 color: #1a1a1a;
1717 background-color: #fdfdfd;
1818 }
@@ -48,7 +48,7 @@
4848 }
4949 }
5050 p {
51− margin-top: 1.7em;
51+ margin: 1.7em 0;
5252 }
5353 a {
5454 color: #1a1a1a;
@@ -62,6 +62,13 @@
6262 h1, h2, h3, h4, h5, h6 {
6363 margin-top: 1.7em;
6464 }
65+ h5, h6 {
66+ font-size: 18px;
67+ font-style: italic;
68+ }
69+ h6 {
70+ font-weight: normal;
71+ }
6572 ol, ul {
6673 padding-left: 1.7em;
6774 margin-top: 1.7em;
@@ -73,7 +80,7 @@
7380 margin: 1.7em 0 1.7em 1.7em;
7481 padding-left: 1em;
7582 border-left: 2px solid #e6e6e6;
76− font-style: italic;
83+ color: #606060;
7784 }
7885 code {
7986 font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -83,6 +90,7 @@
8390 padding: .2em .4em;
8491 }
8592 pre {
93+ margin: 1.7em 0;
8694 line-height: 1.5em;
8795 padding: 1em;
8896 background-color: #f0f0f0;
@@ -92,27 +100,48 @@
92100 padding: 0;
93101 overflow: visible;
94102 }
103+ .sourceCode {
104+ background-color: transparent;
105+ overflow: visible;
106+ }
95107 hr {
96108 background-color: #1a1a1a;
97109 border: none;
98110 height: 1px;
99− margin-top: 1.7em;
111+ margin: 1.7em 0;
100112 }
101113 table {
114+ margin: 1.7em 0;
102115 border-collapse: collapse;
103116 width: 100%;
104117 overflow-x: auto;
105118 display: block;
119+ font-variant-numeric: lining-nums tabular-nums;
120+ }
121+ table caption {
122+ margin-bottom: 0.75em;
123+ }
124+ tbody {
125+ border-top: 1px solid #1a1a1a;
126+ border-bottom: 1px solid #1a1a1a;
106127 }
107− th, td {
108− border-bottom: 1px solid lightgray;
109− padding: 1em 3em 1em 0;
128+ th {
129+ border-top: 1px solid #1a1a1a;
130+ padding: 0.25em 0.5em 0.25em 0.5em;
131+ line-height: 1;
132+ }
133+ td {
134+ padding: 0.125em 0.5em 0.25em 0.5em;
135+ line-height: 1;
110136 }
111137 header {
112138 margin-bottom: 6em;
113139 text-align: center;
114140 }
115− nav a:not(:hover) {
141+ #TOC li {
142+ list-style: none;
143+ }
144+ #TOC a:not(:hover) {
116145 text-decoration: none;
117146 }
118147 code{white-space: pre-wrap;}