jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add light/dark mode support with CSS variables

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-10-06 19:54:20 +01:00
parent 970b185151
commit fb02688166
25 changed files with 1293 additions and 1177 deletions
Download patch file Download diff file Expand all files Collapse all files

72
app/pages/events/[id].vue
View file

@ -1,27 +1,27 @@
<template>
<div
v-if="pending"
class="min-h-screen bg-stone-900 flex items-center justify-center"
class="min-h-screen bg-ghost-900 flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"
></div>
<p class="text-stone-200">Loading event details...</p>
<p class="text-ghost-200">Loading event details...</p>
</div>
</div>
<div
v-else-if="error"
class="min-h-screen bg-stone-900 flex items-center justify-center"
class="min-h-screen bg-ghost-900 flex items-center justify-center"
>
<div class="text-center">
<Icon
name="heroicons:exclamation-triangle"
class="w-16 h-16 text-red-500 mx-auto mb-4"
/>
<h2 class="text-2xl font-bold text-stone-100 mb-2">Event Not Found</h2>
<p class="text-stone-300 mb-6">
<h2 class="text-2xl font-bold text-ghost-100 mb-2">Event Not Found</h2>
<p class="text-ghost-300 mb-6">
The event you're looking for doesn't exist.
</p>
<NuxtLink to="/events" class="text-blue-400 hover:underline">
@ -64,11 +64,11 @@
<PageHeader v-else :title="event.title" theme="blue" size="medium" />
<!-- Event Details Section -->
<section class="py-16 bg-stone-900">
<section class="py-16 bg-ghost-900">
<UContainer>
<div class="max-w-4xl mx-auto">
<!-- Event Meta Info -->
<div class="bg-stone-800 rounded-xl p-6 mb-8 border border-stone-700">
<div class="bg-ghost-800 rounded-xl p-6 mb-8 border border-ghost-700">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="flex items-center space-x-3">
<Icon
@ -76,8 +76,8 @@
class="w-6 h-6 text-blue-400"
/>
<div>
<p class="text-sm text-stone-400">Date</p>
<p class="font-semibold text-stone-100">
<p class="text-sm text-ghost-400">Date</p>
<p class="font-semibold text-ghost-100">
{{ formatDate(event.startDate) }}
</p>
</div>
@ -86,8 +86,8 @@
<div class="flex items-center space-x-3">
<Icon name="heroicons:clock" class="w-6 h-6 text-blue-400" />
<div>
<p class="text-sm text-stone-400">Time</p>
<p class="font-semibold text-stone-100">
<p class="text-sm text-ghost-400">Time</p>
<p class="font-semibold text-ghost-100">
{{ formatTime(event.startDate, event.endDate) }}
</p>
</div>
@ -96,8 +96,8 @@
<div class="flex items-center space-x-3">
<Icon name="heroicons:map-pin" class="w-6 h-6 text-blue-400" />
<div>
<p class="text-sm text-stone-400">Location</p>
<p class="font-semibold text-stone-100">
<p class="text-sm text-ghost-400">Location</p>
<p class="font-semibold text-ghost-100">
{{ event.location }}
</p>
</div>
@ -153,7 +153,7 @@
>
<div class="flex items-center space-x-2">
<Icon name="heroicons:user-group" class="w-5 h-5 text-blue-400" />
<span class="text-sm font-medium text-stone-200"
<span class="text-sm font-medium text-ghost-200"
>Recommended for:</span
>
<div class="flex flex-wrap gap-2">
@ -170,15 +170,15 @@
<!-- Event Description -->
<div class="prose prose-lg dark:prose-invert max-w-none mb-12">
<h2 class="text-2xl font-bold text-stone-100 mb-4">
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
About This Event
</h2>
<p class="text-stone-200">
<p class="text-ghost-200">
{{ event.description }}
</p>
<div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
<h3 class="text-xl font-semibold text-stone-100 mb-4">
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
Event Agenda
</h3>
<ul class="space-y-3">
@ -192,7 +192,7 @@
>
{{ index + 1 }}
</span>
<span class="text-stone-200">{{ item }}</span>
<span class="text-ghost-200">{{ item }}</span>
</li>
</ul>
</div>
@ -201,7 +201,7 @@
v-if="event.speakers && event.speakers.length > 0"
class="mt-8"
>
<h3 class="text-xl font-semibold text-stone-100 mb-4">
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
Speakers
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -211,21 +211,21 @@
class="flex items-start space-x-4"
>
<div
class="w-16 h-16 bg-stone-700 rounded-full flex items-center justify-center"
class="w-16 h-16 bg-ghost-700 rounded-full flex items-center justify-center"
>
<Icon
name="heroicons:user"
class="w-8 h-8 text-stone-500"
class="w-8 h-8 text-ghost-500"
/>
</div>
<div>
<p class="font-semibold text-stone-100">
<p class="font-semibold text-ghost-100">
{{ speaker.name }}
</p>
<p class="text-sm text-stone-300">
<p class="text-sm text-ghost-300">
{{ speaker.role }}
</p>
<p class="text-sm text-stone-400 mt-1">
<p class="text-sm text-ghost-400 mt-1">
{{ speaker.bio }}
</p>
</div>
@ -237,9 +237,9 @@
<!-- Registration Section -->
<div
v-if="!event.isCancelled"
class="bg-stone-800 rounded-xl p-8 border border-stone-700"
class="bg-ghost-800 rounded-xl p-8 border border-ghost-700"
>
<h3 class="text-xl font-bold text-stone-100 mb-6">
<h3 class="text-xl font-bold text-ghost-100 mb-6">
Register for This Event
</h3>
@ -322,7 +322,7 @@
<div>
<label
for="name"
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Full Name
</label>
@ -338,7 +338,7 @@
<div>
<label
for="email"
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Email Address
</label>
@ -354,7 +354,7 @@
<div>
<label
for="membershipLevel"
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Membership Status
</label>
@ -388,16 +388,16 @@
<!-- Event Capacity -->
<div
v-if="event.maxAttendees"
class="mt-6 pt-6 border-t border-stone-700"
class="mt-6 pt-6 border-t border-ghost-700"
>
<div class="flex items-center justify-between">
<span class="text-sm text-stone-300">Event Capacity</span>
<span class="text-sm text-ghost-300">Event Capacity</span>
<div class="flex items-center space-x-2">
<span class="text-sm font-semibold text-stone-100">
<span class="text-sm font-semibold text-ghost-100">
{{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
</span>
<div
class="w-24 h-2 bg-stone-700 rounded-full overflow-hidden"
class="w-24 h-2 bg-ghost-700 rounded-full overflow-hidden"
>
<div
class="h-full bg-blue-500 rounded-full"
@ -410,9 +410,9 @@
</div>
<!-- Additional Information -->
<div class="mt-8 p-6 bg-stone-800 rounded-xl border border-stone-700">
<h4 class="font-semibold text-stone-100 mb-3">Questions?</h4>
<p class="text-sm text-stone-200 mb-3">
<div class="mt-8 p-6 bg-ghost-800 rounded-xl border border-ghost-700">
<h4 class="font-semibold text-ghost-100 mb-3">Questions?</h4>
<p class="text-sm text-ghost-200 mb-3">
If you have any questions about this event please drop us a line.
</p>
<a

64
app/pages/events/index.vue
View file

@ -8,7 +8,7 @@
/>
<!-- Events Section with Tabs -->
<section class="py-20 bg-stone-900 dark:bg-stone-950">
<section class="py-20 bg-ghost-900 dark:bg-ghost-950">
<UContainer>
<UTabs
v-model="activeTab"
@ -27,10 +27,10 @@
class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
>
<div class="flex-shrink-0 text-center">
<div class="text-2xl font-bold text-stone-100">
<div class="text-2xl font-bold text-ghost-100">
{{ event.start.getDate() }}
</div>
<div class="text-xs text-stone-400 uppercase">
<div class="text-xs text-ghost-400 uppercase">
{{
event.start.toLocaleDateString("en-US", {
month: "short",
@ -42,7 +42,7 @@
<div class="flex-1 min-w-0">
<div class="flex items-start gap-2 mb-1">
<h3
class="text-lg font-semibold text-stone-100 group-hover:text-blue-400 transition-colors"
class="text-lg font-semibold text-ghost-100 group-hover:text-blue-400 transition-colors"
>
{{ event.title }}
</h3>
@ -53,7 +53,7 @@
/>
</div>
<p class="text-sm text-stone-300 mb-2 line-clamp-2">
<p class="text-sm text-ghost-300 mb-2 line-clamp-2">
{{ event.content }}
</p>
@ -72,7 +72,7 @@
<Icon
name="heroicons:arrow-right"
class="w-5 h-5 text-stone-400 group-hover:text-blue-400 group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
class="w-5 h-5 text-ghost-400 group-hover:text-blue-400 group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
/>
</NuxtLink>
</div>
@ -83,10 +83,10 @@
<ClientOnly>
<div
v-if="pending"
class="min-h-[400px] bg-stone-700 rounded-xl flex items-center justify-center"
class="min-h-[400px] bg-ghost-700 rounded-xl flex items-center justify-center"
>
<div class="text-center">
<p class="text-stone-200">Loading events...</p>
<p class="text-ghost-200">Loading events...</p>
</div>
</div>
<VueCal
@ -110,13 +110,13 @@
/>
<template #fallback>
<div
class="min-h-[400px] bg-stone-700 rounded-xl flex items-center justify-center"
class="min-h-[400px] bg-ghost-700 rounded-xl flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"
></div>
<p class="text-stone-200">Loading calendar...</p>
<p class="text-ghost-200">Loading calendar...</p>
</div>
</div>
</template>
@ -130,14 +130,14 @@
<!-- Event Series -->
<section
v-if="activeSeries.length > 0"
class="py-20 bg-stone-800 dark:bg-stone-900"
class="py-20 bg-ghost-800 dark:bg-ghost-900"
>
<UContainer>
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-stone-100 mb-8">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
Active Event Series
</h2>
<p class="text-stone-300 max-w-2xl mx-auto">
<p class="text-ghost-300 max-w-2xl mx-auto">
Multi-part workshops and recurring events designed to deepen your
knowledge and build community connections.
</p>
@ -149,7 +149,7 @@
<div
v-for="series in activeSeries.slice(0, 6)"
:key="series.id"
class="bg-stone-900 rounded-xl p-6 shadow-lg border border-stone-700"
class="bg-ghost-900 rounded-xl p-6 shadow-lg border border-ghost-700"
>
<div class="flex items-start justify-between mb-4">
<div
@ -160,17 +160,17 @@
>
{{ formatSeriesType(series.type) }}
</div>
<div class="flex items-center gap-1 text-xs text-stone-400">
<div class="flex items-center gap-1 text-xs text-ghost-400">
<Icon name="heroicons:calendar-days" class="w-4 h-4" />
<span>{{ series.eventCount }} events</span>
</div>
</div>
<h3 class="text-lg font-semibold text-stone-100 mb-2">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
{{ series.title }}
</h3>
<p class="text-sm text-stone-300 mb-4 line-clamp-2">
<p class="text-sm text-ghost-300 mb-4 line-clamp-2">
{{ series.description }}
</p>
@ -186,22 +186,22 @@
>
{{ event.series?.position || "?" }}
</div>
<span class="text-stone-300 truncate">{{ event.title }}</span>
<span class="text-ghost-300 truncate">{{ event.title }}</span>
</div>
<span class="text-stone-400">
<span class="text-ghost-400">
{{ formatEventDate(event.startDate) }}
</span>
</div>
<div
v-if="series.events.length > 3"
class="text-xs text-stone-400 text-center pt-1"
class="text-xs text-ghost-400 text-center pt-1"
>
+{{ series.events.length - 3 }} more events
</div>
</div>
<div class="flex items-center justify-between text-sm">
<div class="text-stone-400">
<div class="text-ghost-400">
{{ formatDateRange(series.startDate, series.endDate) }}
</div>
<span
@ -223,20 +223,20 @@
</section>
<!-- Attend Our Events -->
<section class="py-20 bg-stone-800 dark:bg-stone-900">
<section class="py-20 bg-ghost-800 dark:bg-ghost-900">
<UContainer>
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-stone-100 mb-8">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
Attend Our Events
</h2>
</div>
<div class="max-w-4xl mx-auto">
<div
class="bg-stone-900 rounded-2xl p-8 border border-stone-700 mb-12"
class="bg-ghost-900 rounded-2xl p-8 border border-ghost-700 mb-12"
>
<div class="prose prose-lg dark:prose-invert max-w-none">
<p class="text-lg leading-relaxed text-stone-200 mb-6">
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
Our events are ,Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Quibusdam exercitationem delectus ab
voluptates aspernatur, quia deleniti aut maxime, veniam
@ -244,7 +244,7 @@
dolorum alias nulla!
</p>
<p class="text-lg leading-relaxed text-stone-200 mb-6">
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
@ -265,31 +265,31 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<h3 class="text-lg font-semibold text-stone-100 mb-2">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
Monthly Meetups
</h3>
<p class="text-sm text-stone-300">
<p class="text-sm text-ghost-300">
Casual knowledge sharing sessions
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-stone-100 mb-2">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
Workshops
</h3>
<p class="text-sm text-stone-300">
<p class="text-sm text-ghost-300">
Hands-on learning about cooperative and worker-centric business
models
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-stone-100 mb-2">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
Social Events
</h3>
<p class="text-sm text-stone-300">
<p class="text-sm text-ghost-300">
Game nights, socials, and more
</p>
</div>