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

158
app/pages/about.vue
View file

@ -4,67 +4,115 @@
<div class="about-hero">
<div class="about-hero-left">
<h1>About Ghost Guild</h1>
<p>A membership community for game developers exploring cooperative business models.</p>
<p>
A membership community for game developers exploring cooperative
business models.
</p>
</div>
<div class="about-hero-right">
<div class="section-label">Our Story</div>
<p>Ghost Guild grew out of Baby Ghosts, a Canadian nonprofit that's been supporting indie game developers since 2018. We noticed a gap: game developers interested in cooperative models had nowhere to learn, practice, and connect with others doing the same work.</p>
<p>Ghost Guild is the response &mdash; a membership program where developers at every stage of cooperative practice can find resources, events, mentorship, and community.</p>
<p>We don't prescribe a single model. We're a place to explore the options, learn from people who've tried them, and build something that works for your team.</p>
<p>
Ghost Guild grew out of Baby Ghosts, a Canadian nonprofit that's been
supporting indie game developers since 2018. We noticed a gap: game
developers interested in cooperative models had nowhere to learn,
practice, and connect with others doing the same work.
</p>
<p>
Ghost Guild is the response &mdash; a membership program where
developers at every stage of cooperative practice can find resources,
events, mentorship, and community.
</p>
<p>
We don't prescribe a single model. We're a place to explore the
options, learn from people who've tried them, and build something that
works for your team.
</p>
</div>
</div>
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
<div class="content-area">
<div class="content-main">
<!-- THE CIRCLES -->
<div class="about-section" id="circles">
<div class="section-label">The Circles</div>
<div class="circles-grid">
<div id="community" class="circle-cell">
<h3 style="color: var(--c-community);">Community</h3>
<h3 style="color: var(--c-community)">Community</h3>
<div class="circle-subtitle">"The open hall"</div>
<p>For anyone exploring cooperative models. Wiki access, public events, Slack community, monthly meetings.</p>
<p>
For anyone exploring cooperative models. Wiki access, public
events, Slack community, monthly meetings.
</p>
</div>
<div id="founder" class="circle-cell">
<h3 style="color: var(--c-founder);">Founder</h3>
<h3 style="color: var(--c-founder)">Founder</h3>
<div class="circle-subtitle">"The workshop"</div>
<p>For people actively building cooperatives. Peer accelerator, mentorship, governance templates.</p>
<p>
For people actively building cooperatives. Peer accelerator,
mentorship, governance templates.
</p>
</div>
<div id="practitioner" class="circle-cell">
<h3 style="color: var(--c-practitioner);">Practitioner</h3>
<h3 style="color: var(--c-practitioner)">Practitioner</h3>
<div class="circle-subtitle">"The alcove"</div>
<p>For experienced practitioners. Mentoring, teaching, shaping the program direction.</p>
<p>
For experienced practitioners. Mentoring, teaching, shaping the
program direction.
</p>
</div>
</div>
</div>
<!-- HOW CONTRIBUTION WORKS -->
<div class="about-section">
<div class="section-label">How Contribution Works</div>
<p>Membership is $0&ndash;50/month, pay what you can. Nobody is excluded for lack of funds. Your contribution supports infrastructure, events, and community resources.</p>
<ul class="tier-list">
<li><span class="tier-amt">$0</span> I need support right now</li>
<li><span class="tier-amt">$5</span> I can contribute</li>
<li><span class="tier-amt">$15</span> I can sustain the community</li>
<li><span class="tier-amt">$30</span> I can support others too</li>
<li><span class="tier-amt">$50</span> I want to sponsor multiple members</li>
</ul>
</div>
<!-- COMMUNITY -->
<div class="about-section">
<div class="section-label">Community</div>
<p>We gather in Slack, at monthly meetings, and through peer support sessions. The wiki is our shared knowledge base &mdash; growing as members contribute. Events range from workshops to social hangs to deep-dive series.</p>
<NuxtLink to="/join" class="cta">Join the Guild &rarr;</NuxtLink>
<!-- TWO-COL: CONTRIBUTION + COMMUNITY -->
<div class="two-col-row">
<div class="about-section">
<div class="section-label">How Contribution Works</div>
<p>
Membership is $0&ndash;50/month, pay what you can. Nobody is
excluded for lack of funds. Your contribution supports
infrastructure, events, and community resources.
</p>
<ul class="tier-list">
<li><span class="tier-amt">$0</span> I need support right now</li>
<li><span class="tier-amt">$5</span> I can contribute</li>
<li>
<span class="tier-amt">$15</span> I can sustain the community
</li>
<li>
<span class="tier-amt">$30</span> I can support others too
</li>
<li>
<span class="tier-amt">$50</span> I want to sponsor multiple
members
</li>
</ul>
</div>
<div class="about-section">
<div class="section-label">Community</div>
<p>
We gather in Slack, at monthly meetings, and through peer support
sessions. The wiki is our shared knowledge base &mdash; growing as
members contribute. Events range from workshops to social hangs to
deep-dive series.
</p>
<NuxtLink to="/join" class="cta">Join the Guild &rarr;</NuxtLink>
</div>
</div>
<!-- ABOUT BABY GHOSTS -->
<div class="about-section">
<div class="section-label">About Baby Ghosts</div>
<p>Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit advancing cooperative models in game development. No tracking. No ads. No venture capital.</p>
<p><a href="https://babyghosts.fund" target="_blank">babyghosts.fund &rarr;</a></p>
<p>
Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit
advancing cooperative models in game development. No tracking. No
ads. No venture capital.
</p>
<p>
<a href="https://babyghosts.fund" target="_blank"
>babyghosts.fund &rarr;</a
>
</p>
</div>
</div>
@ -75,10 +123,10 @@
</template>
<script setup>
const { data: upcomingEvents } = await useFetch('/api/events', {
const { data: upcomingEvents } = await useFetch("/api/events", {
query: { limit: 3, upcoming: true },
default: () => [],
})
});
</script>
<style scoped>
@ -104,7 +152,7 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
align-self: stretch;
}
.about-hero-left h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
@ -176,9 +224,11 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
padding: 20px;
border-right: 1px dashed var(--border);
}
.circle-cell:last-child { border-right: none; }
.circle-cell:last-child {
border-right: none;
}
.circle-cell h3 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
line-height: 1.2;
@ -196,6 +246,19 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
line-height: 1.65;
}
/* ---- TWO-COL ROW ---- */
.two-col-row {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px dashed var(--border);
}
.two-col-row .about-section {
border-bottom: none;
}
.two-col-row .about-section:first-child {
border-right: 1px dashed var(--border);
}
/* ---- TIER LIST ---- */
.tier-list {
list-style: none;
@ -209,7 +272,9 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
display: flex;
gap: 12px;
}
.tier-list li:last-child { border-bottom: none; }
.tier-list li:last-child {
border-bottom: none;
}
.tier-amt {
color: var(--text-bright);
font-weight: 600;
@ -218,13 +283,26 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
.content-area { grid-template-columns: 1fr; }
.circles-grid { grid-template-columns: 1fr; }
.content-area {
grid-template-columns: 1fr;
}
.circles-grid {
grid-template-columns: 1fr;
}
.circle-cell {
border-right: none;
border-bottom: 1px dashed var(--border);
}
.circle-cell:last-child { border-bottom: none; }
.circle-cell:last-child {
border-bottom: none;
}
.two-col-row {
grid-template-columns: 1fr;
}
.two-col-row .about-section:first-child {
border-right: none;
border-bottom: 1px dashed var(--border);
}
}
@media (max-width: 768px) {
.about-hero {