set stacking offsets using :nth-child selector

1 files changed, 46 insertions, 21 deletions

diff --git a/play.html b/play.html
index 2a87bf6..632cd90 100644
--- a/play.html
+++ b/play.html
@@ -100,7 +100,7 @@ main { background-color: dimgray }
 	fill-opacity: 0.6;
 }
 #map svg path.area.target {
-	cursor: pointer;
+	/* cursor: pointer; */
 	fill-opacity: 0.4;
 	fill: var(--target-color);
 	stroke: var(--target-color);
@@ -124,28 +124,51 @@ main { background-color: dimgray }
 .space.tip { border-color: var(--tip-color);}
 
 .stack {
-  display: grid;
-  grid-gap: 0.1rem;
-  grid-template-columns: repeat(auto-fill, 2px);
-  transition: grid-template-columns 0.5s;
-  cursor: pointer;
-}
-
-.stack:hover {
-  grid-template-columns: repeat(8, 36px);
-}
-
-.stack.m:hover {
-  grid-template-columns: repeat(8, 34px);
+	pointer-events: none;
 }
 
-.stack.s:hover {
-  grid-template-columns: repeat(8, 24px);
-}
-
-.stack:hover div {
-  z-index: 100;
-}
+.stack > div { position: absolute; transition: inset 200ms ease; }
+.stack:hover > div { z-index: 100; }
+
+.stack.m > div:nth-child(1 of :not(.hide)) { left: calc(0 * 8px); top: calc(0 * 8px); }
+.stack.m > div:nth-child(2 of :not(.hide)) { left: calc(1 * 8px); top: calc(1 * 8px); }
+.stack.m > div:nth-child(3 of :not(.hide)) { left: calc(2 * 8px); top: calc(2 * 8px); }
+.stack.m > div:nth-child(4 of :not(.hide)) { left: calc(3 * 8px); top: calc(3 * 8px); }
+.stack.m > div:nth-child(5 of :not(.hide)) { left: calc(4 * 8px); top: calc(4 * 8px); }
+.stack.m > div:nth-child(6 of :not(.hide)) { left: calc(5 * 8px); top: calc(5 * 8px); }
+.stack.m > div:nth-child(7 of :not(.hide)) { left: calc(6 * 8px); top: calc(6 * 8px); }
+.stack.m > div:nth-child(8 of :not(.hide)) { left: calc(7 * 8px); top: calc(7 * 8px); }
+.stack.m > div:nth-child(9 of :not(.hide)) { left: calc(8 * 8px); top: calc(8 * 8px); }
+
+.stack.m:hover > div:nth-child(1 of :not(.hide)) { left: calc(0 * 30px); top: calc(0 * 30px); }
+.stack.m:hover > div:nth-child(2 of :not(.hide)) { left: calc(1 * 30px); top: calc(1 * 30px); }
+.stack.m:hover > div:nth-child(3 of :not(.hide)) { left: calc(2 * 30px); top: calc(2 * 30px); }
+.stack.m:hover > div:nth-child(4 of :not(.hide)) { left: calc(3 * 30px); top: calc(3 * 30px); }
+.stack.m:hover > div:nth-child(5 of :not(.hide)) { left: calc(4 * 30px); top: calc(4 * 30px); }
+.stack.m:hover > div:nth-child(6 of :not(.hide)) { left: calc(5 * 30px); top: calc(5 * 30px); }
+.stack.m:hover > div:nth-child(7 of :not(.hide)) { left: calc(6 * 30px); top: calc(6 * 30px); }
+.stack.m:hover > div:nth-child(8 of :not(.hide)) { left: calc(7 * 30px); top: calc(7 * 30px); }
+.stack.m:hover > div:nth-child(9 of :not(.hide)) { left: calc(8 * 30px); top: calc(8 * 30px); }
+
+.stack > div:nth-child(1 of :not(.hide)) { left: calc(0 * 12px); top: calc(0 * -16px); }
+.stack > div:nth-child(2 of :not(.hide)) { left: calc(1 * 12px); top: calc(1 * -16px); }
+.stack > div:nth-child(3 of :not(.hide)) { left: calc(2 * 12px); top: calc(2 * -16px); }
+.stack > div:nth-child(4 of :not(.hide)) { left: calc(3 * 12px); top: calc(3 * -16px); }
+.stack > div:nth-child(5 of :not(.hide)) { left: calc(4 * 12px); top: calc(4 * -16px); }
+.stack > div:nth-child(6 of :not(.hide)) { left: calc(5 * 12px); top: calc(5 * -16px); }
+.stack > div:nth-child(7 of :not(.hide)) { left: calc(6 * 12px); top: calc(6 * -16px); }
+.stack > div:nth-child(8 of :not(.hide)) { left: calc(7 * 12px); top: calc(7 * -16px); }
+.stack > div:nth-child(9 of :not(.hide)) { left: calc(8 * 12px); top: calc(8 * -16px); }
+
+.stack:hover > div:nth-child(1 of :not(.hide)) { left: calc(0 * 30px); top: calc(0 * -30px); }
+.stack:hover > div:nth-child(2 of :not(.hide)) { left: calc(1 * 30px); top: calc(1 * -30px); }
+.stack:hover > div:nth-child(3 of :not(.hide)) { left: calc(2 * 30px); top: calc(2 * -30px); }
+.stack:hover > div:nth-child(4 of :not(.hide)) { left: calc(3 * 30px); top: calc(3 * -30px); }
+.stack:hover > div:nth-child(5 of :not(.hide)) { left: calc(4 * 30px); top: calc(4 * -30px); }
+.stack:hover > div:nth-child(6 of :not(.hide)) { left: calc(5 * 30px); top: calc(5 * -30px); }
+.stack:hover > div:nth-child(7 of :not(.hide)) { left: calc(6 * 30px); top: calc(6 * -30px); }
+.stack:hover > div:nth-child(8 of :not(.hide)) { left: calc(7 * 30px); top: calc(7 * -30px); }
+.stack:hover > div:nth-child(9 of :not(.hide)) { left: calc(8 * 30px); top: calc(8 * -30px); }
 
 #tracker div {
   box-sizing: border-box;
@@ -157,6 +180,8 @@ main { background-color: dimgray }
 	background-size: 1000%;
 	background-repeat: no-repeat;
 	border-style: solid;
+	pointer-events: auto;
+	cursor: pointer;
 }
 
 .counter {