Rocoux. Improved layout.

1 files changed, 8 insertions, 39 deletions

diff --git a/play.html b/play.html
index b8de55f..d95925e 100644
--- a/play.html
+++ b/play.html
@@ -114,12 +114,16 @@ main {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
-	align-content: end;
+	align-items: end;
 	flex-wrap: wrap;
 	gap: 8px;
 	margin: 12px;
 }
 
+.flip .slot_cubes {
+	align-items: start;
+}
+
 /* S37 Inkerman - The Fog */
 [data-card="225B"] .slot_sticks { display: none }
 
@@ -130,9 +134,6 @@ main {
 .slot_sticks {
 	margin: 12px;
 	min-height: 87px;
-}
-
-.slot_sticks {
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
@@ -140,11 +141,9 @@ main {
 	gap: 1px;
 }
 
-GRID.slot_sticks {
-	display: grid;
-	grid-template-rows: repeat(8, 10px);
-	grid-auto-flow: column;
-	gap: 1px;
+.flip .slot_sticks {
+	justify-content: start;
+	flex-direction: column-reverse;
 }
 
 .slot_shift {
@@ -172,15 +171,6 @@ GRID.slot_sticks {
 	margin: 12px 0;
 }
 
-.flip .slot_sticks {
-	justify-content: start;
-	flex-direction: column-reverse;
-}
-
-.flip .slot_cubes {
-	align-items: start;
-}
-
 .stick {
 	width: 90%;
 	//margin: 0 auto;
@@ -189,27 +179,6 @@ GRID.slot_sticks {
 	box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
 }
 
-/*
-.slot_sticks { flex-wrap: wrap; }
-.stick:first-child:nth-last-child(8) { width: 45%; }
-.stick:first-child:nth-last-child(9) { width: 45%; }
-.stick:first-child:nth-last-child(10) { width: 45%; }
-.stick:first-child:nth-last-child(11) { width: 45%; }
-.stick:first-child:nth-last-child(12) { width: 45%; }
-.stick:first-child:nth-last-child(13) { width: 45%; }
-.stick:first-child:nth-last-child(14) { width: 45%; }
-.stick:first-child:nth-last-child(15) { width: 45%; }
-.stick:first-child:nth-last-child(16) { width: 45%; }
-.stick:first-child:nth-last-child(9) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(10) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(11) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(12) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(13) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(14) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(15) ~ .stick { width: 45%; }
-.stick:first-child:nth-last-child(16) ~ .stick { width: 45%; }
-*/
-
 :root {
 	--red: hsl(360, 77%, 51%);
 	--pink: hsl(359, 81%, 78%);