From 4f8e731fe8c255456dde3d1e2f7276630b7eb943 Mon Sep 17 00:00:00 2001
From: Karen Chen <145727980+Karencheenn@users.noreply.github.com>
Date: Thu, 22 Jan 2026 00:24:57 -0500
Subject: [PATCH] [refac] Code style cleanup & minor updates

---
 src/components/Button.svelte     | 13 +++----
 src/components/Link.svelte       | 29 ++++----------
 src/components/QuickLinks.svelte | 38 +++++++++++++-----
 src/routes/+page.svelte          | 67 +++++++++++++++++---------------
 4 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 137e057..6a36362 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -17,13 +17,12 @@
 </script>
 
 <button
-	disabled={disabled}
-	onclick={onclick}
-	class="rounded-md border border-ecsess-200 bg-ecsess-500
+	{disabled}
+	{onclick}
+	class="border-ecsess-200 bg-ecsess-500 rounded-md border
 		{sizeClasses[size]}
-		text-sm font-semibold text-ecsess-50 transition-colors
-		hover:bg-ecsess-600/50 hover:border-ecsess-300
-		disabled:pointer-events-none disabled:opacity-50 {className}"
+		text-ecsess-50 hover:bg-ecsess-600/50 hover:border-ecsess-300 text-sm
+		font-semibold transition-colors {className}"
 >
-	{@render children?.()}
+	{@render children()}
 </button>
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index 54cf297..d3b0e12 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -1,24 +1,11 @@
 <script lang="ts">
-	let {
-		href = undefined,
-		external = false,
-		button = false,
-		children,
-		class: className = ''
-	} = $props();
+	let { href, external = false, children } = $props();
 </script>
 
