From 867d647839aebe9ebcce07f4590de543ea9013f2 Mon Sep 17 00:00:00 2001
From: Mario Pietsch <pmariojo@gmail.com>
Date: Fri, 3 Mar 2023 22:25:12 +0100
Subject: [PATCH] Move fourcolumns CSS class as multicolumns to tw5-styles for
 reuse (#7318)

---
 ...s with CSS - Specified Columns Methods.tid | 22 +++++--------------
 .../tiddlers/system/tw5.com-styles.tid        | 19 ++++++++++++++++
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid b/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid
index 817776a1a..853f868a0 100644
--- a/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid	
+++ b/editions/tw5.com/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid	
@@ -33,29 +33,17 @@ Note the various places you need to indicate the number of columns
 
 ```
 @@.fourcolumns
-<$list filter="[tag[Filter Operators]]" variable="foo"><br>
-<<foo>>
+<$list filter="[tag[Filter Operators]]" variable="foo">
+<<foo>><br>
 </$list>
 @@
 ```
 
 !! Example showing partial list of filter operators
 
-<style>
-.fourcolumns {
-   display:block;
-   column-count:4;
-   column-gap:1em;
-   -moz-column-count:4;
-   -moz-column-gap:1em;
-   -webkit-column-count: 4;
-   -webkit-column-gap:1em;
-}
-</style>
-
-
 @@.fourcolumns
-<$list filter="[tag[Filter Operators]limit[24]]" variable="foo"><br>
-<<foo>>
+<$list filter="[tag[Filter Operators]limit[24]]" variable="foo">
+<<foo>><br>
 </$list>
 @@
+
diff --git a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
index d6d00f86f..a8fff61b6 100644
--- a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
+++ b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
@@ -325,3 +325,22 @@ type: text/vnd.tiddlywiki
 .tc-btn-download:active {
 	box-shadow: none;
 }
+
+/* WikiText rules */
+
+.multi-columns,
+.fourcolumns {
+	display: block;
+	column-count: 4;
+	column-gap: 1em;
+	-moz-column-count: 4;
+	-moz-column-gap: 1em;
+	-webkit-column-count: 4;
+	-webkit-column-gap: 1em;
+}
+
+@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+	.multi-columns {
+		column-count: 2;
+	}
+}