Tests, UX improvements.
This commit is contained in:
parent
4e6f5d36b8
commit
0ae18f495e
63 changed files with 1384 additions and 2330 deletions
|
|
@ -31,103 +31,91 @@
|
|||
</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>
|
||||
<div class="circle-subtitle">"The open hall"</div>
|
||||
<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>
|
||||
<div class="circle-subtitle">"The workshop"</div>
|
||||
<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>
|
||||
<div class="circle-subtitle">"The alcove"</div>
|
||||
<p>
|
||||
For experienced practitioners. Mentoring, teaching, shaping the
|
||||
program direction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TWO-COL: CONTRIBUTION + COMMUNITY -->
|
||||
<div class="two-col-row">
|
||||
<div class="about-section">
|
||||
<div class="section-label">How Contribution Works</div>
|
||||
<SidebarLayout>
|
||||
<!-- 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>
|
||||
<div class="circle-subtitle">"The open hall"</div>
|
||||
<p>
|
||||
Membership is $0–50/month, pay what you can. Nobody is
|
||||
excluded for lack of funds. Your contribution supports
|
||||
infrastructure, events, and community resources.
|
||||
For anyone exploring cooperative models. Wiki access, public
|
||||
events, Slack community, monthly meetings.
|
||||
</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>
|
||||
<div id="founder" class="circle-cell">
|
||||
<h3 style="color: var(--c-founder)">Founder</h3>
|
||||
<div class="circle-subtitle">"The workshop"</div>
|
||||
<p>
|
||||
We gather in Slack, at monthly meetings, and through peer support
|
||||
sessions. The wiki is our shared knowledge base — growing as
|
||||
members contribute. Events range from workshops to social hangs to
|
||||
deep-dive series.
|
||||
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>
|
||||
<div class="circle-subtitle">"The alcove"</div>
|
||||
<p>
|
||||
For experienced practitioners. Mentoring, teaching, shaping the
|
||||
program direction.
|
||||
</p>
|
||||
<NuxtLink to="/join" class="cta">Join the Guild →</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 →</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EVENTS MINI SIDEBAR -->
|
||||
<EventsMiniSidebar :events="upcomingEvents" />
|
||||
</div>
|
||||
<!-- 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–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 — growing as
|
||||
members contribute. Events range from workshops to social hangs to
|
||||
deep-dive series.
|
||||
</p>
|
||||
<NuxtLink to="/join" class="cta">Join the Guild →</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 →</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { data: upcomingEvents } = await useFetch("/api/events", {
|
||||
query: { limit: 3, upcoming: true },
|
||||
default: () => [],
|
||||
});
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<style scoped>
|
||||
/* Flex chain from layout .main-body: hero + grid grow so sidebar column matches main height */
|
||||
|
|
@ -176,24 +164,6 @@ const { data: upcomingEvents } = await useFetch("/api/events", {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ---- CONTENT AREA ---- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
.content-main {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- SECTIONS ---- */
|
||||
.about-section {
|
||||
padding: 28px 32px;
|
||||
|
|
@ -283,9 +253,6 @@ const { data: upcomingEvents } = await useFetch("/api/events", {
|
|||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.content-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.circles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue