add fade to modal

src/About.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { fade } from "svelte/transition"
+
   export let hidden
 </script>
 
@@ -22,24 +24,31 @@
   }
 </style>
 
-<div class="relative">
+{#if hidden}
-  <div
+  <div class="relative">
-    class="absolute z-10 rounded text-blue-darker text-left border-1 border-orange"
+    <div
-    class:hidden>
+      class="absolute z-10 rounded text-blue-darker text-left"
-    <h1>Triangles.fun</h1>
+      on:click={() => (hidden = false)}
-    A game. Leave only a single dot to win. Eliminate other dots by jumping
+      transition:fade>
-    them over!
+      <h1>Triangles.fun</h1>
-    <h2>Instructions</h2>
+      A game. Leave only a single dot to win. Eliminate other dots by
-    Click or touch the dot. If the dot can jump, it becomes lighter and the
+      jumping them over!
-    spots where it can land become darker. Perform jump by touching or
+      <h2>Instructions</h2>
-    clicking on the darker spot.
+      Click or touch the dot. If the dot can jump, it becomes lighter and
-    <h2>Installation</h2>
+      the spots where it can land become darker. Perform jump by touching
-    This game can be installed into your device. Look for "Add to Home
+      or clicking on the darker spot.
-    Screen" in the browser tab menu.
+      <h2>Installation</h2>
-    <h2>Support</h2>
+      This game can be installed into your device. Look for "Add to Home
-    You can send me your feedback or complains via
+      Screen" in the browser tab menu.
-    <a href="mailto:peter@triangles.fun">peter@triangles.fun</a>
+      <h2>Support</h2>
-    and help me keep this game running via
+      You can send me your feedback or complains via
-    <a href="https://www.buymeacoffee.com/peterbabic">Buy Me a Coffee.</a>
+      <a
+        on:click|stopPropagation
+        href="mailto:peter@triangles.fun">peter@triangles.fun</a>
+      and help me keep this game running via
+      <a
+        on:click|stopPropagation
+        href="https://www.buymeacoffee.com/peterbabic">Buy Me a Coffee.</a>
+    </div>
   </div>
-</div>
+{/if}

src/App.svelte

@@ -1,5 +1,4 @@
 <script context="module">
-  import Tree from "./Tree"
   import Graph from "./Graph"
 
   const adjcs = new Graph()
@@ -49,6 +48,7 @@
 </script>
 
 <script>
+  import { fade } from "svelte/transition"
   import { completed } from "./store.js"
   import { levels, colors } from "./levels.js"
   import Button from "./Button.svelte"
@@ -261,7 +261,7 @@
   <div
     class="m-auto transform-gpu sm:scale-150 md:scale-175 lg:scale-200 xl:scale-225">
     <div class="outer overflow-x-hidden my-4">
-      <About hidden={!about} />
+      <About bind:hidden={about} />
 
       <div data-cy="levels" class="grid grid-cols-5 gap-2 mb-4">
         {#each levels as _, i}
@@ -282,7 +282,10 @@
         on:change={change} />
 
       <div class="flex space-x-2">
-        <Button on:click={() => (about = !about)} icon="about" />
+        <Button
+          on:click={() => (about = !about)}
+          invisible={about}
+          icon="about" />
         <Button on:click={restart} invisible={about} icon="restart" />
         <Button on:click={undo} invisible={about} icon="undo" />
       </div>