Add more dev stuff and games

Author: coffandro

src/lib/Grid/Grid.svelte

@@ -1,13 +1,6 @@
 <svelte:options customElement="grid-container" />
 
-<script lang="ts">
-    let { columns = "3", rowHeight = "1fr", gap = "2%" } = $props();
-</script>
-
-<div
-    class="grid-container"
-    style="--columns:{columns};--gap:{gap};--rowHeight:{rowHeight};"
->
+<div class="grid-container">
     <slot />
 </div>
 

src/lib/Grid/Items/Developer.svelte

@@ -35,7 +35,7 @@
 
         background-image:
             linear-gradient(lightblue, lightblue),
-            radial-gradient(at right, white 0%, lightblue 75%);
+            radial-gradient(at right, var(--text) 0%, lightblue 75%);
         background-origin: border-box;
         background-clip: padding-box, border-box;
     }
@@ -93,7 +93,7 @@
         grid-template-rows: repeat(3, 1fr);
         gap: 0px;
         background-color: lightblue;
-        color: white;
+        color: var(--text);
         flex: 1;
         margin-bottom: 10px;
         width: 350px;

src/lib/Grid/Items/Game.svelte

@@ -0,0 +1,76 @@
+<svelte:options customElement="game-tile" />
+
+<script lang="ts">
+    let { thumbnailPath = "", name = "", description = "" } = $props();
+</script>
+
+<div class="grid-item">
+    <div class="content-container">
+        <img class="thumbnail" src={thumbnailPath} alt={thumbnailPath} />
+        <div class="text-container">
+            <span class="name">{name}</span>
+            <!-- <span class="name">{name}</span>
+            <span class="description">{description}</span> -->
+        </div>
+    </div>
+</div>
+
+<slot />
+
+<style>
+    .thumbnail {
+        height: 200px;
+        width: 350px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 15px;
+    }
+
+    .content-container {
+        position: relative;
+        height: 200px;
+        width: 350px;
+    }
+
+    .text-container {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: 350px;
+        height: 65px;
+
+        background-image:
+            linear-gradient(transparent 0%, var(--crust-secondary) 100%),
+            radial-gradient(
+                at bottom,
+                var(--crust-secondary) 0%,
+                transparent 70%
+            );
+
+        background-origin: border-box;
+        background-clip: padding-box, border-box;
+        border-radius: 0 0 15px 15px;
+        text-align: center;
+        text-wrap: wrap;
+    }
+
+    .name {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 300px;
+        transform: translate(-50%, -50%);
+        color: white;
+    }
+
+    .grid-item {
+        background-color: lightblue;
+        color: var(--text);
+        flex: 1;
+        width: 350px;
+        height: 200px;
+        border-radius: 15px;
+    }
+</style>

src/routes/+page.svelte

@@ -2,9 +2,15 @@
     import "$lib/Styles/global.css";
     import Navbar from "$lib/Navbar/navbar.svelte";
     import Grid from "$lib/Grid/Grid.svelte";
-    import devTile from "$lib/Grid/Items/Developer.svelte";
+    import gameTile from "$lib/Grid/Items/Game.svelte";
 </script>
 
 <navbar-component pageName="Index"></navbar-component>
 
 <h1>Welcome to Bread Bird Games</h1>
+<grid-container>
+    <game-tile
+        thumbnailPath="gameThumbs/HNAndersenBanner.png"
+        name="Unanswered Questions with H.N. Andersen"
+    ></game-tile>
+</grid-container>

src/routes/about/+page.svelte

@@ -9,13 +9,17 @@
 
 <h1 id="title">The people behind the games:</h1>
 
-<grid-container columns="3">
+<grid-container>
     <developer-tile
         thumbnailPath="/devThumbs/Isabella.png"
         name="Isabella"
         pronouns="She/Her"
         description="Artist"
-    ></developer-tile>
+    >
+        <a href="https://www.instagram.com/gaw_drawzz//">
+            <i class="link fa-brands fa-instagram"></i>
+        </a>
+    </developer-tile>
     <developer-tile
         thumbnailPath="/devThumbs/Cornelius.png"
         name="Cornelius"
@@ -69,7 +73,7 @@
 
     .link {
         font-size: 32px;
-        color: white;
+        color: var(--text);
         margin-right: 5px;
     }
 </style>