remove global css

.gitignore

@@ -4,3 +4,6 @@
 .DS_Store
 
 out/
+
+# Local Netlify folder
+.netlify

public/global.css

@@ -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;
-}

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

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": "/",

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>

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}