From 096d811c5835c0d97dd687a68465e6d68adac675 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 15 Dec 2023 15:52:21 +0100 Subject: Rocoux. Improved layout. --- play.html | 47 ++++++++--------------------------------------- 1 file changed, 8 insertions(+), 39 deletions(-) (limited to 'play.html') 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%); -- cgit v1.2.3