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

Changes to some colour contrast, reworded, and refactor some duplicated code

Browse Source
This commit is contained in:
Antoine Phan
2026-01-22 01:22:23 -05:00
parent 4f8e731fe8
commit 3f8d9de2bf
3 changed files with 34 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Button.svelte
View File

@@ -1,28 +1,13 @@
<script lang="ts">
type ButtonSize = 'sm' | 'md' | 'lg';
let {
children,
onclick = null,
disabled = false,
size = 'md' as ButtonSize,
class: className = ''
} = $props();
const sizeClasses: Record<ButtonSize, string> = {
sm: 'px-3 py-1.5',
md: 'px-4 py-2',
lg: 'px-2 py-2'
};
let { children, onclick = null, disabled = false, class: className = '' } = $props();
</script>
<button
{disabled}
{onclick}
class="border-ecsess-200 bg-ecsess-500 rounded-md border
{sizeClasses[size]}
text-ecsess-50 hover:bg-ecsess-600/50 hover:border-ecsess-300 text-sm
font-semibold transition-colors {className}"
class="bg-ecsess-600 text-ecsess-50
hover:bg-ecsess-700 w-fit rounded-md
px-6 py-3 text-sm font-semibold transition-colors hover:cursor-pointer {className}"
>
{@render children()}
</button>

58
src/components/QuickLinks.svelte
View File

@@ -3,39 +3,33 @@
import Button from 'components/Button.svelte';
</script>
<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>
<div>
<p
class="text-ecsess-50 decoration-ecsess-200 mt-2 mb-6 text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
>
Popular resources
</p>
<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>
<div class="mt-3 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:mt-0">
<Link href="/events">
<Button class="flex h-full w-full items-center justify-center">ECSESS Events</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>
<Link href="/r/trot5th" external>
<Button class="flex h-full w-full items-center justify-center">
Trottier 5th Room Booking
</Button>
</Link>
<!-- Sponsorship disabled -->
<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>
<Link href="/r/ctrlz" external>
<Button class="flex h-full w-full items-center justify-center">Ctrl+Z feedback form</Button>
</Link>
<!-- Sponsorship disabled -->
<Link href="/sponsorship">
<Button disabled class="flex h-full w-full items-center justify-center">
Sponsor ECSESS
</Button>
</Link>
</div>
</div>

27
src/routes/+page.svelte
View File

@@ -40,7 +40,7 @@
<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">
<div class="max-w-xl text-center lg:text-center">
<RichText value={data.description} />
</div>
</div>
@@ -56,28 +56,9 @@
</div>
</div>
<!-- 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="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>
<QuickLinks />
</div>
<!-- Quick Links -->
<div class="order-4 p-3 lg:col-start-1 lg:row-start-3 lg:flex lg:place-self-center lg:p-4">
<QuickLinks />
</div>
</div>
</Section>