From 911936fd13e654bbf6bdaeb18cee3e2791f3a1c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Tue, 9 Mar 2021 20:43:16 +0100
Subject: [PATCH] convert from grid to absolute

---
 src/Triangle.svelte | 73 ++++++++++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index f5d2f85..74d1c87 100644
--- a/src/Triangle.svelte
+++ b/src/Triangle.svelte
@@ -284,72 +284,89 @@
 </script>
 
 <style>
+  .triangle {
+    position: relative;
+  }
+
+  .triangle div {
+    position: absolute;
+  }
+
   .div0 {
-    grid-area: 1 / 5 / 2 / 6;
+    left: 120px;
+    top: 0px;
   }
   .div1 {
-    grid-area: 2 / 4 / 3 / 5;
+    left: 90px;
+    top: 50px;
   }
   .div2 {
-    grid-area: 2 / 6 / 3 / 7;
+    left: 150px;
+    top: 50px;
   }
   .div3 {
-    grid-area: 3 / 3 / 4 / 4;
+    left: 60px;
+    top: 100px;
   }
   .div4 {
-    grid-area: 3 / 5 / 4 / 6;
+    left: 120px;
+    top: 100px;
   }
   .div5 {
-    grid-area: 3 / 7 / 4 / 8;
+    left: 180px;
+    top: 100px;
   }
   .div6 {
-    grid-area: 4 / 2 / 5 / 3;
+    left: 30px;
+    top: 150px;
   }
   .div7 {
-    grid-area: 4 / 4 / 5 / 5;
+    left: 90px;
+    top: 150px;
   }
   .div8 {
-    grid-area: 4 / 6 / 5 / 7;
+    left: 150px;
+    top: 150px;
   }
   .div9 {
-    grid-area: 4 / 8 / 5 / 9;
+    left: 210px;
+    top: 150px;
   }
   .div10 {
-    grid-area: 5 / 1 / 6 / 2;
+    left: 0px;
+    top: 200px;
   }
   .div11 {
-    grid-area: 5 / 3 / 6 / 4;
+    left: 60px;
+    top: 200px;
   }
   .div12 {
-    grid-area: 5 / 5 / 6 / 6;
+    left: 120px;
+    top: 200px;
   }
   .div13 {
-    grid-area: 5 / 7 / 6 / 8;
+    left: 180px;
+    top: 200px;
   }
   .div14 {
-    grid-area: 5 / 9 / 6 / 10;
-  }
-
-  .triangle {
-    width: 450px;
-    height: 250px;
-    display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
+    left: 240px;
+    top: 200px;
   }
 
   .circle {
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     @apply rounded-full;
   }
 
   .pole,
   .pick,
   .dest {
-    @apply cursor-pointer;
+    @apply cursor-pointer border-2 border-gray-700;
+  }
+
+  .pick {
+    @apply border-gray-400;
   }
 
   button {