Gradient look on all pages

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

View File

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

View File

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

View File

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

View File

@@ -45,14 +45,14 @@
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">
<p class="page-title">Meet the council!</p>
<img
src={data.councilGoofyPic.url}
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
/>
</div>

View File

@@ -1,12 +1,12 @@
<script lang="ts">
import type { EventPost } from '$lib/schemas';
import { Tabs } from '@skeletonlabs/skeleton-svelte';
import Section from 'components/layout/Section.svelte';
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
let { data } = $props();
import EventTabControl from 'components/event/EventTabControl.svelte';
import { Tabs } from '@skeletonlabs/skeleton-svelte';
import EventTabPanel from 'components/event/EventTabPanel.svelte';
import type { EventPost } from '$lib/schemas';
let { data } = $props();
let events: EventPost[] = data.events ?? [];
let group = $state('allEvents');
@@ -18,7 +18,7 @@
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>
<Tabs
value={group}

View File

@@ -12,7 +12,7 @@
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>Come back around March for application period!</p>

View File

@@ -6,7 +6,7 @@
<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>
<hr class="border-2 w-1/2">
<div>

View File

@@ -11,16 +11,12 @@
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>
<div class="grid gap-4">
{#each data.resources as re}
<ResourceCard
title={re.title}
link={re.url}
description={re.description}
/>
<ResourceCard title={re.title} link={re.url} description={re.description} />
{/each}
</div>
</Section>