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

Merge pull request #80 from mcgill-ecsess/quick-links-home-page

Browse Source 
[feat] Added quick links on Homepage
This commit is contained in:
Antoine Phan
2026-01-22 11:49:04 -05:00
committed by GitHub
parent e3c3790e32 3f8d9de2bf
commit 8d7317a2d7
4 changed files with 81 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/routes/+page.svelte
View File

@@ -7,6 +7,7 @@
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
import AffiliatedGroups from 'components/homepage/AffiliatedGroups.svelte';
import { fade } from 'svelte/transition';
import QuickLinks from 'components/QuickLinks.svelte';
/** loading things from the server side */
let { data } = $props();
@@ -17,9 +18,14 @@
<!-- 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="flex h-1/2 flex-col place-content-center text-center">
<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 }}
@@ -27,17 +33,32 @@
>
{/each}
</p>
<div class="p-4">
<RichText value={data.description} />
</div>
</div>
</div>
<div class="m-2 place-content-around lg:col-span-2 lg:mx-12 lg:my-0">
<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"
/>
<!-- 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-xl text-center lg:text-center">
<RichText value={data.description} />
</div>
</div>
<!-- Image -->
<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 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 -->
<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>
@@ -54,6 +75,7 @@
<Section from="from-ecsess-800" to="to-ecsess-950">
<AffiliatedGroups />
</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">