From c5c972fe9431e6959a23a55d6e248cacd1af848f Mon Sep 17 00:00:00 2001
From: Shish <shish@shishnet.org>
Date: Wed, 3 Jan 2024 15:30:20 +0000
Subject: [PATCH] [themes] use CSS variables + CSS grid to control image grid
 layouts, fixes #938

---
 ext/index/style.css        | 8 ++++++++
 themes/danbooru/style.css  | 7 -------
 themes/danbooru2/style.css | 7 -------
 themes/default/style.css   | 7 -------
 themes/rule34v2/style.css  | 9 ++++-----
 themes/warm/style.css      | 5 -----
 6 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/ext/index/style.css b/ext/index/style.css
index 8fdee55d..3bebb4bf 100644
--- a/ext/index/style.css
+++ b/ext/index/style.css
@@ -7,3 +7,11 @@
 	text-align: left;
 	margin: 0 10px 10px 0;
 }
+.shm-image-list {
+	display: grid;
+	grid-template-columns: repeat( auto-fill, calc(var(--thumb-width) + 42px) );
+	place-items: center;
+}
+.shm-image-list .thumb {
+	margin-bottom: 8px;
+}
diff --git a/themes/danbooru/style.css b/themes/danbooru/style.css
index b912670b..32946a14 100644
--- a/themes/danbooru/style.css
+++ b/themes/danbooru/style.css
@@ -200,13 +200,6 @@ background:blue none repeat scroll 0 0;
 border:1px solid #EEEEEE;
 color:white;
 }
-span.thumb {
-display:inline-block;
-float:left;
-height:220px;
-text-align:center;
-width:220px;
-}
 #pagelist {
 margin-top:32px;
 }
diff --git a/themes/danbooru2/style.css b/themes/danbooru2/style.css
index 70d23acd..c649c2fd 100644
--- a/themes/danbooru2/style.css
+++ b/themes/danbooru2/style.css
@@ -223,13 +223,6 @@ color:white;
 -moz-background-inline-policy:continuous;
 -moz-background-origin:padding;
 }
-span.thumb {
-display:inline-block;
-float:left;
-width:220px;
-height:220px;
-text-align:center;
-}
 #pagelist {
 margin-top:32px;
 }
diff --git a/themes/default/style.css b/themes/default/style.css
index 4fad4fff..6df2cdd5 100644
--- a/themes/default/style.css
+++ b/themes/default/style.css
@@ -210,12 +210,6 @@ ARTICLE TABLE {
 	margin-top: 32px;
 }
 
-.thumb {
-	width: 226px;
-	display: inline-block;
-	text-align: center;
-	margin-bottom: 8px;
-}
 .thumb IMG {
 	border: 1px solid var(--block-border);
 	background: var(--block);
@@ -223,4 +217,3 @@ ARTICLE TABLE {
 	border-radius: 12px;
 	box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
 }
-
diff --git a/themes/rule34v2/style.css b/themes/rule34v2/style.css
index 84a8ebe3..b685fb49 100644
--- a/themes/rule34v2/style.css
+++ b/themes/rule34v2/style.css
@@ -195,13 +195,12 @@ SECTION>H3 {
 	padding: 8px;
 }
 
+.shm-image-list {
+	justify-items: center;
+	align-items: end;
+}
 .thumb {
-	width: 226px;
-	display: inline-block;
-	zoom: 1; /* ie6 */
-	*display: inline; /* ie6 */
 	text-align: center;
-	margin-bottom: 8px;
 }
 .thumb IMG {
 	border: 1px solid #7EB977;
diff --git a/themes/warm/style.css b/themes/warm/style.css
index 894ea9d3..ae5e0c17 100644
--- a/themes/warm/style.css
+++ b/themes/warm/style.css
@@ -175,12 +175,7 @@ ARTICLE TABLE {
 }
 
 .thumb {
-	width: 226px;
-	display: inline-block;
-	zoom: 1; /* ie6 */
-	*display: inline; /* ie6 */
 	text-align: center;
-	margin-bottom: 8px;
 }
 .thumb IMG {
 	border: 1px solid #B89F7C;