Improve zooming layout.

1 files changed, 48 insertions, 29 deletions

diff --git a/play.css b/play.css
index 805e94b..19ae7d5 100644
--- a/play.css
+++ b/play.css
@@ -41,6 +41,52 @@ main { background-color: #777; }
 	top: 60px;
 }
 
+#card_panel {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: start;
+	justify-content: center;
+	gap: 16px;
+	padding: 16px;
+}
+
+@media (max-width: 800px) {
+	#card_panel {
+		justify-content: start;
+	}
+}
+
+#table {
+	display: grid;
+	width: 100%;
+	grid-template-columns: 1fr min-content min-content 1fr;
+	grid-template-rows: min-content max-content;
+}
+
+#mapwrap {
+	grid-column: 2;
+	grid-row: 2;
+}
+
+#card_panel {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#mapwrap[data-fit="both"] + #card_panel {
+	max-width: 250px;
+	grid-column: 3;
+	grid-row: 2;
+}
+
+@media (min-width: 2000px) {
+	#card_panel {
+		max-width: 250px;
+		grid-column: 3;
+		grid-row: 2;
+	}
+}
+
 /* MAP */
 
 #mapwrap {
@@ -50,8 +96,8 @@ main { background-color: #777; }
 	margin-bottom: 24px;
 }
 
-#mapwrap.fit {
-	margin-bottom: 0
+#mapwrap[data-fit="width"], #mapwrap[data-fit="both"] {
+	margin-bottom: 0;
 }
 
 #map {
@@ -332,33 +378,6 @@ path.tip { stroke: white; stroke-dasharray: 4 4; }
 
 /* CARDS */
 
-#card_panel {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: start;
-	justify-content: center;
-	gap: 18px;
-	padding: 18px;
-}
-
-#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;