git.iko.soy/typeable/pandoc
on master help sign in
Default CSS tweaks.

These changes restore the 20px font size while increasing readibility by reducing line width. (The number of words per line is now similar to that of pandoc's default LaTeX/PDF output.) With the narrower lines, we also need less interline and interparagraph space, so the content becomes more compact and skimmable: - Change default font size back to 20px. - Set font-size for print media to 12pt. - Reduce interline space. - Reduce interparagraph space. - Reduce line width. - Remove the special `line-height: 1` for table cells, which I had suggested but which now seems a mistake. - Remove the special line-height for pre. - Ensure that there is a bit more space before a heading than after. - Slightly reduced space after title header.

commit5760cd850fd36ab483dceb5bfc78928d36ccee63 authorJohn MacFarlane <jgm@berkeley.edu> dateMon 2 Nov 2020, 10:19 (6 years ago) parent1175b0a
5 files changed+70−75
compare with master
unifiedsplit
data/templates/styles.html+14−15 test/lhs-test.html+14−15 test/lhs-test.html+lhs+14−15 test/writer.html4+14−15 test/writer.html5+14−15
data/templates/styles.html+14−15
@@ -1,14 +1,14 @@
11$if(document-css)$
22html {
3− line-height: $if(linestretch)$$linestretch$$else$1.7$endif$;
3+ line-height: $if(linestretch)$$linestretch$$else$1.5$endif$;
44 font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
5− font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
5+ font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
66 color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
77 background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
88}
99body {
1010 margin: 0 auto;
11− max-width: 40em;
11+ max-width: 36em;
1212 padding-left: $if(margin-left)$$margin-left$$else$50px$endif$;
1313 padding-right: $if(margin-right)$$margin-right$$else$50px$endif$;
1414 padding-top: $if(margin-top)$$margin-top$$else$50px$endif$;
@@ -28,6 +28,7 @@ body {
2828 body {
2929 background-color: transparent;
3030 color: black;
31+ font-size: 12pt;
3132 }
3233 p, h2, h3 {
3334 orphans: 3;
@@ -38,7 +39,7 @@ body {
3839 }
3940}
4041p {
41− margin: 1.7em 0;
42+ margin: 1em 0;
4243}
4344a {
4445 color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
@@ -50,10 +51,10 @@ img {
5051 max-width: 100%;
5152}
5253h1, h2, h3, h4, h5, h6 {
53− margin-top: 1.7em;
54+ margin-top: 1.4em;
5455}
5556h5, h6 {
56− font-size: $if(fontsize)$$fontsize$$else$18px$endif$;
57+ font-size: 1em;
5758 font-style: italic;
5859}
5960h6 {
@@ -61,13 +62,13 @@ h6 {
6162}
6263ol, ul {
6364 padding-left: 1.7em;
64− margin-top: 1.7em;
65+ margin-top: 1em;
6566}
6667li > ol, li > ul {
6768 margin-top: 0;
6869}
6970blockquote {
70− margin: 1.7em 0 1.7em 1.7em;
71+ margin: 1em 0 1em 1.7em;
7172 padding-left: 1em;
7273 border-left: 2px solid #e6e6e6;
7374 color: #606060;
@@ -82,8 +83,7 @@ $endif$
8283 margin: 0;
8384}
8485pre {
85− margin: 1.7em 0;
86− line-height: 1.5em;
86+ margin: 1em 0;
8787$if(monobackgroundcolor)$
8888 background-color: $monobackgroundcolor$;
8989 padding: 1em;
@@ -102,10 +102,10 @@ hr {
102102 background-color: #1a1a1a;
103103 border: none;
104104 height: 1px;
105− margin: 1.7em 0;
105+ margin: 1em 0;
106106}
107107table {
108− margin: 1.7em 0;
108+ margin: 1em 0;
109109 border-collapse: collapse;
110110 width: 100%;
111111 overflow-x: auto;
@@ -116,20 +116,19 @@ table caption {
116116 margin-bottom: 0.75em;
117117}
118118tbody {
119+ margin-top: 0.5em;
119120 border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
120121 border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
121122}
122123th {
123124 border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
124125 padding: 0.25em 0.5em 0.25em 0.5em;
125− line-height: 1;
126126}
127127td {
128128 padding: 0.125em 0.5em 0.25em 0.5em;
129− line-height: 1;
130129}
131130header {
132− margin-bottom: 6em;
131+ margin-bottom: 4em;
133132 text-align: center;
134133}
135134#TOC li {
test/lhs-test.html+14−15
@@ -7,15 +7,15 @@
77 <title>lhs-test</title>
88 <style>
99 html {
10− line-height: 1.7;
10+ line-height: 1.5;
1111 font-family: Georgia, serif;
12− font-size: 18px;
12+ font-size: 20px;
1313 color: #1a1a1a;
1414 background-color: #fdfdfd;
1515 }
1616 body {
1717 margin: 0 auto;
18− max-width: 40em;
18+ max-width: 36em;
1919 padding-left: 50px;
2020 padding-right: 50px;
2121 padding-top: 50px;
@@ -35,6 +35,7 @@
3535 body {
3636 background-color: transparent;
3737 color: black;
38+ font-size: 12pt;
3839 }
3940 p, h2, h3 {
4041 orphans: 3;
@@ -45,7 +46,7 @@
4546 }
4647 }
4748 p {
48− margin: 1.7em 0;
49+ margin: 1em 0;
4950 }
5051 a {
5152 color: #1a1a1a;
@@ -57,10 +58,10 @@
5758 max-width: 100%;
5859 }
5960 h1, h2, h3, h4, h5, h6 {
60− margin-top: 1.7em;
61+ margin-top: 1.4em;
6162 }
6263 h5, h6 {
63− font-size: 18px;
64+ font-size: 1em;
6465 font-style: italic;
6566 }
6667 h6 {
@@ -68,13 +69,13 @@
6869 }
6970 ol, ul {
7071 padding-left: 1.7em;
71− margin-top: 1.7em;
72+ margin-top: 1em;
7273 }
7374 li > ol, li > ul {
7475 margin-top: 0;
7576 }
7677 blockquote {
77− margin: 1.7em 0 1.7em 1.7em;
78+ margin: 1em 0 1em 1.7em;
7879 padding-left: 1em;
7980 border-left: 2px solid #e6e6e6;
8081 color: #606060;
@@ -85,8 +86,7 @@
8586 margin: 0;
8687 }
8788 pre {
88− margin: 1.7em 0;
89− line-height: 1.5em;
89+ margin: 1em 0;
9090 overflow: auto;
9191 }
9292 pre code {
@@ -101,10 +101,10 @@
101101 background-color: #1a1a1a;
102102 border: none;
103103 height: 1px;
104− margin: 1.7em 0;
104+ margin: 1em 0;
105105 }
106106 table {
107− margin: 1.7em 0;
107+ margin: 1em 0;
108108 border-collapse: collapse;
109109 width: 100%;
110110 overflow-x: auto;
@@ -115,20 +115,19 @@
115115 margin-bottom: 0.75em;
116116 }
117117 tbody {
118+ margin-top: 0.5em;
118119 border-top: 1px solid #1a1a1a;
119120 border-bottom: 1px solid #1a1a1a;
120121 }
121122 th {
122123 border-top: 1px solid #1a1a1a;
123124 padding: 0.25em 0.5em 0.25em 0.5em;
124− line-height: 1;
125125 }
126126 td {
127127 padding: 0.125em 0.5em 0.25em 0.5em;
128− line-height: 1;
129128 }
130129 header {
131− margin-bottom: 6em;
130+ margin-bottom: 4em;
132131 text-align: center;
133132 }
134133 #TOC li {
test/lhs-test.html+lhs+14−15
@@ -7,15 +7,15 @@
77 <title>lhs-test</title>
88 <style>
99 html {
10− line-height: 1.7;
10+ line-height: 1.5;
1111 font-family: Georgia, serif;
12− font-size: 18px;
12+ font-size: 20px;
1313 color: #1a1a1a;
1414 background-color: #fdfdfd;
1515 }
1616 body {
1717 margin: 0 auto;
18− max-width: 40em;
18+ max-width: 36em;
1919 padding-left: 50px;
2020 padding-right: 50px;
2121 padding-top: 50px;
@@ -35,6 +35,7 @@
3535 body {
3636 background-color: transparent;
3737 color: black;
38+ font-size: 12pt;
3839 }
3940 p, h2, h3 {
4041 orphans: 3;
@@ -45,7 +46,7 @@
4546 }
4647 }
4748 p {
48− margin: 1.7em 0;
49+ margin: 1em 0;
4950 }
5051 a {
5152 color: #1a1a1a;
@@ -57,10 +58,10 @@
5758 max-width: 100%;
5859 }
5960 h1, h2, h3, h4, h5, h6 {
60− margin-top: 1.7em;
61+ margin-top: 1.4em;
6162 }
6263 h5, h6 {
63− font-size: 18px;
64+ font-size: 1em;
6465 font-style: italic;
6566 }
6667 h6 {
@@ -68,13 +69,13 @@
6869 }
6970 ol, ul {
7071 padding-left: 1.7em;
71− margin-top: 1.7em;
72+ margin-top: 1em;
7273 }
7374 li > ol, li > ul {
7475 margin-top: 0;
7576 }
7677 blockquote {
77− margin: 1.7em 0 1.7em 1.7em;
78+ margin: 1em 0 1em 1.7em;
7879 padding-left: 1em;
7980 border-left: 2px solid #e6e6e6;
8081 color: #606060;
@@ -85,8 +86,7 @@
8586 margin: 0;
8687 }
8788 pre {
88− margin: 1.7em 0;
89− line-height: 1.5em;
89+ margin: 1em 0;
9090 overflow: auto;
9191 }
9292 pre code {
@@ -101,10 +101,10 @@
101101 background-color: #1a1a1a;
102102 border: none;
103103 height: 1px;
104− margin: 1.7em 0;
104+ margin: 1em 0;
105105 }
106106 table {
107− margin: 1.7em 0;
107+ margin: 1em 0;
108108 border-collapse: collapse;
109109 width: 100%;
110110 overflow-x: auto;
@@ -115,20 +115,19 @@
115115 margin-bottom: 0.75em;
116116 }
117117 tbody {
118+ margin-top: 0.5em;
118119 border-top: 1px solid #1a1a1a;
119120 border-bottom: 1px solid #1a1a1a;
120121 }
121122 th {
122123 border-top: 1px solid #1a1a1a;
123124 padding: 0.25em 0.5em 0.25em 0.5em;
124− line-height: 1;
125125 }
126126 td {
127127 padding: 0.125em 0.5em 0.25em 0.5em;
128− line-height: 1;
129128 }
130129 header {
131− margin-bottom: 6em;
130+ margin-bottom: 4em;
132131 text-align: center;
133132 }
134133 #TOC li {
test/writer.html4+14−15
@@ -10,15 +10,15 @@
1010 <title>Pandoc Test Suite</title>
1111 <style type="text/css">
1212 html {
13− line-height: 1.7;
13+ line-height: 1.5;
1414 font-family: Georgia, serif;
15− font-size: 18px;
15+ font-size: 20px;
1616 color: #1a1a1a;
1717 background-color: #fdfdfd;
1818 }
1919 body {
2020 margin: 0 auto;
21− max-width: 40em;
21+ max-width: 36em;
2222 padding-left: 50px;
2323 padding-right: 50px;
2424 padding-top: 50px;
@@ -38,6 +38,7 @@
3838 body {
3939 background-color: transparent;
4040 color: black;
41+ font-size: 12pt;
4142 }
4243 p, h2, h3 {
4344 orphans: 3;
@@ -48,7 +49,7 @@
4849 }
4950 }
5051 p {
51− margin: 1.7em 0;
52+ margin: 1em 0;
5253 }
5354 a {
5455 color: #1a1a1a;
@@ -60,10 +61,10 @@
6061 max-width: 100%;
6162 }
6263 h1, h2, h3, h4, h5, h6 {
63− margin-top: 1.7em;
64+ margin-top: 1.4em;
6465 }
6566 h5, h6 {
66− font-size: 18px;
67+ font-size: 1em;
6768 font-style: italic;
6869 }
6970 h6 {
@@ -71,13 +72,13 @@
7172 }
7273 ol, ul {
7374 padding-left: 1.7em;
74− margin-top: 1.7em;
75+ margin-top: 1em;
7576 }
7677 li > ol, li > ul {
7778 margin-top: 0;
7879 }
7980 blockquote {
80− margin: 1.7em 0 1.7em 1.7em;
81+ margin: 1em 0 1em 1.7em;
8182 padding-left: 1em;
8283 border-left: 2px solid #e6e6e6;
8384 color: #606060;
@@ -88,8 +89,7 @@
8889 margin: 0;
8990 }
9091 pre {
91− margin: 1.7em 0;
92− line-height: 1.5em;
92+ margin: 1em 0;
9393 overflow: auto;
9494 }
9595 pre code {
@@ -104,10 +104,10 @@
104104 background-color: #1a1a1a;
105105 border: none;
106106 height: 1px;
107− margin: 1.7em 0;
107+ margin: 1em 0;
108108 }
109109 table {
110− margin: 1.7em 0;
110+ margin: 1em 0;
111111 border-collapse: collapse;
112112 width: 100%;
113113 overflow-x: auto;
@@ -118,20 +118,19 @@
118118 margin-bottom: 0.75em;
119119 }
120120 tbody {
121+ margin-top: 0.5em;
121122 border-top: 1px solid #1a1a1a;
122123 border-bottom: 1px solid #1a1a1a;
123124 }
124125 th {
125126 border-top: 1px solid #1a1a1a;
126127 padding: 0.25em 0.5em 0.25em 0.5em;
127− line-height: 1;
128128 }
129129 td {
130130 padding: 0.125em 0.5em 0.25em 0.5em;
131− line-height: 1;
132131 }
133132 header {
134− margin-bottom: 6em;
133+ margin-bottom: 4em;
135134 text-align: center;
136135 }
137136 #TOC li {
test/writer.html5+14−15
@@ -10,15 +10,15 @@
1010 <title>Pandoc Test Suite</title>
1111 <style>
1212 html {
13− line-height: 1.7;
13+ line-height: 1.5;
1414 font-family: Georgia, serif;
15− font-size: 18px;
15+ font-size: 20px;
1616 color: #1a1a1a;
1717 background-color: #fdfdfd;
1818 }
1919 body {
2020 margin: 0 auto;
21− max-width: 40em;
21+ max-width: 36em;
2222 padding-left: 50px;
2323 padding-right: 50px;
2424 padding-top: 50px;
@@ -38,6 +38,7 @@
3838 body {
3939 background-color: transparent;
4040 color: black;
41+ font-size: 12pt;
4142 }
4243 p, h2, h3 {
4344 orphans: 3;
@@ -48,7 +49,7 @@
4849 }
4950 }
5051 p {
51− margin: 1.7em 0;
52+ margin: 1em 0;
5253 }
5354 a {
5455 color: #1a1a1a;
@@ -60,10 +61,10 @@
6061 max-width: 100%;
6162 }
6263 h1, h2, h3, h4, h5, h6 {
63− margin-top: 1.7em;
64+ margin-top: 1.4em;
6465 }
6566 h5, h6 {
66− font-size: 18px;
67+ font-size: 1em;
6768 font-style: italic;
6869 }
6970 h6 {
@@ -71,13 +72,13 @@
7172 }
7273 ol, ul {
7374 padding-left: 1.7em;
74− margin-top: 1.7em;
75+ margin-top: 1em;
7576 }
7677 li > ol, li > ul {
7778 margin-top: 0;
7879 }
7980 blockquote {
80− margin: 1.7em 0 1.7em 1.7em;
81+ margin: 1em 0 1em 1.7em;
8182 padding-left: 1em;
8283 border-left: 2px solid #e6e6e6;
8384 color: #606060;
@@ -88,8 +89,7 @@
8889 margin: 0;
8990 }
9091 pre {
91− margin: 1.7em 0;
92− line-height: 1.5em;
92+ margin: 1em 0;
9393 overflow: auto;
9494 }
9595 pre code {
@@ -104,10 +104,10 @@
104104 background-color: #1a1a1a;
105105 border: none;
106106 height: 1px;
107− margin: 1.7em 0;
107+ margin: 1em 0;
108108 }
109109 table {
110− margin: 1.7em 0;
110+ margin: 1em 0;
111111 border-collapse: collapse;
112112 width: 100%;
113113 overflow-x: auto;
@@ -118,20 +118,19 @@
118118 margin-bottom: 0.75em;
119119 }
120120 tbody {
121+ margin-top: 0.5em;
121122 border-top: 1px solid #1a1a1a;
122123 border-bottom: 1px solid #1a1a1a;
123124 }
124125 th {
125126 border-top: 1px solid #1a1a1a;
126127 padding: 0.25em 0.5em 0.25em 0.5em;
127− line-height: 1;
128128 }
129129 td {
130130 padding: 0.125em 0.5em 0.25em 0.5em;
131− line-height: 1;
132131 }
133132 header {
134− margin-bottom: 6em;
133+ margin-bottom: 4em;
135134 text-align: center;
136135 }
137136 #TOC li {