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

Migrate design system from ethereal/cool to warm/craft/guild theme

Browse source 
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens.
Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components,
layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild
class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
Jennie Robinson Faber 2026-02-24 20:01:11 +00:00
parent d588c49946
commit a62e167876
39 changed files with 1300 additions and 2087 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,23 +1,23 @@
<template>
<div
v-if="pending"
class="min-h-screen bg-ghost-900 flex items-center justify-center"
class="min-h-screen bg-guild-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-ghost-200">Loading event details...</p>
<p class="text-guild-200">Loading event details...</p>
</div>
</div>
<div
v-else-if="error"
class="min-h-screen bg-ghost-900 flex items-center justify-center"
class="min-h-screen bg-guild-900 flex items-center justify-center"
>
<div class="text-center">
<h2 class="text-2xl font-bold text-ghost-100 mb-2">Event Not Found</h2>
<p class="text-ghost-300 mb-6">
<h2 class="text-2xl font-bold text-guild-100 mb-2">Event Not Found</h2>
<p class="text-guild-300 mb-6">
The event you're looking for doesn't exist.
</p>
<NuxtLink to="/events" class="text-blue-400 hover:underline">
@ -74,35 +74,35 @@
<PageHeader v-else :title="event.title" theme="blue" size="medium" />
<!-- Event Details Section -->
<section class="py-16 bg-ghost-900">
<section class="py-16 bg-guild-900">
<UContainer>
<div class="max-w-4xl mx-auto">
<!-- Event Meta Info -->
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div>
<p class="text-sm text-ghost-400">Date</p>
<p class="font-semibold text-ghost-100">
<p class="text-sm text-guild-400">Date</p>
<p class="font-semibold text-guild-100">
{{ formatDate(event.startDate) }}
</p>
</div>
<div>
<p class="text-sm text-ghost-400">Time</p>
<p class="font-semibold text-ghost-100">
<p class="text-sm text-guild-400">Time</p>
<p class="font-semibold text-guild-100">
{{ formatTime(event.startDate, event.endDate) }}
</p>
</div>
<div>
<p class="text-sm text-ghost-400">Location</p>
<p class="font-semibold text-ghost-100">
<p class="text-sm text-guild-400">Location</p>
<p class="font-semibold text-guild-100">
{{ event.location }}
</p>
</div>
<div>
<p class="text-sm text-ghost-400">Calendar</p>
<p class="text-sm text-guild-400">Calendar</p>
<UButton
:href="`/api/events/${route.params.id}/calendar`"
download
@ -150,7 +150,7 @@
>
<div class="flex items-center space-x-2">
<span
class="text-sm font-medium text-gray-800 dark:text-ghost-200"
class="text-sm font-medium text-gray-800 dark:text-guild-200"
>Recommended for:</span
>
<div class="flex flex-wrap gap-2">
@ -167,31 +167,31 @@
<!-- Event Description -->
<div class="prose prose-lg dark:prose-invert max-w-none mb-12">
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
<h2 class="text-2xl font-bold text-guild-100 mb-4">
About This Event
</h2>
<!-- Series Description -->
<div
v-if="event.series?.isSeriesEvent && event.series.description"
class="event-series-description mb-6 p-4 bg-ghost-800/30 dark:bg-ghost-700/20 rounded-lg border border-ghost-600 dark:border-ghost-600"
class="event-series-description mb-6 p-4 bg-guild-800/30 dark:bg-guild-700/20 rounded-lg border border-guild-600 dark:border-guild-600"
>
<h3
class="event-series-description__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
class="event-series-description__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
>
About the {{ event.series.title }} Series
</h3>
<p class="event-series-description__text text-ghost-200">
<p class="event-series-description__text text-guild-200">
{{ event.series.description }}
</p>
</div>
<p class="text-ghost-200">
<p class="text-guild-200">
{{ event.description }}
</p>
<div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
<h3 class="text-xl font-semibold text-guild-100 mb-4">
Event Agenda
</h3>
<ul class="space-y-3">
@ -205,7 +205,7 @@
>
{{ index + 1 }}
</span>
<span class="text-ghost-200">{{ item }}</span>
<span class="text-guild-200">{{ item }}</span>
</li>
</ul>
</div>
@ -214,7 +214,7 @@
v-if="event.speakers && event.speakers.length > 0"
class="mt-8"
>
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
<h3 class="text-xl font-semibold text-guild-100 mb-4">
Speakers
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -224,13 +224,13 @@
class="flex items-start space-x-4"
>
<div>
<p class="font-semibold text-ghost-100">
<p class="font-semibold text-guild-100">
{{ speaker.name }}
</p>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
{{ speaker.role }}
</p>
<p class="text-sm text-ghost-400 mt-1">
<p class="text-sm text-guild-400 mt-1">
{{ speaker.bio }}
</p>
</div>
@ -367,7 +367,7 @@
v-else-if="memberData && (!event.membersOnly || isMember)"
class="text-center"
>
<p class="text-lg text-ghost-200 mb-6">
<p class="text-lg text-guild-200 mb-6">
You are logged in, {{ memberData.name }}.
</p>
<UButton
@ -383,14 +383,14 @@
<!-- Not Logged In - Show Registration Form -->
<div v-else>
<h3 class="text-xl font-bold text-ghost-100 mb-6">
<h3 class="text-xl font-bold text-guild-100 mb-6">
Register for This Event
</h3>
<form @submit.prevent="handleRegistration" class="space-y-4">
<div>
<label
for="name"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Full Name
</label>
@ -406,7 +406,7 @@
<div>
<label
for="email"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Email Address
</label>
@ -422,7 +422,7 @@
<div>
<label
for="membershipLevel"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Membership Status
</label>
@ -452,17 +452,17 @@
<!-- Event Capacity -->
<div
v-if="event.maxAttendees"
class="mt-6 pt-6 border-t border-ghost-700"
class="mt-6 pt-6 border-t border-guild-700"
>
<div class="flex items-center justify-between">
<span class="text-sm text-ghost-300">Event Capacity</span>
<span class="text-sm text-guild-300">Event Capacity</span>
<div class="flex items-center space-x-2">
<span class="text-sm font-semibold text-ghost-100">
<span class="text-sm font-semibold text-guild-100">
{{ event.registeredCount || 0 }} /
{{ event.maxAttendees }}
</span>
<div
class="w-24 h-2 bg-ghost-700 rounded-full overflow-hidden"
class="w-24 h-2 bg-guild-700 rounded-full overflow-hidden"
>
<div
class="h-full bg-blue-500 rounded-full"
@ -476,7 +476,7 @@
<!-- Waitlist Section -->
<div
v-if="event.tickets?.waitlist?.enabled && isEventFull"
class="mt-6 pt-6 border-t border-ghost-700"
class="mt-6 pt-6 border-t border-guild-700"
>
<!-- Already on Waitlist -->
<div v-if="isOnWaitlist" class="text-center">
@ -534,9 +534,9 @@
</div>
<!-- Additional Information -->
<div class="mt-8 p-6 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">
<div class="mt-8 p-6 rounded-xl border border-guild-700">
<h4 class="font-semibold text-guild-100 mb-3">Questions?</h4>
<p class="text-sm text-guild-200 mb-3">
If you have any questions about this event please drop us a line.
</p>
<a