feat: ✨ Different layout for games grid, in progress.

src/lib/components/footer/index.svelte

@@ -0,0 +1,8 @@
+<footer>
+  <p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
+  <p>
+    <a href="https://www.flaticon.com/free-icons/board-game" title="board game icons"
+      >Board game icons created by Freepik - Flaticon</a
+    >
+  </p>
+</footer>

src/lib/components/game.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
-  import { fade, fly } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
   import type { GameType } from '$lib/types';
 
   export let game: GameType;
+  export let detailed: boolean;
 </script>
 
 <article class="game-container" transition:fade>
-  <a class="thumbnail" href={game.url}>
-    <img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
-  </a>
+  <div class="game-">
+    <h2>{game.name}</h2>
+    <a class="thumbnail" href={game.url}>
+      <img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
+    </a>
+  </div>
 
   <div class="game-details">
     <div class="game">
       <div class="content">
-        <h2>{game.name}</h2>
         <p>{game.year_published}</p>
         <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
         <p>{game.playtime} minutes</p>
         <p>Minimum Age: {game.min_age}</p>
-        <div class="description">{@html game.description}</div>
+        {#if detailed}
+          <div class="description">{@html game.description}</div>
+        {/if}
       </div>
     </div>
   </div>
@@ -34,18 +39,16 @@
   }
 
   .game-container {
+    display: grid;
+    /* grid-template-columns: min-content 1fr; */
+    grid-template-columns: 0.5fr 1fr;
+    gap: var(--spacing-16);
+    padding: var(--spacing-16) var(--spacing-16);
+    transition: all 0.3s;
+    border-radius: 8px;
     background-color: var(--primary);
     &:hover {
       background-color: hsla(222, 9%, 65%, 1);
     }
   }
-
-  .game-container {
-    display: grid;
-    grid-template-columns: min-content 1fr;
-    gap: var(--spacing-16);
-    padding: var(--spacing-16) var(--spacing-16);
-    transition: all 0.3s;
-    border-radius: 8px;
-  }
 </style>

src/routes/index.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { fly, fade } from 'svelte/transition';
-  import { flip } from 'svelte/animate';
   // import { Checkbox, NumberInput } from 'carbon-components-svelte';
   import Game from '$lib/components/game.svelte';
   import type { GameType } from '$lib/types';
+  import Transition from '$lib/components/transition/index.svelte';
   import Listbox from '$lib/components/listbox.svelte';
   import Loading from '$lib/components/loading.svelte';
   import Portal from '$lib/Portal.svelte';
@@ -120,13 +119,12 @@
 
 {#if submitting}
   <Portal>
-    <div
-      in:fade
-      out:fade
-      class="loading">
+    <Transition transition={{ type: 'fade', duration: 0 }}>
+      <div class="loading">
         <Loading />
         <h3>Loading...</h3>
-    </div>
+      </div>
+    </Transition>
     <div class="background" />
   </Portal>
 {/if}
@@ -134,7 +132,7 @@
 <div class="games">
   <h1>Games</h1>
   {#each games as game}
-    <Game {game} />
+    <Game detailed={false} {game} />
   {/each}
 </div>
 
@@ -182,7 +180,9 @@
   }
 
   .games {
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
     gap: 2rem;
   }