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

Styling updates, overhaul main landing page

Browse Source
This commit is contained in:
Antoine Phan
2026-01-25 01:25:16 -05:00
parent f8f650813a
commit f9fbca9531
4 changed files with 118 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@@ -28,14 +28,14 @@
--color-ecsess-black: #1f1f1f; --color-ecsess-black: #1f1f1f;
--color-ecsess-black-hover: #161917; --color-ecsess-black-hover: #161917;
--animate-wiggle: wiggle 0.3s ease-in-out infinite; --animate-wiggle: wiggle 0.5s ease-in-out 1;
@keyframes wiggle { @keyframes wiggle {
0%, 0%,
100% { 100% {
transform: rotateY(-3deg); transform: rotateY(-2.4deg);
} }
50% { 50% {
transform: rotateY(3deg); transform: rotateY(2.4deg);
} }
} }
} }

2
src/components/RichText.svelte
View File

@@ -4,6 +4,6 @@
let { value } = $props(); let { value } = $props();
</script> </script>
<div class="flex flex-col justify-center-safe"> <div class="flex flex-col justify-center-safe typography">
<PortableText {value} /> <PortableText {value} />
</div> </div>

155
src/components/homepage/AffiliatedGroups.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Globe, Instagram, Wrench, Zap, CodeXml, Podcast } from '@lucide/svelte'; import { Globe, Instagram, Wrench, Users, CodeXml, Cpu } from '@lucide/svelte';
// All icons from @lucide/svelte share the same component type; reuse one for typing // All icons from @lucide/svelte share the same component type; reuse one for typing
type IconComponent = typeof Wrench; type IconComponent = typeof Wrench;
@@ -17,16 +17,11 @@
{ {
name: 'Code.Jam()', name: 'Code.Jam()',
description: description:
"McGill Engineering's largest annual hackathon. A 48-hour programming competition where students create innovative solutions to real-world problems.", "McGill Engineering's largest annual hackathon, a 36-hour programming competition where students create innovative projects!",
website: 'https://codejam.mcgilleus.ca/', website: 'https://codejam.mcgilleus.ca/',
instagram: 'https://www.instagram.com/mcgillcodejam/', instagram: 'https://www.instagram.com/mcgillcodejam/',
icon: CodeXml, icon: CodeXml,
features: [ features: ['Biggest Hackathon in Engineering', 'Great prizes', 'Networking opportunities']
'Biggest Hackathon in Engineering',
'Great prizes',
'Cool swags and merch',
'Networking opportunities'
]
}, },
{ {
name: 'The Factory', name: 'The Factory',
@@ -35,7 +30,16 @@
website: 'https://factory.mcgilleus.ca/', website: 'https://factory.mcgilleus.ca/',
instagram: 'https://www.instagram.com/thefactory_mcgill/', instagram: 'https://www.instagram.com/thefactory_mcgill/',
icon: Wrench, icon: Wrench,
features: ['Student-run Lab Space', '3D Printing', 'Equipment Rental', 'Hardware Workshops'] features: ['Student-run Lab Space', '3D Printing', 'Hardware Workshops']
},
{
name: 'ECSESSBits',
description:
'First Year Council of the McGill Electrical, Computer, Software Engineering Student Society.',
website: '',
instagram: 'https://www.instagram.com/ecsessbits/',
icon: Users,
features: ['First Year Council', 'Fun Events', 'Study Sessions']
}, },
{ {
name: 'IEEE McGill', name: 'IEEE McGill',
@@ -43,114 +47,99 @@
'One of the largest IEEE student branches in Eastern Canada, offering professional development, networking, and industry connections.', 'One of the largest IEEE student branches in Eastern Canada, offering professional development, networking, and industry connections.',
website: 'https://ieee.mcgilleus.ca/', website: 'https://ieee.mcgilleus.ca/',
instagram: 'https://www.instagram.com/ieeemcgill/', instagram: 'https://www.instagram.com/ieeemcgill/',
icon: Zap, icon: Cpu,
features: [ features: ['Technical Talks', 'Arduino Workshops', 'Networking Events']
'Technical Talks',
'Arduino Workshops',
'IEEEXtreme Competition',
'Networking Events'
]
} }
]; ];
</script> </script>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<!-- Section Header --> <!-- Section Header -->
<div class="mb-12 text-center"> <div class="my-12 text-center">
<h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-4 text-4xl font-bold md:text-5xl"> <h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
Subcommittees & Affiliated Groups Subcommittees & Affiliated Groups
</h2> </h2>
<p class="text-ecsess-200 mx-auto max-w-2xl text-lg"> <p class="text-ecsess-200 mx-auto max-w-2xl text-base">
Explore opportunities to enhance your skills, build innovative projects, and connect with the Explore opportunities to enhance your skills, build innovative projects, and connect with the
engineering community through our subcommittees and affiliated groups. engineering community through our subcommittees and affiliated groups.
</p> </p>
</div> </div>
<!-- Clubs Grid --> <!-- Clubs Grid: 2x2 on large screens -->
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
{#each groups as group, i (group.name)} {#each groups as group, i (group.name)}
{@const Icon = group.icon} {@const Icon = group.icon}
<article <article
class="group bg-ecsess-950 shadow-ecsess-800 relative flex flex-col overflow-hidden rounded-2xl shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl" class="bg-ecsess-950 border border-ecsess-800 flex flex-col overflow-hidden rounded-lg text-left"
aria-labelledby={`group-${i}-title`} aria-labelledby={`group-${i}-title`}
> >
<!-- Decorative gradient bar --> <div class="flex flex-1 flex-col p-7 md:p-8">
<div class="from-ecsess-400 via-ecsess-500 to-ecsess-600 h-2 bg-gradient-to-r"></div> <!-- Header: icon + name -->
<header class="mb-5 flex items-center justify-start gap-4">
<div
class="bg-ecsess-800 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl"
>
<Icon
class="text-ecsess-300 size-7"
strokeWidth={2.5}
aria-hidden="true"
focusable="false"
/>
</div>
<h3 id={`group-${i}-title`} class="text-ecsess-50 text-2xl font-bold">
{group.name}
</h3>
</header>
<div class="flex flex-1 flex-col p-6"> <!-- Description -->
<!-- Icon and Name --> <p class="text-ecsess-200 mb-5 text-base leading-relaxed md:text-lg">
<div class="mb-4 flex items-center justify-between gap-4"> {group.description}
<div class="flex items-center gap-4"> </p>
<div
class="group-hover:bg-ecsess-500 bg-ecsess-800 flex h-14 w-14 items-center justify-center rounded-xl shadow-md transition-all duration-300 group-hover:scale-110" <!-- Features -->
<ul class="mb-5 list-none space-y-2 ps-0 text-base md:text-lg" role="list">
{#each group.features as feature (feature)}
<li class="flex items-center gap-2">
<span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"></span>
<span class="text-ecsess-100 font-medium">{feature}</span>
</li>
{/each}
</ul>
<!-- Links -->
<div class="mt-auto flex flex-wrap items-center gap-3 border-t border-ecsess-800 pt-5">
{#if group.instagram}
<a
href={group.instagram}
target="_blank"
rel="noopener noreferrer external"
aria-label={`Follow ${group.name} on Instagram`}
class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80"
> >
<Icon <Instagram
class="text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white" class="size-5"
strokeWidth={2.5} strokeWidth={2.5}
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"
/> />
</div> <span>Instagram</span>
<h3 id={`group-${i}-title`} class="text-ecsess-50 text-2xl font-bold"> </a>
{group.name} {/if}
</h3> {#if group.website}
</div>
<!-- Action Buttons -->
<div class="flex gap-2">
<a <a
href={group.website} href={group.website}
target="_blank" target="_blank"
rel="noopener noreferrer external" rel="noopener noreferrer external"
aria-label={`Visit ${group.name} website`} aria-label={`Visit ${group.name} website`}
class="bg-ecsess-800 hover:bg-ecsess-500 text-ecsess-100 hover:text-ecsess-50 flex h-10 w-10 items-center justify-center rounded-lg shadow-md transition-all hover:shadow-lg active:scale-95" class="text-ecsess-300 hover:text-ecsess-100 inline-flex items-center gap-2 rounded-md border border-ecsess-700 bg-ecsess-900/50 px-4 py-2 text-base hover:bg-ecsess-800/80"
> >
<Globe class="h-5 w-5" strokeWidth={2.5} aria-hidden="true" focusable="false" /> <Globe class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
<span>Website</span>
</a> </a>
{#if group.instagram} {/if}
<a
href={group.instagram}
target="_blank"
rel="noopener noreferrer external"
aria-label={`Follow ${group.name} on Instagram`}
class="bg-ecsess-800 hover:bg-ecsess-500 text-ecsess-100 hover:text-ecsess-50 flex h-10 w-10 items-center justify-center rounded-lg shadow-md transition-all hover:shadow-lg active:scale-95"
>
<Instagram
class="h-5 w-5"
strokeWidth={2.5}
aria-hidden="true"
focusable="false"
/>
</a>
{/if}
</div>
</div> </div>
<!-- Description -->
<p class="text-ecsess-100 mb-6 flex-1 text-base leading-relaxed">
{group.description}
</p>
<!-- Features -->
<ul class="mb-6 space-y-2" role="list">
{#each group.features as feature (feature)}
<li class="flex items-center gap-2 pl-3">
<div class="bg-ecsess-500 h-1.5 w-1.5 rounded-full" aria-hidden="true"></div>
<span class="text-ecsess-100 text-base font-semibold">
{feature}
</span>
</li>
{/each}
</ul>
</div> </div>
</article> </article>
{/each} {/each}
</div> </div>
<!-- Bottom CTA -->
<div class="mt-12 text-center">
<p class="text-ecsess-300 text-sm">
Want to get involved? Visit their websites and social media pages to learn about upcoming
events and how to join!
</p>
</div>
</div> </div>

79
src/routes/+page.svelte
View File

@@ -17,67 +17,72 @@
<SeoMetaTags canonical={data.canonical} /> <SeoMetaTags canonical={data.canonical} />
<!-- ECSESS Introduction --> <!-- ECSESS Introduction -->
<Section from="from-ecsess-black" to="to-ecsess-900"> <Section from="from-ecsess-black" to="to-ecsess-800">
<div <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" class="mx-auto grid w-full max-w-[84dvw] grid-cols-1 place-items-center gap-16 py-6 lg:min-h-[75vh] lg:grid-cols-[1fr_2fr]"
> >
<!-- Title --> <!-- Left: Description and Quick Links -->
<div <div class="flex flex-col items-center text-center lg:items-start lg:text-left gap-2 ml-4">
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" <h1 class="mb-2">
> {#each 'We are ECSESS!'.split('') as char, i}
<div class="flex flex-col text-center"> <span
<p> class="page-title"
{#each 'We are ECSESS!' as char, i} in:fade|global={{ delay: 150 + i * 60, duration: 800 }}
<span class="page-title" in:fade|global={{ delay: 200 + i * 100, duration: 800 }} >
>{char}</span {char}
> </span>
{/each} {/each}
</p> </h1>
<p
class="max-w-xl text-base leading-relaxed text-ecsess-200/90 md:text-lg lg:max-w-lg lg:leading-8"
>
<span class="font-bold text-ecsess-50">Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span> is the student council which helps McGill ECSE students in their
<span class="font-bold text-ecsess-50">academic</span>,
<span class="font-bold text-ecsess-50">technical</span>,
<span class="font-bold text-ecsess-50">social</span> and
<span class="font-bold text-ecsess-50">professional</span> progression.
</p>
<div class="mt-8 w-full max-w-xl lg:max-w-none">
<QuickLinks />
</div> </div>
</div> </div>
<!-- Description --> <!-- Right: Council Photo -->
<div <div class="relative w-full lg:max-w-none flex justify-center items-center">
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="relative overflow-hidden rounded-2xl shadow-2xl ring-1 ring-ecsess-400/20 ring-offset-2 ring-offset-ecsess-900/50 flex justify-center items-center"
<div class="max-w-xl text-center lg:text-center"> >
<RichText value={data.description} /> <div
</div> class="absolute inset-0 rounded-2xl bg-linear-to-br from-ecsess-500/10 to-transparent"
</div> aria-hidden="true"
></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 <img
src={data.councilPhoto} src={data.councilPhoto}
alt="ECSESS Council" 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" class="relative w-full h-full object-contain object-center"
/> />
</div> </div>
</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> </div>
</Section> </Section>
<!-- Office Hours Calendar --> <!-- Office Hours Calendar -->
<Section from="from-ecsess-900" to="to-ecsess-800"> <Section from="from-ecsess-800" to="to-ecsess-900">
<div class="w-full"> <div class="w-full">
<h1 id="office-hours">Office Hours</h1> <h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2>
<p class="text-ecsess-200 mb-8">Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or just chat about anything!</p>
<OhSchedule allOhs={data.allOHs} /> <OhSchedule allOhs={data.allOHs} />
</div> </div>
</Section> </Section>
<!-- Affiliated Clubs --> <!-- Affiliated Clubs -->
<Section from="from-ecsess-800" to="to-ecsess-950"> <Section from="from-ecsess-900" to="to-ecsess-black">
<AffiliatedGroups /> <AffiliatedGroups />
</Section> </Section>
<!-- FAQs and Sponsors --> <!-- FAQs and Sponsors -->
<Section from="from-ecsess-950" to="to-ecsess-black"> <!-- <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"> <div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div> <div>
<h1>FAQs</h1> <h1>FAQs</h1>
@@ -99,4 +104,4 @@
</div> </div>
</div> </div>
</div> </div>
</Section> </Section> -->