Design and UI tweaks
This commit is contained in:
parent
53f81b3605
commit
d5c91dd66b
4 changed files with 424 additions and 61 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 — 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
|
||||
— 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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue