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

[refac] Code style cleanup & minor updates

Browse Source
This commit is contained in:
Karen Chen
2026-01-22 00:24:57 -05:00
parent c3cdb94068
commit 4f8e731fe8
4 changed files with 77 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Button.svelte
View File

@@ -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>

29
src/components/Link.svelte
View File

@@ -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>

38
src/components/QuickLinks.svelte
View File

@@ -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>

67
src/routes/+page.svelte
View File

@@ -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>