From 0e8f424d9ef29175a12e8efb40e91a63aa939da1 Mon Sep 17 00:00:00 2001
From: Albert Krewinkel <albert@zeitkraut.de>
Date: Fri, 29 Jul 2022 23:44:13 +0200
Subject: [PATCH] HTML: use CSS flex boxes for columns.
This allows to render an arbitrary number of columns, while the previous
approach assumed exactly two columns.
---
data/templates/styles.html | 3 ++-
test/lhs-test.html | 3 ++-
test/lhs-test.html+lhs | 3 ++-
test/s5-basic.html | 3 ++-
test/s5-fancy.html | 3 ++-
test/s5-inserts.html | 3 ++-
test/writer.html4 | 3 ++-
test/writer.html5 | 3 ++-
8 files changed, 16 insertions(+), 8 deletions(-)
diff --git a/data/templates/styles.html b/data/templates/styles.html
index 88f7c1013..2bbb78bfa 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -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)$
diff --git a/test/lhs-test.html b/test/lhs-test.html
index d507aa19d..03894af2b 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -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; }
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index a7f3e3a64..3a821f24c 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -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; }
diff --git a/test/s5-basic.html b/test/s5-basic.html
index 5cf900d5c..4b6668c96 100644
--- a/test/s5-basic.html
+++ b/test/s5-basic.html
@@ -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;}
diff --git a/test/s5-fancy.html b/test/s5-fancy.html
index 6da71525b..8f110ffac 100644
--- a/test/s5-fancy.html
+++ b/test/s5-fancy.html
@@ -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>
diff --git a/test/s5-inserts.html b/test/s5-inserts.html
index 5e84aa44f..8aef36a42 100644
--- a/test/s5-inserts.html
+++ b/test/s5-inserts.html
@@ -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;}
diff --git a/test/writer.html4 b/test/writer.html4
index 453277e9b..9126916c3 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -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;}
diff --git a/test/writer.html5 b/test/writer.html5
index b4e5e953f..119e4a32a 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -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;}