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

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -129,10 +129,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-guild-100">
<div class="text-2xl font-display font-bold text-guild-100">
{{ event.start.getDate() }}
</div>
<div class="text-xs text-guild-400 uppercase">
<div class="text-ui-label text-guild-400">
{{
event.start.toLocaleDateString("en-US", {
month: "short",
@ -151,7 +151,7 @@
<Icon
v-if="event.membersOnly"
name="heroicons:lock-closed"
class="w-4 h-4 text-purple-500 flex-shrink-0 mt-1"
class="w-4 h-4 text-candlelight-500 flex-shrink-0 mt-1"
/>
</div>
@ -229,7 +229,7 @@
<!-- Event Series -->
<div v-if="activeSeries.length > 0" class="text-center my-12">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
<h2 class="text-display font-bold text-guild-100 mb-8">
Current Event Series
</h2>
</div>
@ -261,10 +261,10 @@
:class="[
'series-list-item__status inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
series.status === 'active'
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
? 'bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400'
: series.status === 'upcoming'
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',
? 'bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300'
: 'bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400',
]"
>
{{ series.status }}
@ -326,7 +326,7 @@
<section class="py-20 bg-guild-800 dark:bg-guild-900">
<UContainer>
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
<h2 class="text-display font-bold text-guild-100 mb-8">
Attend Our Events
</h2>
</div>
@ -613,18 +613,18 @@ const formatSeriesType = (type) => {
const getSeriesTypeBadgeClass = (type) => {
const classes = {
workshop_series:
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
"bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
recurring_meetup:
"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
"bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300",
multi_day:
"bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
"bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
course:
"bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
tournament: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
"bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
tournament: "bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
};
return (
classes[type] ||
"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
"bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400"
);
};
</script>
@ -661,27 +661,27 @@ const getSeriesTypeBadgeClass = (type) => {
}
.guild-calendar :deep(.vuecal__event.event-community) {
background-color: #2563eb;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #1d4ed8;
border-color: var(--color-guild-500);
}
.guild-calendar :deep(.vuecal__event.event-workshop) {
background-color: #059669;
background-color: var(--color-candlelight-500);
color: #f5f5f4;
border-color: #047857;
border-color: var(--color-candlelight-600);
}
.guild-calendar :deep(.vuecal__event.event-social) {
background-color: #7c3aed;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #6d28d9;
border-color: var(--color-guild-500);
}
.guild-calendar :deep(.vuecal__event.event-showcase) {
background-color: #d97706;
background-color: var(--color-ember-400);
color: #f5f5f4;
border-color: #b45309;
border-color: var(--color-ember-500);
}
#event-calendar {
@ -698,9 +698,9 @@ const getSeriesTypeBadgeClass = (type) => {
.month-view .vuecal__cell--today,
.vuecal__cell--today {
background-color: rgba(59, 130, 246, 0.15);
background-color: rgba(184, 135, 58, 0.15);
color: #f5f5f4;
border: 2px solid #3b82f6 !important;
border: 2px solid var(--color-candlelight-500) !important;
.day-of-month {
display: flex;
@ -714,7 +714,7 @@ const getSeriesTypeBadgeClass = (type) => {
font-size: 0.75rem;
margin-right: 0.5rem;
display: none;
color: #3b82f6;
color: var(--color-candlelight-500);
font-weight: 600;
}
@ -775,27 +775,27 @@ const getSeriesTypeBadgeClass = (type) => {
}
&.event-community {
background-color: #2563eb;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #1d4ed8;
border-color: var(--color-guild-500);
}
&.event-workshop {
background-color: #059669;
background-color: var(--color-candlelight-500);
color: #f5f5f4;
border-color: #047857;
border-color: var(--color-candlelight-600);
}
&.event-social {
background-color: #7c3aed;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #6d28d9;
border-color: var(--color-guild-500);
}
&.event-showcase {
background-color: #d97706;
background-color: var(--color-ember-400);
color: #f5f5f4;
border-color: #b45309;
border-color: var(--color-ember-500);
}
}
@ -882,8 +882,8 @@ const getSeriesTypeBadgeClass = (type) => {
}
.guild-calendar :deep(.vuecal__cell--today) {
background-color: rgba(59, 130, 246, 0.1);
border: 2px solid #3b82f6;
background-color: rgba(184, 135, 58, 0.1);
border: 2px solid var(--color-candlelight-500);
}
.guild-calendar :deep(.vuecal__cell--out-of-scope) {