From f9e8fadddcb1ae53fe66412b447342a1dc5a7d79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Mon, 8 Mar 2021 19:32:04 +0100
Subject: [PATCH] remove global css

---
 .gitignore           |  3 +++
 public/global.css    | 63 --------------------------------------------
 public/index.html    |  1 -
 public/manifest.json |  2 +-
 src/App.svelte       | 40 ++++++++++------------------
 src/Triangle.svelte  | 26 +++++++++---------
 6 files changed, 32 insertions(+), 103 deletions(-)
 delete mode 100644 public/global.css

diff --git a/.gitignore b/.gitignore
index 38c6ebc..a2753c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,6 @@
 .DS_Store
 
 out/
+
+# Local Netlify folder
+.netlify
\ No newline at end of file
diff --git a/public/global.css b/public/global.css
deleted file mode 100644
index bb28a94..0000000
--- a/public/global.css
+++ /dev/null
@@ -1,63 +0,0 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}
diff --git a/public/index.html b/public/index.html
index 0212fab..54143a4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,6 @@
       href="/icon/favicon-16x16.png"
     />
     <link rel="shortcut icon" type="image/png" href="/icon/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/build/bundle.css" />
     <link rel="manifest" href="/manifest.json" />
     <meta
diff --git a/public/manifest.json b/public/manifest.json
index 00db8bc..96f6919 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -5,7 +5,7 @@
   "description": "Eliminate all the circles in the triangle by jumping them over",
   "theme_color": "#bf616a",
   "background_color": "#eceff4",
-  "display": "standalone",
+  "display": "fullscreen",
   "orientation": "portrait",
   "scope": "/",
   "start_url": "/",
diff --git a/src/App.svelte b/src/App.svelte
index c23dbaf..88b85b1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -14,40 +14,28 @@
 </script>
 
 <style>
-  .level {
-    cursor: pointer;
-    margin-right: 10px;
-    color: hsl(219, 28%, 88%);
-  }
-
   .active {
-    font-weight: bold;
-    color: hsl(220, 17%, 32%);
+    @apply font-bold text-gray-800;
   }
 
   .completed {
-    background-color: hsl(220, 16%, 36%);
-    color: hsl(218, 27%, 94%);
-  }
-
-  :global(body) {
-    background-color: #eceff4;
-    margin: 0;
-    padding: 15px;
+    @apply text-gray-800 bg-gray-200;
   }
 </style>
 
 <Tailwind />
 
-<main>
-  <Triangle {side} {variant} />
+<main class="container mx-auto text-center">
+  <div class="level">
+    {#each levels as _, i}
+      <button
+        class="cursor-pointer mr-5"
+        on:click={changeLevel}
+        value={i}
+        class:completed={$completed.includes(i)}
+        class:active={level == i}>{i + 1}</button>
+    {/each}
+  </div>
 
-  {#each levels as _, i}
-    <button
-      class="level"
-      on:click={changeLevel}
-      value={i}
-      class:completed={$completed.includes(i)}
-      class:active={level == i}>{i + 1}</button>
-  {/each}
+  <Triangle {side} {variant} />
 </main>
diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index 3d4feea..f5d2f85 100644
--- a/src/Triangle.svelte
+++ b/src/Triangle.svelte
@@ -331,8 +331,8 @@
   }
 
   .triangle {
-    width: 320px;
-    height: 370px;
+    width: 450px;
+    height: 250px;
     display: grid;
     grid-template-columns: repeat(9, 1fr);
     grid-template-rows: repeat(5, 1fr);
@@ -343,20 +343,22 @@
   .circle {
     width: 50px;
     height: 50px;
-    clip-path: circle();
-    text-align: center;
-    color: white;
+    @apply rounded-full;
   }
 
   .pole,
   .pick,
   .dest {
-    cursor: pointer;
+    @apply cursor-pointer;
+  }
+
+  button {
+    @apply cursor-pointer;
   }
 
   .hole {
-    cursor: default;
-    background-color: #d8dee9;
+    background-color: hsl(219, 28%, 88%);
+    @apply shadow-inner;
   }
 
   .green {
@@ -470,7 +472,7 @@
         out:send={{ key: i }}
         class="circle div{i} hole"
         on:click={() => change(i)}>
-        {i}
+        <!-- {i} -->
       </div>
     {/if}
     {#if circles[i] == C_POLE}
@@ -479,7 +481,7 @@
         out:send={{ key: i }}
         class="circle div{i} pole {circleColors[i]}"
         on:click={() => change(i)}>
-        {i}
+        <!-- {i} -->
       </div>
     {/if}
     {#if circles[i] == C_PICK}
@@ -488,7 +490,7 @@
         out:send={{ key: i }}
         class="circle div{i} pick {circleColors[i]}-lighter"
         on:click={() => change(i)}>
-        {i}
+        <!-- {i} -->
       </div>
     {/if}
     {#if circles[i] == C_DEST}
@@ -497,7 +499,7 @@
         out:send={{ key: i }}
         class="circle div{i} dest {getDestColor()}-darker"
         on:click={() => change(i)}>
-        {i}
+        <!-- {i} -->
       </div>
     {/if}
   {/each}