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

Gradient look on all pages

Browse Source
This commit is contained in:
Antoine Phan
2025-10-20 19:52:46 -04:00
parent 15fcd1cd50
commit 3536a186ca
8 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@@ -1,10 +1,10 @@
<!doctype html> <!doctype html>
<html lang="en" class="dark"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark" /> <meta name="color-scheme" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

8
src/components/event/EventTabPanel.svelte
View File

@@ -78,8 +78,8 @@
{#if upcomingEvents.length > 0} {#if upcomingEvents.length > 0}
<section> <section>
<div class="mb-6 flex items-center gap-3"> <div class="mb-6 flex items-center gap-3">
<div class="bg-ecsess-500 h-1 w-12 rounded-full"></div> <div class="bg-ecsess-200 h-1 w-16 rounded-full"></div>
<h2 class="text-ecsess-600 text-3xl font-bold">Upcoming Events</h2> <h2 class="text-ecsess-200 text-3xl font-bold">Upcoming Events</h2>
</div> </div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each upcomingEvents as e (e._id ?? e.name)} {#each upcomingEvents as e (e._id ?? e.name)}
@@ -103,8 +103,8 @@
{#if finishedEvents.length > 0} {#if finishedEvents.length > 0}
<section> <section>
<div class="mb-6 flex items-center gap-3"> <div class="mb-6 flex items-center gap-3">
<div class="h-1 w-12 rounded-full bg-gray-400"></div> <div class="bg-ecsess-400 h-1 w-16 rounded-full"></div>
<h2 class="text-3xl font-bold text-gray-700">Past Events</h2> <h2 class="text-ecsess-400 text-3xl font-bold">Past Events</h2>
</div> </div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each finishedEvents as e (e._id ?? e.name)} {#each finishedEvents as e (e._id ?? e.name)}

3
src/components/layout/Section.svelte
View File

@@ -9,6 +9,7 @@
children = () => 'Section placeholder', children = () => 'Section placeholder',
from = '', from = '',
to = '', to = '',
via = '',
direction = 'to-b', // to bottom direction = 'to-b', // to bottom
black = false black = false
} = $props(); } = $props();
@@ -21,7 +22,7 @@
$effect(() => { $effect(() => {
if (from && to) { if (from && to) {
tailwindClasses = `${base} bg-gradient-${direction} ${from} ${to}`; tailwindClasses = `${base} bg-gradient-${direction} ${from} ${to} ${via}`;
} else { } else {
tailwindClasses = base + (black ? ' bg-ecsess-black' : ' bg-ecsess-800'); tailwindClasses = base + (black ? ' bg-ecsess-black' : ' bg-ecsess-800');
} }

4
src/routes/council/+page.svelte
View File

@@ -45,14 +45,14 @@
canonical={data.canonical} canonical={data.canonical}
/> />
<Section> <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<p class="page-title">Meet the council!</p> <p class="page-title">Meet the council!</p>
<img <img
src={data.councilGoofyPic.url} src={data.councilGoofyPic.url}
alt="ECSESS Council, but we are goofy" alt="ECSESS Council, but we are goofy"
class="ring-ecsess-350 shadow-ecsess-black mb-8 rounded-md shadow-2xl ring-4 lg:w-[90%] hover:ring-ecsess-300 transition-all" class="ring-ecsess-350 shadow-ecsess-black hover:ring-ecsess-300 mb-8 rounded-md shadow-2xl ring-4 transition-all lg:w-[90%]"
transition:fly transition:fly
/> />
</div> </div>

10
src/routes/events/+page.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import type { EventPost } from '$lib/schemas';
import { Tabs } from '@skeletonlabs/skeleton-svelte';
import Section from 'components/layout/Section.svelte'; import Section from 'components/layout/Section.svelte';
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte'; import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
let { data } = $props();
import EventTabControl from 'components/event/EventTabControl.svelte'; import EventTabControl from 'components/event/EventTabControl.svelte';
import { Tabs } from '@skeletonlabs/skeleton-svelte';
import EventTabPanel from 'components/event/EventTabPanel.svelte'; import EventTabPanel from 'components/event/EventTabPanel.svelte';
import type { EventPost } from '$lib/schemas';
let { data } = $props();
let events: EventPost[] = data.events ?? []; let events: EventPost[] = data.events ?? [];
let group = $state('allEvents'); let group = $state('allEvents');
@@ -18,7 +18,7 @@
canonical={data.canonical} canonical={data.canonical}
/> />
<Section> <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-600" direction="to-b">
<p class="page-title">Events</p> <p class="page-title">Events</p>
<Tabs <Tabs
value={group} value={group}

2
src/routes/join/+page.svelte
View File

@@ -12,7 +12,7 @@
canonical={data.canonical} canonical={data.canonical}
/> />
<Section> <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
<p class="page-title">Want to join ECSESS Council?</p> <p class="page-title">Want to join ECSESS Council?</p>
<p>Come back around March for application period!</p> <p>Come back around March for application period!</p>

2
src/routes/r/[shortname]/+page.svelte
View File

@@ -6,7 +6,7 @@
<title> Hmm... you're not supposed to be here :/ </title> <title> Hmm... you're not supposed to be here :/ </title>
<Section> <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
<p class="page-title">Can't redirect you to <code>"r/{data.shortname}"</code>!</p> <p class="page-title">Can't redirect you to <code>"r/{data.shortname}"</code>!</p>
<hr class="border-2 w-1/2"> <hr class="border-2 w-1/2">
<div> <div>

8
src/routes/resources/+page.svelte
View File

@@ -11,16 +11,12 @@
canonical={data.canonical} canonical={data.canonical}
/> />
<Section> <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
<p class="page-title">Resources</p> <p class="page-title">Resources</p>
<div class="grid gap-4"> <div class="grid gap-4">
{#each data.resources as re} {#each data.resources as re}
<ResourceCard <ResourceCard title={re.title} link={re.url} description={re.description} />
title={re.title}
link={re.url}
description={re.description}
/>
{/each} {/each}
</div> </div>
</Section> </Section>