notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[refac] Replace <a> with Link and button for Quick Links

Browse Source
This commit is contained in:
Karen Chen
2026-01-06 19:20:17 -05:00
parent c5c841ec30
commit c3cdb94068
4 changed files with 78 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/routes/+page.svelte
View File

@@ -7,6 +7,7 @@
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
import AffiliatedClubs from 'components/homepage/AffiliatedClubs.svelte';
import { fade } from 'svelte/transition';
import QuickLinks from 'components/QuickLinks.svelte';
/** loading things from the server side */
let { data } = $props();
@@ -33,56 +34,18 @@
<RichText value={data.description} />
</div>
<!-- Quick Links (Desktop only) -->
<!-- Quick Links (Desktop) -->
<div class="hidden lg:block p-4">
<!-- Quick Links -->
<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
>
Commonly searched for
</p>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<a
href="/events"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>ECSESS Events
</a>
<a
href="/r/trot5th"
target="_blank"
rel="noopener noreferrer"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>Trottier 5th booking
</a>
<a
href="/r/ctrlz"
target="_blank"
rel="noopener noreferrer"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>Ctrl+Z (feedback) form
</a>
<a
aria-disabled="true"
tabindex="-1"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>Sponsorship
</a>
</div>
<QuickLinks />
</div>
</div>
</div>
@@ -90,7 +53,7 @@
<!-- Image -->
<div class="order-2 m-2 lg:order-2 lg:col-span-2 lg:mx-12 lg:my-0">
<div class="lg:sticky lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
<div class="lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
<img
src={data.councilPhoto}
alt="ECSESS Council"
@@ -99,56 +62,18 @@
</div>
</div>
<!-- Quick Links -->
<!-- Quick Links (mobile) -->
<div class="order-3 p-4 lg:hidden">
<!-- Quick Links -->
<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
>
Commonly searched for
</p>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<a
href="/events"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>ECSESS Events
</a>
<a
href="/r/trot5th"
target="_blank"
rel="noopener noreferrer"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>Trottier 5th booking
</a>
<a
href="/r/ctrlz"
target="_blank"
rel="noopener noreferrer"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>Ctrl+Z (feedback) form
</a>
<a
aria-disabled="true"
tabindex="-1"
class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
text-center text-sm font-semibold text-ecsess-50 transition-colors
hover:bg-ecsess-600/50 hover:border-ecsess-300"
>Sponsorship
</a>
</div>
<QuickLinks />
</div>
</div>
</div>