-{#if href}
-	<a
-		href={href}
-		class="{button ? '' : 'underline'} {className}"
-		target={external ? '_blank' : undefined}
-		rel={external ? 'noopener noreferrer' : undefined}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<span class={className}>
-		{@render children?.()}
-	</span>
-{/if}
+<a
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+>
+	{@render children()}
+</a>
diff --git a/src/components/QuickLinks.svelte b/src/components/QuickLinks.svelte
index 4f4bee4..4395ab1 100644
--- a/src/components/QuickLinks.svelte
+++ b/src/components/QuickLinks.svelte
@@ -3,21 +3,39 @@
 	import Button from 'components/Button.svelte';
 </script>
 
-<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-	<Link href="/events" button>
-		<Button class="w-full">ECSESS Events</Button>
+<div class="mt-3 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:mt-0">
+	<Link href="/events">
+		<Button
+			class="ql-btn flex h-full min-h-[48px] w-full cursor-pointer items-center justify-center sm:min-h-[56px]"
+		>
+			ECSESS Events
+		</Button>
 	</Link>
 
-	<Link href="/r/trot5th" external button>
-		<Button class="w-full">Trottier 5th booking</Button>
+	<Link href="/r/trot5th" external>
+		<Button
+			class="ql-btn flex h-full min-h-[48px] w-full cursor-pointer items-center justify-center sm:min-h-[56px]"
+		>
+			Trottier 5th booking
+		</Button>
 	</Link>
 
-    <Link href="/r/ctrlz" external button>
-        <Button size="lg" class="w-full">Ctrl+Z (feedback) form</Button>
-    </Link>
+	<Link href="/r/ctrlz" external>
+		<Button
+			size="lg"
+			class="ql-btn flex h-full min-h-[48px] w-full cursor-pointer items-center justify-center sm:min-h-[56px]"
+		>
+			Ctrl+Z (feedback) form
+		</Button>
+	</Link>
 
 	<!-- Sponsorship disabled -->
-	<Link button>
-		<Button disabled class="w-full">Sponsorship</Button>
+	<Link href="#">
+		<Button
+			disabled
+			class="ql-btn flex h-full min-h-[48px] w-full cursor-not-allowed items-center justify-center sm:min-h-[56px]"
+		>
+			Sponsorship
+		</Button>
 	</Link>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 77e82ba..8be54d2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,10 +18,14 @@
 
 <!-- ECSESS Introduction -->
 <Section from="from-ecsess-black" to="to-ecsess-900">
-	<div class="place-self-center grid min-h-screen grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8 lg:items-stretch">
-		<!-- Description + Title -->
-		<div class="order-1 place-self-center lg:order-1 lg:col-span-1 lg:m-8 lg:self-stretch">
-			<div class="flex flex-col text-center lg:pt-2">
+	<div
+		class="grid grid-cols-1 gap-2 place-self-center sm:gap-4 md:gap-6 lg:h-[70vh] lg:grid-cols-3 lg:grid-rows-3 lg:items-center lg:gap-6"
+	>
+		<!-- Title -->
+		<div
+			class="order-1 mb-2 flex items-center justify-center lg:col-start-1 lg:row-start-1 lg:mb-6 lg:place-self-center"
+		>
+			<div class="flex flex-col text-center">
 				<p>
 					{#each 'We are ECSESS!' as char, i}
 						<span class="page-title" in:fade|global={{ delay: 200 + i * 100, duration: 800 }}
@@ -29,47 +33,46 @@
 						>
 					{/each}
 				</p>
+			</div>
+		</div>
 
-				<div class="p-4">
-					<RichText value={data.description} />
-				</div>
-
-				<!-- Quick Links (Desktop) -->
-				<div class="hidden lg:block p-4">
-					<div class="mt-6">
-						<p
-							class="mt-8 mb-4 text-center text-base font-bold tracking-wide
-								text-ecsess-50
-								underline decoration-ecsess-200 decoration-2 underline-offset-8
-								drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
-						>
-							Commonly searched for
-						</p>
-						<QuickLinks />
-					</div>
-				</div>
+		<!-- Description -->
+		<div
+			class="order-2 mb-2 flex items-center justify-center p-4 lg:col-start-1 lg:row-start-2 lg:mb-6 lg:place-self-center"
+		>
+			<div class="max-w-[36rem] text-center lg:text-center">
+				<RichText value={data.description} />
 			</div>
 		</div>
 
 		<!-- Image -->
-		<div class="order-2 m-2 lg:order-2 lg:col-span-2 lg:mx-12 lg:my-0">
-			<div class="lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
+		<div class="order-3 m-0 sm:m-2 lg:col-span-2 lg:col-start-2 lg:row-span-3 lg:row-start-1">
+			<div class="flex h-auto w-full items-center justify-center sm:h-full">
 				<img
 					src={data.councilPhoto}
 					alt="ECSESS Council"
-					class="ring-ecsess-500 shadow-ecsess-400 hover:ring-ecsess-400 rounded-md shadow-md ring-4 transition-all"
+					class="ring-ecsess-500 max-h-[35vh] max-w-full rounded-md object-contain shadow-md ring-4 transition-all sm:max-h-[45vh] md:max-h-[60vh] lg:max-h-full"
 				/>
 			</div>
 		</div>
 
-		<!-- Quick Links (mobile) -->
-		<div class="order-3 p-4 lg:hidden">
-			<div class="mt-6">
+		<!-- Quick Links (Desktop) -->
+		<div class="hidden p-4 lg:col-start-1 lg:row-start-3 lg:flex lg:place-self-center">
+			<div>
 				<p
-					class="mt-8 mb-4 text-center text-base font-bold tracking-wide
-						text-ecsess-50
-						underline decoration-ecsess-200 decoration-2 underline-offset-8
-						drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
+					class="text-ecsess-50 decoration-ecsess-200 mt-2 mb-4 text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
+				>
+					Commonly searched for
+				</p>
+				<QuickLinks />
+			</div>
+		</div>
+
+		<!-- Quick Links (mobile) -->
+		<div class="order-4 p-3 lg:hidden">
+			<div>
+				<p
+					class="text-ecsess-50 decoration-ecsess-200 mt-4 mb-4 text-center text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
 				>
 					Commonly searched for
 				</p>