From 1fbf0eac9eab724d32ed2083f4555642f15f2d0c Mon Sep 17 00:00:00 2001
From: Keenan Brock <keenan@thebrocks.net>
Date: Fri, 1 May 2026 05:14:34 -0400
Subject: [PATCH] remove css warning on weasyprint

Issue
-----
Styles unconditionally emits css that uses screen-only properties.
Paged-media engines (weasyprint, prince, pagedjs) have no viewport
and complain. Fix it to hide these properties from the engines.

Before
------
Building any document with `pandoc --pdf-engine=weasyprint` prints:

    WARNING: Ignored `gap: min(4vw, 1.5em)` at 6:32, invalid value.
    WARNING: Ignored `overflow-x: auto` at 7:28, unknown property.

After
-----
Same two rules, wrapped in `@media screen { ... }`. HTML browsers
render identically. Print engines skip the block, no warnings.

Fixes: jgm/pandoc#11524
---
 data/templates/styles.html | 8 ++++++--
 test/s5-basic.html         | 8 ++++++--
 test/s5-fancy.html         | 8 ++++++--
 test/s5-inserts.html       | 8 ++++++--
 test/writer.html4          | 8 ++++++--
 test/writer.html5          | 8 ++++++--
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/data/templates/styles.html b/data/templates/styles.html
index 8238e8cbf8a7..cac6172c5ed6 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -185,8 +185,12 @@
 }
 $endif$
 span.smallcaps{font-variant: small-caps;}
-div.columns{display: flex; gap: min(4vw, 1.5em);}
-div.column{flex: auto; overflow-x: auto;}
+div.columns{display: flex; gap: 1.5em;}
+div.column{flex: auto;}
+@media screen {
+div.columns{gap: min(4vw, 1.5em);}
+div.column{overflow-x: auto;}
+}
 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
 /* The extra [class] is a hack that increases specificity enough to
    override a similar rule in reveal.js */
diff --git a/test/s5-basic.html b/test/s5-basic.html
index 2000dd30551b..4803e344af14 100644
--- a/test/s5-basic.html
+++ b/test/s5-basic.html
@@ -15,8 +15,12 @@
     ** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
     */
     span.smallcaps{font-variant: small-caps;}
-    div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: auto; overflow-x: auto;}
+    div.columns{display: flex; gap: 1.5em;}
+    div.column{flex: auto;}
+    @media screen {
+    div.columns{gap: min(4vw, 1.5em);}
+    div.column{overflow-x: auto;}
+    }
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     /* The extra [class] is a hack that increases specificity enough to
        override a similar rule in reveal.js */
diff --git a/test/s5-fancy.html b/test/s5-fancy.html
index 62f98db3d467..f2f54811d275 100644
--- a/test/s5-fancy.html
+++ b/test/s5-fancy.html
@@ -15,8 +15,12 @@
     ** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
     */
     span.smallcaps{font-variant: small-caps;}
-    div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: auto; overflow-x: auto;}
+    div.columns{display: flex; gap: 1.5em;}
+    div.column{flex: auto;}
+    @media screen {
+    div.columns{gap: min(4vw, 1.5em);}
+    div.column{overflow-x: auto;}
+    }
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     /* The extra [class] is a hack that increases specificity enough to
        override a similar rule in reveal.js */
diff --git a/test/s5-inserts.html b/test/s5-inserts.html
index 9199b064a27f..1c04e428db49 100644
--- a/test/s5-inserts.html
+++ b/test/s5-inserts.html
@@ -13,8 +13,12 @@
     ** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
     */
     span.smallcaps{font-variant: small-caps;}
-    div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: auto; overflow-x: auto;}
+    div.columns{display: flex; gap: 1.5em;}
+    div.column{flex: auto;}
+    @media screen {
+    div.columns{gap: min(4vw, 1.5em);}
+    div.column{overflow-x: auto;}
+    }
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     /* The extra [class] is a hack that increases specificity enough to
        override a similar rule in reveal.js */
diff --git a/test/writer.html4 b/test/writer.html4
index edb174d1f728..760b1327f5f9 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -159,8 +159,12 @@
       text-decoration: none;
     }
     span.smallcaps{font-variant: small-caps;}
-    div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: auto; overflow-x: auto;}
+    div.columns{display: flex; gap: 1.5em;}
+    div.column{flex: auto;}
+    @media screen {
+    div.columns{gap: min(4vw, 1.5em);}
+    div.column{overflow-x: auto;}
+    }
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     /* The extra [class] is a hack that increases specificity enough to
        override a similar rule in reveal.js */
diff --git a/test/writer.html5 b/test/writer.html5
index e045156bc961..1f7da9ab8764 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -159,8 +159,12 @@
       text-decoration: none;
     }
     span.smallcaps{font-variant: small-caps;}
-    div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: auto; overflow-x: auto;}
+    div.columns{display: flex; gap: 1.5em;}
+    div.column{flex: auto;}
+    @media screen {
+    div.columns{gap: min(4vw, 1.5em);}
+    div.column{overflow-x: auto;}
+    }
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     /* The extra [class] is a hack that increases specificity enough to
        override a similar rule in reveal.js */