From b3450c64a1d7133365c97efbdfa5889c4cdd8c88 Mon Sep 17 00:00:00 2001
From: zzzmlssqnzzz <melissa.qian@mail.mcgill.ca>
Date: Thu, 4 Sep 2025 16:16:33 -0400
Subject: [PATCH 1/3] resource card

---
 src/components/ResourceCard.svelte | 27 ++++++++++++++++-----------
 src/routes/resources/+page.svelte  |  2 +-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/ResourceCard.svelte b/src/components/ResourceCard.svelte
index a9099d4..81e79ea 100644
--- a/src/components/ResourceCard.svelte
+++ b/src/components/ResourceCard.svelte
@@ -1,18 +1,23 @@
 <script>
-	import { slide } from 'svelte/transition';
-	import Button from './Button.svelte';
-	import Link from './Link.svelte';
+	import {  CircleArrowRight } from '@lucide/svelte';
+	import Link from '././Link.svelte';
 	let { title = '_Resource Title_', children, link = 'https://example.com' } = $props();
 </script>
 
-<div class="bg-ecsess-200 ring-6 ring-ecsess-600 hover:ring-ecsess-200/60 hover:shadow-3xl max-w-sm rounded-lg w-full transition-all" transition:slide>
-	<Link href={link}>
-		<div class="px-8 py-4">
-			<p class="text-ecsess-800 px-2 text-xl font-semibold lg:text-2xl">
-				{title}
+<div class="h-fit w-xl px-4 bg-ecsess-50 rounded-lg relative">
+	<div class="grid grid-cols-[5fr_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>
+			<p class="text-ecsess-400 text-left"> 
+				{@render children()}
 			</p>
-
-			<p class="text-ecsess-black pt-3 text-base font-normal lg:text-lg">{@render children()}</p>
 		</div>
-	</Link>
+		<div class="absolute bottom-2 right-2">
+			<Link href={link}>
+				<CircleArrowRight size="42" class="stroke-ecsess-800 hover:stroke-ecsess-400 active:scale-90 transition duration-200 cursor-pointer"/>
+			</Link>
+		</div>
+	</div>
 </div>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index 0ba6188..5045f9c 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -9,7 +9,7 @@
 <Section>
 	<p class="page-title">Resources</p>
 
-	<div class="flex flex-col gap-8">
+	<div class="grid gap-4">
 		{#each data.resources as re}
 		<ResourceCard title={re.title} link={re.url}>
 			{re.description}

From 8f433119543a12829da38a9260de587f8d1b12c2 Mon Sep 17 00:00:00 2001
From: zzzmlssqnzzz <melissa.qian@mail.mcgill.ca>
Date: Thu, 4 Sep 2025 16:18:55 -0400
Subject: [PATCH 2/3] adding new colors

---
 src/app.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index ad316c5..b3eb3c8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,12 +2,20 @@
 @import 'tailwindcss';
 
 @theme {
+	--color-ecsess-50: #e8ffd9;
+	--color-ecsess-100: #CCE7BA;
 	--color-ecsess-200: #a9b7a0;
+	--color-ecsess-300: #82a17f;
 	--color-ecsess-400: #5c8a5c;
+	--color-ecsess-500: #4b7b4b;
 	--color-ecsess-600: #3b6a3a;
+	--color-ecsess-700: #235323;
 	--color-ecsess-800: #0a3d2a;
+	--color-ecsess-900: #062c20;
+	--color-ecsess-950: #031c15;
+	--color-ecsess-teal: #168059;
 	--color-ecsess-black: #1F1F1F;
-	--color-ecsess-black-hover: #168059; 
+	--color-ecsess-black-hover: #161917;
 }
 
 * {

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 3/3] 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>