From 2e1d9e27217c4020a18dfbb675415c88983b8ef5 Mon Sep 17 00:00:00 2001
From: Antoine Phan <antoine.phan@mail.mcgill.ca>
Date: Sun, 20 Jul 2025 00:12:09 -0400
Subject: [PATCH] Rich Portable Text

---
 src/components/RichText.svelte | 9 +++++++++
 src/routes/+page.svelte        | 6 ++----
 2 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 src/components/RichText.svelte

diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte
new file mode 100644
index 0000000..fc36b7c
--- /dev/null
+++ b/src/components/RichText.svelte
@@ -0,0 +1,9 @@
+<script>
+    // NOTE: I think there could be a better way to do this
+	import { PortableText } from '@portabletext/svelte';
+	let { value } = $props();
+</script>
+
+<div id="test" class="prose prose-base lg:prose-lg **:text-ecsess-200">
+	<PortableText {value} />
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3550d05..682da97 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import FaqAccordion from 'components/FAQAccordion.svelte';
 	import Section from 'components/Section.svelte';
-	import { PortableText } from '@portabletext/svelte';
+	import RichText from 'components/RichText.svelte';
 	import OhSchedule from 'components/OHSchedule.svelte';
 
 	/** loading things from the server side */
@@ -18,9 +18,7 @@
 <Section>
 	<div class="flex h-1/2 flex-col items-center justify-center text-center">
 		<p class="page-title">What is ECSESS?</p>
-		<div id="test">
-			<PortableText value={data.description} />
-		</div>
+		<RichText value={data.description}/>
 
 		<br />
 		<p class="italic">