Tissevert/pandoc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

HTML: use CSS flex boxes for columns.

Browse source 
This allows to render an arbitrary number of columns, while the previous
approach assumed exactly two columns.
This commit is contained in:
Albert Krewinkel 2022-07-29 23:44:13 +02:00 • committed by John MacFarlane
parent 7a4afce60c
commit 0e8f424d9e
8 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
data/templates/styles.html
View file

@ -163,7 +163,8 @@ header {
$endif$
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
$if(quotes)$

3
test/lhs-test.html
View file

@ -148,7 +148,8 @@
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }

3
test/lhs-test.html+lhs
View file

@ -148,7 +148,8 @@
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }

3
test/s5-basic.html
View file

@ -13,7 +13,8 @@
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}

3
test/s5-fancy.html
View file

@ -13,7 +13,8 @@
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
</style>

3
test/s5-inserts.html
View file

@ -11,7 +11,8 @@
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}

3
test/writer.html4
View file

@ -151,7 +151,8 @@
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}

3
test/writer.html5
View file

@ -151,7 +151,8 @@
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: 1;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}