From eb22c73f115b1fd36b014ecbac934dabc270b3a6 Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Sun, 25 Jan 2026 01:47:13 -0500
Subject: [PATCH] Rework the error page and OH schedule

---
 src/components/RichText.svelte                |  2 +-
 .../homepage/AffiliatedGroups.svelte          | 18 ++++-----
 src/components/officehour/OHBlock.svelte      |  6 +--
 src/components/officehour/OHSchedule.svelte   | 12 ++++--
 src/routes/+error.svelte                      |  4 +-
 src/routes/+page.svelte                       | 37 ++++++++++---------
 6 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte
index c5a8bd0..316019e 100644
--- a/src/components/RichText.svelte
+++ b/src/components/RichText.svelte
@@ -4,6 +4,6 @@
 	let { value } = $props();
 </script>
 
-<div class="flex flex-col justify-center-safe typography">
+<div class="typography flex flex-col justify-center-safe">
 	<PortableText {value} />
 </div>
diff --git a/src/components/homepage/AffiliatedGroups.svelte b/src/components/homepage/AffiliatedGroups.svelte
index 4db6785..06e9d5d 100644
--- a/src/components/homepage/AffiliatedGroups.svelte
+++ b/src/components/homepage/AffiliatedGroups.svelte
@@ -70,7 +70,7 @@
 		{#each groups as group, i (group.name)}
 			{@const Icon = group.icon}
 			<article
-				class="bg-ecsess-950 border border-ecsess-800 flex flex-col overflow-hidden rounded-lg text-left"
+				class="bg-ecsess-950 border-ecsess-800 flex flex-col overflow-hidden rounded-lg border text-left"
 				aria-labelledby={`group-${i}-title`}
 			>
 				<div class="flex flex-1 flex-col p-7 md:p-8">
@@ -100,28 +100,24 @@
 					<ul class="mb-5 list-none space-y-2 ps-0 text-base md:text-lg" role="list">
 						{#each group.features as feature (feature)}
 							<li class="flex items-center gap-2">
-								<span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"></span>
+								<span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"
+								></span>
 								<span class="text-ecsess-100 font-medium">{feature}</span>
 							</li>
 						{/each}
 					</ul>
 
 					<!-- Links -->
-					<div class="mt-auto flex flex-wrap items-center gap-3 border-t border-ecsess-800 pt-5">
+					<div class="border-ecsess-800 mt-auto flex flex-wrap items-center gap-3 border-t pt-5">
 						{#if group.instagram}
 							<a
 								href={group.instagram}
 								target="_blank"
 								rel="noopener noreferrer external"
 								aria-label={`Follow ${group.name} on Instagram`}
-								class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80"
+								class="text-ecsess-300 hover:text-ecsess-100 border-ecsess-700 bg-ecsess-900/50 hover:bg-ecsess-800/80 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base"
 							>
-								<Instagram
-									class="size-5"
-									strokeWidth={2.5}
-									aria-hidden="true"
-									focusable="false"
-								/>
+								<Instagram class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
 								<span>Instagram</span>
 							</a>
 						{/if}
@@ -131,7 +127,7 @@
 								target="_blank"
 								rel="noopener noreferrer external"
 								aria-label={`Visit ${group.name} website`}
-								class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80"
+								class="text-ecsess-300 hover:text-ecsess-100 border-ecsess-700 bg-ecsess-900/50 hover:bg-ecsess-800/80 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base"
 							>
 								<Globe class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
 								<span>Website</span>
diff --git a/src/components/officehour/OHBlock.svelte b/src/components/officehour/OHBlock.svelte
index e2b2a7f..e9da008 100644
--- a/src/components/officehour/OHBlock.svelte
+++ b/src/components/officehour/OHBlock.svelte
@@ -9,14 +9,14 @@
 </script>
 
 <div
-	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 border-ecsess-300 grid h-full place-content-center rounded-md border text-center shadow-md transition-all hover:shadow-lg"
+	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 grid h-full place-content-center rounded-md border-transparent text-center shadow-md transition-all hover:shadow-lg"
 >
-	<p class="text-base font-extrabold lg:text-lg">
+	<p class="text-base leading-tight font-semibold">
 		{officeHour.member.name.split(' ')[0]}
 	</p>
 
 	{#if !isShortBlock}
-		<p class="text-ecsess-700 text-xs italic">
+		<p class="text-ecsess-700 mt-0.5 text-[11px] leading-tight opacity-90">
 			{shortenPosition(officeHour.member.position)}
 		</p>
 	{/if}
diff --git a/src/components/officehour/OHSchedule.svelte b/src/components/officehour/OHSchedule.svelte
index cc77936..b4427ef 100644
--- a/src/components/officehour/OHSchedule.svelte
+++ b/src/components/officehour/OHSchedule.svelte
@@ -114,10 +114,14 @@
 </script>
 
 <div class="overflow-x-auto">
-	<div class="mx-auto max-w-7xl min-w-[800px]">
+	<div class="border-ecsess-500 bg-ecsess-900 mx-auto max-w-7xl min-w-[800px] border-t pt-2">
 		<!-- Header row -->
 		<div class="mb-2 grid gap-0" style:grid-template-columns="80px repeat(5, 1fr)">
-			<div class="text-ecsess-50 px-2 text-center text-base font-semibold">Time</div>
+			<div
+				class="text-ecsess-50 bg-ecsess-900 sticky left-0 z-20 px-2 text-center text-base font-semibold"
+			>
+				Time
+			</div>
 			{#each DAYS as day}
 				<div class="text-ecsess-50 px-2 text-center text-base font-semibold md:text-lg">
 					{day}
@@ -135,7 +139,9 @@
 
 				<!-- Time column (only for first day) -->
 				{#if dayIndex === 0}
-					<div class="border-ecsess-500 relative border-b-2">
+					<div
+						class="border-ecsess-500 bg-ecsess-900 sticky left-0 z-20 border-b-2"
+					>
 						{#each timeSlots as timeSlot}
 							{@const isHourMark = timeSlot % 60 === 0}
 							<div
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 8461315..cce1133 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -18,8 +18,8 @@
 	</Link>
 
 	<p class="text-ecsess-200 text-lg leading-relaxed md:text-xl">
-		The page you are looking for is not implemented because we are too lazy to do it. But if you
-		really want to see it, you can reboot to the homepage and try again.
+		The page you are looking for is not implemented because we are too lazy to do it. <br />
+		But if you really want to see it, you can reboot to the homepage and try again.
 		<br />
 		<br />
 		Or even better, you can join us and help us implement it.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5258338..ff35abf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,25 +22,25 @@
 		class="mx-auto grid w-full max-w-[84dvw] grid-cols-1 place-items-center gap-16 py-6 lg:min-h-[75vh] lg:grid-cols-[1fr_2fr]"
 	>
 		<!-- Left: Description and Quick Links -->
-		<div class="flex flex-col items-center text-center lg:items-start lg:text-left gap-2 ml-4">
+		<div class="ml-4 flex flex-col items-center gap-2 text-center lg:items-start lg:text-left">
 			<h1 class="mb-2">
 				{#each 'We are ECSESS!'.split('') as char, i}
-					<span
-						class="page-title"
-						in:fade|global={{ delay: 150 + i * 60, duration: 800 }}
-					>
+					<span class="page-title" in:fade|global={{ delay: 150 + i * 60, duration: 800 }}>
 						{char}
 					</span>
 				{/each}
-				</h1>
+			</h1>
 			<p
-				class="max-w-xl text-base leading-relaxed text-ecsess-200/90 md:text-lg lg:max-w-lg lg:leading-8"
+				class="text-ecsess-200/90 max-w-xl text-base leading-relaxed md:text-lg lg:max-w-lg lg:leading-8"
 			>
-			<span class="font-bold text-ecsess-50">Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span> is the student council which helps McGill ECSE students in their
-				<span class="font-bold text-ecsess-50">academic</span>,
-				<span class="font-bold text-ecsess-50">technical</span>,
-				<span class="font-bold text-ecsess-50">social</span> and
-				<span class="font-bold text-ecsess-50">professional</span> progression.
+				<span class="text-ecsess-50 font-bold"
+					>Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span
+				>
+				is the student council which helps McGill ECSE students in their
+				<span class="text-ecsess-50 font-bold">academic</span>,
+				<span class="text-ecsess-50 font-bold">technical</span>,
+				<span class="text-ecsess-50 font-bold">social</span> and
+				<span class="text-ecsess-50 font-bold">professional</span> progression.
 			</p>
 
 			<div class="mt-8 w-full max-w-xl lg:max-w-none">
@@ -49,18 +49,18 @@
 		</div>
 
 		<!-- Right: Council Photo -->
-		<div class="relative w-full lg:max-w-none flex justify-center items-center">
+		<div class="relative flex w-full items-center justify-center lg:max-w-none">
 			<div
-				class="relative overflow-hidden rounded-2xl shadow-2xl ring-1 ring-ecsess-400/20 ring-offset-2 ring-offset-ecsess-900/50 flex justify-center items-center"
+				class="ring-ecsess-400/20 ring-offset-ecsess-900/50 relative flex items-center justify-center overflow-hidden rounded-2xl shadow-2xl ring-1 ring-offset-2"
 			>
 				<div
-					class="absolute inset-0 rounded-2xl bg-linear-to-br from-ecsess-500/10 to-transparent"
+					class="from-ecsess-500/10 absolute inset-0 rounded-2xl bg-linear-to-br to-transparent"
 					aria-hidden="true"
 				></div>
 				<img
 					src={data.councilPhoto}
 					alt="ECSESS Council"
-					class="relative w-full h-full object-contain object-center"
+					class="relative h-full w-full object-contain object-center"
 				/>
 			</div>
 		</div>
@@ -71,7 +71,10 @@
 <Section from="from-ecsess-800" to="to-ecsess-900">
 	<div class="w-full">
 		<h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2>
-		<p class="text-ecsess-200 mb-8">Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or just chat about anything!</p>
+		<p class="text-ecsess-200 mb-8">
+			Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or
+			just chat about anything!
+		</p>
 		<OhSchedule allOhs={data.allOHs} />
 	</div>
 </Section>