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

[style] Enhance quick links design & Reorder items order on small screen

Browse Source
This commit is contained in:
Karen Chen
2026-01-04 13:53:43 -05:00
parent 27f0b2b1f9
commit c5c841ec30
1 changed files with 122 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/routes/+page.svelte
View File

@@ -7,7 +7,6 @@
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
import AffiliatedClubs from 'components/homepage/AffiliatedClubs.svelte';
import { fade } from 'svelte/transition';
import Button from 'components/Button.svelte';
/** loading things from the server side */
let { data } = $props();
@@ -18,8 +17,9 @@
<!-- ECSESS Introduction -->
<Section from="from-ecsess-black" to="to-ecsess-900">
<div class="place-self-center md:grid md:grid-cols-1 md:gap-6 lg:grid-cols-3">
<div class="place-self-center md:place-content-around lg:col-span-1 lg:m-8">
<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">
<p>
{#each 'We are ECSESS!' as char, i}
@@ -28,34 +28,69 @@
>
{/each}
</p>
<div class="p-4">
<div class="p-4">
<RichText value={data.description} />
</div>
<div class="mt-6 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"
> 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 Booking
</a>
<a href="/r/ctrlz" 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"
>Ctrl + Z
</a>
</div>
</div>
<!-- Quick Links (Desktop only) -->
<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
</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>
</div>
<div class="m-2 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
</div>
</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:sticky lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
<img
src={data.councilPhoto}
alt="ECSESS Council"
@@ -63,6 +98,60 @@
/>
</div>
</div>
<!-- Quick Links -->
<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
</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>
</div>
</div>
</div>
</Section>
<!-- Office Hours Calendar -->
@@ -77,6 +166,7 @@
<Section from="from-ecsess-800" to="to-ecsess-950">
<AffiliatedClubs />
</Section>
<!-- FAQs and Sponsors -->
<Section from="from-ecsess-950" to="to-ecsess-black">
<div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">