From 841335544e9f9d10f1c169cc44311cd0ef73ff4a Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Thu, 4 Sep 2025 20:29:13 -0400
Subject: [PATCH] Minor update to Resource Card and layout

---
 src/components/ResourceCard.svelte | 25 ++++++++++++++-----------
 src/routes/resources/+page.svelte  |  8 +++++---
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/ResourceCard.svelte b/src/components/ResourceCard.svelte
index 81e79ea..6218188 100644
--- a/src/components/ResourceCard.svelte
+++ b/src/components/ResourceCard.svelte
@@ -1,22 +1,25 @@
 <script>
-	import {  CircleArrowRight } from '@lucide/svelte';
-	import Link from '././Link.svelte';
-	let { title = '_Resource Title_', children, link = 'https://example.com' } = $props();
+	import { CircleArrowRight } from '@lucide/svelte';
+	import Link from 'components/Link.svelte';
+	let { title = '_Resource Title_', description = "Lorem ipsum", link = 'https://example.com' } = $props();
 </script>
 
-<div class="h-fit w-xl px-4 bg-ecsess-50 rounded-lg relative">
-	<div class="grid grid-cols-[5fr_1fr]">
+<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-lg px-4 py-2 md:py-0">
+	<div class="grid grid-cols-1 md:grid-cols-[7fr_1fr]">
 		<div class="flex flex-col items-start p-4">
-			<p class="text-ecsess-900 my-1 text-left text-xl font-semibold"> 
-				{title} 
+			<p class="text-ecsess-900 my-1 pb-1 text-left text-xl font-extrabold">
+				{title}
 			</p>
-			<p class="text-ecsess-400 text-left"> 
-				{@render children()}
+			<p class="text-ecsess-600 text-left text-base">
+				{description}
 			</p>
 		</div>
-		<div class="absolute bottom-2 right-2">
+		<div class="m-4 place-self-center">
 			<Link href={link}>
-				<CircleArrowRight size="42" class="stroke-ecsess-800 hover:stroke-ecsess-400 active:scale-90 transition duration-200 cursor-pointer"/>
+				<CircleArrowRight
+					size="42"
+					class="stroke-ecsess-800 hover:stroke-ecsess-400 cursor-pointer transition duration-200 active:scale-90"
+				/>
 			</Link>
 		</div>
 	</div>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index 5045f9c..225e1f2 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -11,9 +11,11 @@
 
 	<div class="grid gap-4">
 		{#each data.resources as re}
-		<ResourceCard title={re.title} link={re.url}>
-			{re.description}
-		</ResourceCard>
+			<ResourceCard
+				title={re.title}
+				link={re.url}
+				description={re.description}
+			/>
 		{/each}
 	</div>
 </Section>