HTML: use CSS flex boxes for columns.

This allows to render an arbitrary number of columns, while the previous
approach assumed exactly two columns.

7 files changed, 14 insertions, 7 deletions

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;}