From 58cb429fff2cf4d947d365906dc34dcf21ba2116 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Wed, 18 Oct 2023 00:35:42 +0200
Subject: Mobile layout.

---
 play.css | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

(limited to 'play.css')

diff --git a/play.css b/play.css
index 593f5b8..ff8533a 100644
--- a/play.css
+++ b/play.css
@@ -41,20 +41,13 @@ main { background-color: #777; }
 	top: 60px;
 }
 
-/* Put cards on right of map when zoomed to fit, or very wide screen */
-main { grid-template-columns: 1fr min-content min-content 1fr; }
-#mapwrap { grid-row: 1; grid-column: 2 }
-#card_panel { grid-row: 1; grid-column: 3 }
-@media (min-width: 2200px) { main { display: grid; } }
-main.fit { display: grid; }
-
 /* MAP */
 
 #mapwrap {
 	box-shadow: 0px 1px 10px #0008;
 	width: 1650px;
 	height: 2550px;
-	margin-bottom: 36px;
+	margin-bottom: 24px;
 }
 
 #mapwrap.fit {
@@ -341,15 +334,32 @@ path.tip { stroke: white; stroke-dasharray: 4 4; }
 /* CARDS */
 
 #card_panel {
-	text-align: center;
-	margin: 24px;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: start;
+	justify-content: center;
+	gap: 18px;
+	padding: 18px;
 }
 
-#card_panel .card {
-	display: inline-block;
-	margin: 9px;
+#card_panel { width: 800px; margin: 0 auto; }
+@media (max-width: 800px) {
+	#card_panel { width: 1614px; justify-content: start; }
 }
 
+/* Put cards on right of map when zoomed to fit, or very wide screen */
+#mapwrap { grid-row: 1; grid-column: 2 }
+#card_panel { grid-row: 1; grid-column: 3 }
+#grid { grid-template-columns: 1fr min-content min-content 1fr; }
+
+@media (min-width: 2200px) {
+	#grid { display: grid; }
+	#card_panel { width: 250px; }
+}
+
+#grid.fit { display: grid; }
+#grid.fit #card_panel { width: 250px; }
+
 .card {
 	width: 248px;
 	height: 348px;
-- 
cgit v1.2.3