added isopod colonies

src/lib/components/colony.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	let {
+		species,
+		img
+	}: {species: string; img: string;} = $props();
+</script>
+
+<div class="grow colony">
+	<div class="info">
+		<h2>{species}</h2>
+	</div>
+	<img src={img} alt="" />
+</div>
+
+<style lang="scss">
+	@use '$lib/styles/variables' as vars;
+	.colony {
+		// margin: 1em;
+		border: 1px solid vars.$base-colour;
+		display: flex;
+		flex-direction: column;
+		// align-items: center;
+		gap: 1em;
+		padding: 1em;
+		h2 {
+			// text-decoration: underline;
+			// color: vars.$base-colour;
+			margin-bottom: 0.2em;
+			text-align: center;
+		}
+		img {
+			width: 256px;
+			min-width: 200px;
+			height: 256px;
+		}
+	}
+
+	.grow {
+		transition: all 0.2s ease-in-out;
+	}
+
+	.grow:hover {
+		transform: scale(1.03);
+		border: 1px solid vars.$highlight;
+	}
+</style>

src/routes/links/+page.svelte

@@ -14,7 +14,6 @@
 	<Window name="socials">
 		<div class="links">
 			<Link link="discord" img="{discord}" redirect={false}>genki_angel</Link>
-			<!-- <Link link="" img="">fediverse</Link> -->
 			<Link link="https://www.roblox.com/users/1757381" name="https://roblox.com" img="{roblox}">
 				i play roblox sometimes...
 			</Link>

src/routes/pets/+page.svelte

@@ -2,6 +2,8 @@
 	import Window from '$lib/components/window.svelte';
 	import alert from '$lib/assets/img/alert.gif';
 
+	import Pet from '$lib/components/pet.svelte';
+	import Colony from '$lib/components/colony.svelte';
 	//pets
 	//cat
 	import jessie from '$lib/assets/img/pets/jessie.webp';
@@ -9,9 +11,14 @@
 	import fanger from '$lib/assets/img/pets/fanger.webp';
 	import baron from '$lib/assets/img/pets/baron.webp';
 	import tarantula3 from '$lib/assets/img/pets/tarantula3.webp';
-	import Pet from '$lib/components/pet.svelte';
 
 	//isopods
+	import pod1 from "$lib/assets/img/pets/isopods/pod1.webp";
+	import pod2 from "$lib/assets/img/pets/isopods/pod2.webp";
+	import pod3 from "$lib/assets/img/pets/isopods/pod3.webp";
+	import pod4 from "$lib/assets/img/pets/isopods/pod4.webp";
+	import pod5 from "$lib/assets/img/pets/isopods/pod5.webp";
+	import pod6 from "$lib/assets/img/pets/isopods/pod6.webp";
 
 	//mantis
 </script>
@@ -50,7 +57,16 @@
 			</Pet>
 		</div>
 	</Window>
-	<Window name="isopods"></Window>
+	<Window name="isopod colonies">
+		<div class="colonies">
+			<Colony species="UK Native Mix" img={pod1}></Colony>
+			<Colony species="Dairy Cows" img={pod2}></Colony>
+			<Colony species="Dwarf Whites" img={pod3}></Colony>
+			<Colony species="Lava" img={pod4}></Colony>
+			<Colony species="Powder Orange" img={pod5}></Colony>
+			<Colony species="Granulated" img={pod6}></Colony>
+		</div>
+	</Window>
 	<Window name="mantis">
 		<Pet name="???" img="" species="Budwing Mantis">
 			not much to say about this guy.<br />he is not the mantis from kung-fu panda...
@@ -67,7 +83,8 @@
 	}
 	.container {
 		display: flex;
-		flex-direction: column;
+		justify-content: space-evenly;
+		flex-wrap: wrap;
 
 		padding: 1em;
 		gap: 1em;
@@ -77,6 +94,15 @@
 		flex-direction: column;
 		gap: 1em;
 	}
+	.colonies {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 1em;
+
+		// temp until i figure out how to stop div from maxing out width
+		width: 600px; 
+	}
 	.warning {
 		color: vars.$warning;
 	}