[themes] use CSS variables + CSS grid to control image grid layouts, fixes #938

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

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

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

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

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;

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;