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-hover: #161917;
--animate-wiggle: wiggle 0.3s ease-in-out infinite;
--animate-wiggle: wiggle 0.5s ease-in-out 1;
@keyframes wiggle {
0%,
100% {
transform: rotateY(-3deg);
transform: rotateY(-2.4deg);
}
50% {
transform: rotateY(3deg);
transform: rotateY(2.4deg);
}
}
}

2
src/components/RichText.svelte
View File

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

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

@@ -1,5 +1,5 @@
<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
type IconComponent = typeof Wrench;
@@ -17,16 +17,11 @@
{
name: 'Code.Jam()',
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/',
instagram: 'https://www.instagram.com/mcgillcodejam/',
icon: CodeXml,
features: [
'Biggest Hackathon in Engineering',
'Great prizes',
'Cool swags and merch',
'Networking opportunities'
]
features: ['Biggest Hackathon in Engineering', 'Great prizes', 'Networking opportunities']
},
{
name: 'The Factory',
@@ -35,7 +30,16 @@
website: 'https://factory.mcgilleus.ca/',
instagram: 'https://www.instagram.com/thefactory_mcgill/',
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',
@@ -43,49 +47,40 @@
'One of the largest IEEE student branches in Eastern Canada, offering professional development, networking, and industry connections.',
website: 'https://ieee.mcgilleus.ca/',
instagram: 'https://www.instagram.com/ieeemcgill/',
icon: Zap,
features: [
'Technical Talks',
'Arduino Workshops',
'IEEEXtreme Competition',
'Networking Events'
]
icon: Cpu,
features: ['Technical Talks', 'Arduino Workshops', 'Networking Events']
}
];
</script>
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-12 text-center">
<h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-4 text-4xl font-bold md:text-5xl">
<div class="my-12 text-center">
<h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
Subcommittees & Affiliated Groups
</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
engineering community through our subcommittees and affiliated groups.
</p>
</div>
<!-- Clubs Grid -->
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Clubs Grid: 2x2 on large screens -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
{#each groups as group, i (group.name)}
{@const Icon = group.icon}
<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`}
>
<!-- Decorative gradient bar -->
<div class="from-ecsess-400 via-ecsess-500 to-ecsess-600 h-2 bg-gradient-to-r"></div>
<div class="flex flex-1 flex-col p-6">
<!-- Icon and Name -->
<div class="mb-4 flex items-center justify-between gap-4">
<div class="flex items-center gap-4">
<div class="flex flex-1 flex-col p-7 md:p-8">
<!-- Header: icon + name -->
<header class="mb-5 flex items-center justify-start gap-4">
<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"
class="bg-ecsess-800 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl"
>
<Icon
class="text-ecsess-300 h-7 w-7 transition-colors group-hover:text-white"
class="text-ecsess-300 size-7"
strokeWidth={2.5}
aria-hidden="true"
focusable="false"
@@ -94,63 +89,57 @@
<h3 id={`group-${i}-title`} class="text-ecsess-50 text-2xl font-bold">
{group.name}
</h3>
</div>
<!-- Action Buttons -->
<div class="flex gap-2">
<a
href={group.website}
target="_blank"
rel="noopener noreferrer external"
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"
>
<Globe class="h-5 w-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
</a>
</header>
<!-- Description -->
<p class="text-ecsess-200 mb-5 text-base leading-relaxed md:text-lg">
{group.description}
</p>
<!-- 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="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"
>
<Instagram
class="h-5 w-5"
class="size-5"
strokeWidth={2.5}
aria-hidden="true"
focusable="false"
/>
<span>Instagram</span>
</a>
{/if}
{#if group.website}
<a
href={group.website}
target="_blank"
rel="noopener noreferrer external"
aria-label={`Visit ${group.name} website`}
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="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
<span>Website</span>
</a>
{/if}
</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>
</article>
{/each}
</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>

73
src/routes/+page.svelte
View File

@@ -17,67 +17,72 @@
<SeoMetaTags canonical={data.canonical} />
<!-- ECSESS Introduction -->
<Section from="from-ecsess-black" to="to-ecsess-900">
<Section from="from-ecsess-black" to="to-ecsess-800">
<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 -->
<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 }}
>{char}</span
<!-- Left: Description and Quick Links -->
<div class="flex flex-col items-center text-center lg:items-start lg:text-left gap-2 ml-4">
<h1 class="mb-2">
{#each 'We are ECSESS!'.split('') as char, i}
<span
class="page-title"
in:fade|global={{ delay: 150 + i * 60, duration: 800 }}
>
{char}
</span>
{/each}
</p>
</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"
</h1>
<p
class="max-w-xl text-base leading-relaxed text-ecsess-200/90 md:text-lg lg:max-w-lg lg:leading-8"
>
<div class="max-w-xl text-center lg:text-center">
<RichText value={data.description} />
<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>
<!-- 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">
<!-- Right: Council Photo -->
<div class="relative w-full lg:max-w-none flex justify-center items-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="absolute inset-0 rounded-2xl bg-linear-to-br from-ecsess-500/10 to-transparent"
aria-hidden="true"
></div>
<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"
class="relative w-full h-full object-contain object-center"
/>
</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>
<!-- 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">
<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} />
</div>
</Section>
<!-- Affiliated Clubs -->
<Section from="from-ecsess-800" to="to-ecsess-950">
<Section from="from-ecsess-900" to="to-ecsess-black">
<AffiliatedGroups />
</Section>
<!-- 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>
<h1>FAQs</h1>
@@ -99,4 +104,4 @@
</div>
</div>
</div>
</Section>
</Section> -->