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

Design and UI tweaks
Some checks failed
Test / vitest (push) Successful in 12m28s
Details
Test / playwright (push) Failing after 12m9s
Details
Test / Notify on failure (push) Successful in 2s
Details

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-05-25 13:28:54 +01:00
parent 53f81b3605
commit d5c91dd66b
4 changed files with 424 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

108
app/pages/index.vue
View file

@ -2,7 +2,7 @@
<div>
<!-- HERO -->
<div class="hero">
<h1>Ghost Guild is where game developers explore cooperative models.</h1>
<h1>Ghost Guild is where game developers explore <span class="accent">cooperative</span> models.</h1>
<p>
Resources, events, and a community of people figuring it out. Three
circles, pay what you can.
@ -208,51 +208,68 @@ const formatDate = (event) => {
<style scoped>
/* ---- HERO ---- */
.hero {
padding: 48px 32px;
padding: clamp(64px, 10vw, 144px) clamp(28px, 5vw, 72px) clamp(48px, 7vw, 104px);
border-bottom: 1px dashed var(--border);
}
.hero h1 {
font-family: "Brygada 1918", serif;
font-size: 36px;
font-size: clamp(40px, 6.5vw, 80px);
font-weight: 600;
color: var(--text-bright);
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: 16px;
max-width: 540px;
line-height: 1.04;
letter-spacing: -0.022em;
margin-bottom: clamp(20px, 2.4vw, 36px);
max-width: 16ch;
}
.hero h1 .accent {
color: var(--candle);
}
.hero p {
color: var(--text-dim);
max-width: 460px;
max-width: 48ch;
font-size: clamp(13px, 1.3vw, 16px);
line-height: 1.7;
margin-bottom: 20px;
margin-bottom: clamp(28px, 3vw, 44px);
}
.hero-links {
display: flex;
gap: 16px;
font-size: 13px;
}
.hero-link {
color: var(--candle);
padding: 6px 16px;
border: 1px dashed var(--candle-faint);
transition: all 0.2s;
text-decoration: none;
}
.hero-link:hover {
border-color: var(--candle);
border-style: solid;
text-decoration: none;
align-items: center;
flex-wrap: wrap;
gap: clamp(16px, 2vw, 28px);
font-size: 14px;
}
/* Primary CTA reads as a solid block; secondary actions recede to quiet links. */
.hero-link.primary {
background: var(--candle);
color: var(--bg);
border-color: var(--candle);
border-style: solid;
padding: 13px 30px;
border: 1px solid var(--candle);
letter-spacing: 0.02em;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
text-decoration: none;
}
.hero-link.primary:hover {
background: var(--candle-dim);
border-color: var(--candle-dim);
transform: translateY(-2px);
text-decoration: none;
}
.hero-link:not(.primary) {
color: var(--candle);
padding: 4px 0;
border-bottom: 1px dashed var(--candle-faint);
transition: border-color 0.2s, color 0.2s;
text-decoration: none;
}
.hero-link:not(.primary):hover {
color: var(--candle-dim);
border-color: var(--candle);
text-decoration: none;
}
/* Keyboard focus echoes the design system's dashed-candle indicator (see .btn). */
.hero-link:focus-visible {
outline: 2px dashed var(--candle);
outline-offset: 3px;
}
/* ---- CONTENT GRID ---- */
@ -266,40 +283,41 @@ const formatDate = (event) => {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-block {
padding: 24px 28px;
padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.2vw, 36px);
border-right: 1px dashed var(--border);
min-width: 0;
overflow-wrap: break-word;
align-self: stretch;
}
.content-row.two-col .content-block {
padding: 24px 0;
padding: clamp(24px, 2.6vw, 40px) 0;
}
.content-row.two-col .block-inset {
padding-left: 28px;
padding-right: 28px;
padding-left: clamp(24px, 2.2vw, 36px);
padding-right: clamp(24px, 2.2vw, 36px);
}
.content-block:last-child {
border-right: none;
}
.content-block h2 {
font-family: "Brygada 1918", serif;
font-size: 18px;
font-size: clamp(19px, 1.9vw, 26px);
font-weight: 500;
line-height: 1.15;
color: var(--text-bright);
margin-bottom: 8px;
margin-bottom: 10px;
}
.content-block p {
color: var(--text-dim);
font-size: 12px;
line-height: 1.65;
font-size: 13px;
line-height: 1.7;
}
.content-block .label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 8px;
margin-bottom: 10px;
}
/* ---- EVENT LIST ---- */
@ -316,10 +334,10 @@ const formatDate = (event) => {
align-items: baseline;
padding-top: 10px;
padding-bottom: 10px;
transition: padding-left 0.2s;
transition: transform 0.2s;
}
.content-row.two-col .event-item:hover .event-item-inner {
padding-left: calc(28px + 4px);
transform: translateX(4px);
}
.event-date {
color: var(--text-faint);
@ -382,5 +400,23 @@ const formatDate = (event) => {
.hero-link {
text-align: center;
}
/* Comfortable tap targets; tight dashed underline replaces the bottom border. */
.hero-link:not(.primary) {
padding: 11px 0;
border-bottom: none;
text-decoration: underline dashed var(--candle-faint);
text-underline-offset: 3px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-link.primary,
.event-item-inner {
transition: none;
}
.hero-link.primary:hover,
.content-row.two-col .event-item:hover .event-item-inner {
transform: none;
}
}
</style>

29
app/pages/join.vue
View file

@ -3,7 +3,7 @@
<!-- Already a member -->
<template v-if="isAuthenticated">
<div class="full-section">
<h2>You're already a member</h2>
<h1>You're already a member</h1>
<p class="section-intro">
Welcome back, {{ memberData?.name || "member" }}. You're part of Ghost
Guild in the
@ -75,7 +75,7 @@
<div class="join-grid">
<div class="join-main">
<div class="join-main-inner">
<div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
<div v-if="errorMessage" class="error-box" role="alert">{{ errorMessage }}</div>
<form @submit.prevent="handleSubmit">
<!-- About you -->
@ -93,10 +93,12 @@
class="form-input"
type="text"
required
:aria-invalid="!!fieldErrors.name"
aria-describedby="join-name-error"
@blur="validateName"
@input="fieldErrors.name && (fieldErrors.name = '')"
>
<p v-if="fieldErrors.name" class="field-error">
<p v-if="fieldErrors.name" id="join-name-error" class="field-error">
{{ fieldErrors.name }}
</p>
</div>
@ -109,10 +111,12 @@
type="email"
placeholder="you@example.com"
required
:aria-invalid="!!fieldErrors.email"
aria-describedby="join-email-error"
@blur="validateEmail"
@input="fieldErrors.email && (fieldErrors.email = '')"
>
<p v-if="fieldErrors.email" class="field-error">
<p v-if="fieldErrors.email" id="join-email-error" class="field-error">
{{ fieldErrors.email }}
</p>
</div>
@ -132,6 +136,7 @@
type="button"
data-testid="cadence-monthly"
:class="{ active: cadence === 'monthly' }"
:aria-pressed="cadence === 'monthly'"
@click="onCadenceChange('monthly')"
>
Monthly
@ -140,6 +145,7 @@
type="button"
data-testid="cadence-annual"
:class="{ active: cadence === 'annual' }"
:aria-pressed="cadence === 'annual'"
@click="onCadenceChange('annual')"
>
Annual
@ -147,13 +153,14 @@
</div>
</div>
<p class="form-block-intro">
Equal access for everyone. Pick what fits &mdash; these aren't
Equal access for everyone. Pick what fits. These aren't
tiers.
</p>
<ul
class="pwyc-list"
aria-label="Contribution amount"
role="radiogroup"
>
<li
v-for="preset in presetRows"
@ -246,8 +253,8 @@
you set up tax receipts after you join.
</li>
<li>
<strong>Secure payment.</strong> Card entry handled by Helcim
&mdash; we never see your card details.
<strong>Secure payment.</strong> Card entry handled by Helcim;
we never see your card details.
</li>
<li>
<strong>Change anytime.</strong> Adjust your contribution or
@ -707,7 +714,7 @@ onUnmounted(() => {
.cadence-toggle button {
background: transparent;
border: none;
padding: 5px 12px;
padding: 7px 12px;
font-family: "Commit Mono", monospace;
font-size: 10px;
color: var(--text-faint);
@ -883,7 +890,7 @@ onUnmounted(() => {
border: 1px solid var(--parch);
padding: 12px 24px;
cursor: pointer;
transition: all 0.15s;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.submit-btn:hover {
@ -938,7 +945,7 @@ onUnmounted(() => {
padding: 32px;
border-bottom: 1px dashed var(--border);
}
.full-section h2 {
.full-section h1 {
font-family: "Brygada 1918", serif;
font-size: 20px;
font-weight: 500;
@ -982,7 +989,7 @@ onUnmounted(() => {
border: 1px solid var(--parch);
padding: 12px 28px;
cursor: pointer;
transition: all 0.2s;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
text-decoration: none;
text-align: center;
}