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

UI/UX tweaks and improvements.

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-05 12:28:41 +01:00
parent 4daec9b624
commit 418d3cc402
32 changed files with 2725 additions and 1201 deletions
Download patch file Download diff file Expand all files Collapse all files

147
app/pages/index.vue
View file

@ -2,10 +2,18 @@
<div>
<!-- HERO -->
<div class="hero">
<h1>Ghost Guild is where game developers practice cooperative business models.</h1>
<p>Resources, events, and a community of people figuring it out. Three circles, no hierarchy. $0–50/mo, pay what you can.</p>
<h1>
Ghost Guild is where game developers practice cooperative business
models.
</h1>
<p>
Resources, events, and a community of people figuring it out. Three
circles, no hierarchy. $0–50/mo, pay what you can.
</p>
<div class="hero-links">
<NuxtLink to="/join" class="hero-link primary">Become a member</NuxtLink>
<NuxtLink to="/join" class="hero-link primary"
>Become a member</NuxtLink
>
<NuxtLink to="/wiki" class="hero-link">Read the wiki</NuxtLink>
<NuxtLink to="/about" class="hero-link">What is this?</NuxtLink>
</div>
@ -13,8 +21,14 @@
<!-- THREE CIRCLES -->
<div class="content-row">
<div v-for="circle in circleData" :key="circle.value" class="content-block">
<div class="label" :style="{ color: `var(--c-${circle.value})` }">{{ circle.label }}</div>
<div
v-for="circle in circleData"
:key="circle.value"
class="content-block"
>
<div class="label" :style="{ color: `var(--c-${circle.value})` }">
{{ circle.label }}
</div>
<h2>{{ circle.metaphor }}</h2>
<p>{{ circle.blurb }}</p>
<details>
@ -33,9 +47,11 @@
<div v-if="events?.length" class="event-list">
<div v-for="event in events" :key="event._id" class="event-item">
<div class="block-inset event-item-inner">
<span class="event-date">{{ formatDate(event.date) }}</span>
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<span class="event-title">
<NuxtLink :to="`/events/${event._id}`">{{ event.title }}</NuxtLink>
<NuxtLink :to="`/events/${event._id}`">{{
event.title
}}</NuxtLink>
</span>
<CircleBadge v-if="event.circle" :circle="event.circle" />
</div>
@ -76,10 +92,23 @@
<!-- PARCHMENT INSET -->
<ParchmentInset>
<div class="label" style="color: var(--candle-faint); opacity: 0.6; margin-bottom: 12px;">From the Wiki</div>
<div
class="label"
style="color: var(--parch-text-dim); margin-bottom: 12px"
>
From the Wiki
</div>
<h2>What is a cooperative studio?</h2>
<p>A cooperative studio is a game development company owned and governed by the people who work there. Decisions are made collectively. Profits are shared according to contribution, not ownership stake.</p>
<p>The games industry is full of stories about crunch, layoffs, and studios that extract value from workers. Cooperatives are one alternative — not the only one, but one worth <a href="/wiki">practicing together</a>.</p>
<p>
A cooperative studio is a game development company owned and governed by
the people who work there. Decisions are made collectively. Profits are
shared according to contribution, not ownership stake.
</p>
<p>
The games industry is full of stories about crunch, layoffs, and studios
that extract value from workers. Cooperatives are one alternative — not
the only one, but one worth <a href="/wiki">practicing together</a>.
</p>
<p><a href="/wiki">Read more in the wiki &rarr;</a></p>
</ParchmentInset>
</div>
@ -88,42 +117,48 @@
<script setup>
definePageMeta({
layout: "default",
})
});
const { data: events } = await useFetch('/api/events', {
const { data: events } = await useFetch("/api/events", {
query: { limit: 4, upcoming: true },
default: () => [],
})
});
const circleData = [
{
value: 'community',
label: 'Community',
metaphor: 'The open hall',
blurb: 'Arrival, curiosity, orientation. For anyone exploring cooperative models in game development. Access the wiki, public events, and Slack.',
included: 'Wiki access, public events, Slack community, monthly guild meetings. Free or pay-what-you-can.',
value: "community",
label: "Community",
metaphor: "The open hall",
blurb:
"Arrival, curiosity, orientation. For anyone exploring cooperative models in game development. Access the wiki, public events, and Slack.",
included:
"Wiki access, public events, Slack community, monthly guild meetings. Free or pay-what-you-can.",
},
{
value: 'founder',
label: 'Founder',
metaphor: 'The workshop',
blurb: 'For people actively building cooperatives. Structured practice, peer support, templates, and hands-on resources.',
included: 'Everything in Community plus the peer accelerator, 1:1 mentorship matching, and Founder-only workshops.',
value: "founder",
label: "Founder",
metaphor: "The workshop",
blurb:
"For people actively building cooperatives. Structured practice, peer support, templates, and hands-on resources.",
included:
"Everything in Community plus the peer accelerator, 1:1 mentorship matching, and Founder-only workshops.",
},
{
value: 'practitioner',
label: 'Practitioner',
metaphor: 'The alcove',
blurb: 'Where experience is shared and knowledge given back. Teaching, advising, shaping the program itself.',
included: 'Everything in Founder plus the ability to mentor, propose events, contribute to the wiki, and help govern the Guild.',
value: "practitioner",
label: "Practitioner",
metaphor: "The alcove",
blurb:
"Where experience is shared and knowledge given back. Teaching, advising, shaping the program itself.",
included:
"Everything in Founder plus the ability to mentor, propose events, contribute to the wiki, and help govern the Guild.",
},
]
];
const formatDate = (dateStr) => {
if (!dateStr) return ''
const d = new Date(dateStr)
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}
if (!dateStr) return "";
const d = new Date(dateStr);
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
};
</script>
<style scoped>
@ -133,7 +168,7 @@ const formatDate = (dateStr) => {
border-bottom: 1px dashed var(--border);
}
.hero h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 36px;
font-weight: 600;
color: var(--text-bright);
@ -200,9 +235,11 @@ const formatDate = (dateStr) => {
padding-left: 28px;
padding-right: 28px;
}
.content-block:last-child { border-right: none; }
.content-block:last-child {
border-right: none;
}
.content-block h2 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
@ -232,10 +269,10 @@ details summary {
list-style: none;
}
details summary::before {
content: '+ ';
content: "+ ";
}
details[open] summary::before {
content: '− ';
content: "− ";
}
details p {
margin-top: 8px;
@ -250,7 +287,7 @@ details p {
}
.event-item-inner {
display: grid;
grid-template-columns: 80px 1fr auto;
grid-template-columns: 60px 1fr auto;
gap: 16px;
align-items: baseline;
padding-top: 10px;
@ -260,10 +297,21 @@ details p {
.content-row.two-col .event-item:hover .event-item-inner {
padding-left: calc(28px + 4px);
}
.event-date { color: var(--text-faint); font-size: 12px; }
.event-title { color: var(--text); font-size: 13px; }
.event-title a { color: var(--text); text-decoration: none; }
.event-title a:hover { color: var(--candle); }
.event-date {
color: var(--text-faint);
font-size: 12px;
}
.event-title {
color: var(--text);
font-size: 13px;
}
.event-title a {
color: var(--text);
text-decoration: none;
}
.event-title a:hover {
color: var(--candle);
}
/* ---- WIKI LIST ---- */
.wiki-item {
@ -277,8 +325,13 @@ details p {
padding-top: 8px;
padding-bottom: 8px;
}
.wiki-item a { color: var(--text); text-decoration: none; }
.wiki-item a:hover { color: var(--candle); }
.wiki-item a {
color: var(--text);
text-decoration: none;
}
.wiki-item a:hover {
color: var(--candle);
}
.empty {
color: var(--text-faint);
@ -295,7 +348,9 @@ details p {
border-right: none;
border-bottom: 1px dashed var(--border);
}
.content-block:last-child { border-bottom: none; }
.content-block:last-child {
border-bottom: none;
}
.hero-links {
flex-direction: column;
gap: 8px;