Tweak layout for mobile.

1 files changed, 19 insertions, 12 deletions

diff --git a/play.css b/play.css
index bb3af9e..7e4b52f 100644
--- a/play.css
+++ b/play.css
@@ -631,13 +631,12 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 /* PANELS */
 
 .panel {
-	min-width: 1368px;
-	max-width: 1636px;
+	background-color: #444;
+	max-width: min(calc(100% - 30px), 1636px);
 	margin: 12px auto 36px auto;
 }
 
 .panel_header {
-	background-color: hsl(0,0%,27%);
 	color: white;
 	user-select: none;
 	font-weight: bold;
@@ -646,7 +645,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 }
 
 .panel_body {
-	background-color: hsl(0,0%,35%);
+	background-color: #555;
 	display: flex;
 	justify-content: start;
 	flex-wrap: wrap;
@@ -664,12 +663,12 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-.panel_header.p_red { background-color: hsl(354,20%,27%) }
-.panel_header.p_blue { background-color: hsl(207,20%,27%) }
-.panel_header.p_yellow { background-color: hsl(47,25%,27%) }
-.panel_header.p_green { background-color: hsl(99,15%,27%) }
+.panel.p_red { background-color: hsl(354,20%,27%) }
+.panel.p_blue { background-color: hsl(207,20%,27%) }
+.panel.p_yellow { background-color: hsl(47,25%,27%) }
+.panel.p_green { background-color: hsl(99,15%,27%) }
 
-#played.p_red {
+.panel.p_red #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(354,20%,33%),
 		hsl(354,20%,33%) 60px,
@@ -678,7 +677,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-#played.p_blue {
+.panel.p_blue #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(207,20%,33%),
 		hsl(207,20%,33%) 60px,
@@ -687,7 +686,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-#played.p_yellow {
+.panel.p_yellow #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(47,25%,33%),
 		hsl(47,25%,33%) 60px,
@@ -696,7 +695,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-#played.p_green {
+.panel.p_green #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(99,15%,33%),
 		hsl(99,15%,33%) 60px,
@@ -757,3 +756,11 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	border: 2px solid #444;
 	opacity: 0.8;
 }
+
+/* MOBILE LAYOUT */
+
+@media (max-width: 640px) {
+	.panel_body {
+		justify-content: center;
+	}
+}