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

105
app/assets/css/main.css
View file

@ -15,6 +15,7 @@
:root {
--bg: #f4efe4;
--input-bg: #faf8f2;
--surface: #e8dfc8;
--surface-hover: #e0d6bc;
--border: #b8a880;
@ -36,10 +37,12 @@
--c-practitioner: #2a4650;
--green: #4a6a38;
--green-bg: rgba(74, 106, 56, 0.08);
--ember-bg: rgba(138, 68, 32, 0.1);
}
.dark {
--bg: #131210;
--input-bg: #1c1a17;
--surface: #1a1815;
--surface-hover: #252220;
--border: #2a2520;
@ -59,16 +62,17 @@
--c-community: #a06850;
--c-founder: #c06030;
--c-practitioner: #4a7080;
--ember-bg: rgba(192, 96, 48, 0.14);
}
/* ---- TAILWIND @THEME MAPPING ---- */
@theme {
--font-sans: 'Commit Mono', monospace;
--font-body: 'Commit Mono', monospace;
--font-mono: 'Commit Mono', monospace;
--font-display: 'Brygada 1918', serif;
--font-serif: 'Brygada 1918', serif;
--font-sans: "Commit Mono", monospace;
--font-body: "Commit Mono", monospace;
--font-mono: "Commit Mono", monospace;
--font-display: "Brygada 1918", serif;
--font-serif: "Brygada 1918", serif;
/* Map primary to candle for Nuxt UI components */
--color-primary-500: var(--candle);
@ -81,14 +85,30 @@
body {
background: var(--bg);
color: var(--text);
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 13px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--candle); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---- NOISE TEXTURE OVERLAY ---- */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background: url("~/assets/images/noise.webp") repeat;
opacity: 0.025;
}
a {
color: var(--candle);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ---- SECTION LABELS ---- */
.section-label {
@ -108,14 +128,26 @@ a:hover { text-decoration: underline; }
padding: 2px 8px;
border: 1px dashed;
}
.badge.community { color: var(--c-community); border-color: rgba(122, 72, 56, 0.35); }
.badge.founder { color: var(--c-founder); border-color: rgba(138, 68, 32, 0.35); }
.badge.practitioner { color: var(--c-practitioner); border-color: rgba(42, 70, 80, 0.35); }
.badge.all { color: var(--text-dim); border-color: var(--border); }
.badge.community {
color: var(--c-community);
border-color: rgba(122, 72, 56, 0.35);
}
.badge.founder {
color: var(--c-founder);
border-color: rgba(138, 68, 32, 0.35);
}
.badge.practitioner {
color: var(--c-practitioner);
border-color: rgba(42, 70, 80, 0.35);
}
.badge.all {
color: var(--text-dim);
border-color: var(--border);
}
/* ---- BUTTONS ---- */
.btn {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 12px;
padding: 7px 18px;
border: 1px dashed var(--border);
@ -125,14 +157,20 @@ a:hover { text-decoration: underline; }
letter-spacing: 0.04em;
transition: all 0.15s;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-d); }
.btn:hover {
background: var(--surface-hover);
border-color: var(--border-d);
}
.btn-primary {
background: var(--candle);
color: var(--bg);
border-color: var(--candle);
border-style: solid;
}
.btn-primary:hover { background: var(--candle-dim); border-color: var(--candle-dim); }
.btn-primary:hover {
background: var(--candle-dim);
border-color: var(--candle-dim);
}
.btn-danger {
color: var(--ember);
border-color: var(--ember);
@ -144,7 +182,9 @@ a:hover { text-decoration: underline; }
}
/* ---- FORM FIELDS ---- */
.field { margin-bottom: 12px; }
.field {
margin-bottom: 12px;
}
.field label {
font-size: 10px;
letter-spacing: 0.08em;
@ -153,17 +193,21 @@ a:hover { text-decoration: underline; }
margin-bottom: 3px;
display: block;
}
.field input, .field select, .field textarea {
.field input,
.field select,
.field textarea {
width: 100%;
padding: 5px 8px;
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 13px;
color: var(--text-bright);
background: var(--bg);
background: var(--input-bg);
border: 1px dashed var(--border);
outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--candle);
border-style: solid;
}
@ -174,8 +218,25 @@ a:hover { text-decoration: underline; }
padding: 20px 24px;
transition: border-color 0.2s;
}
.dashed-box:hover { border-color: var(--candle-faint); }
.dashed-box.no-hover:hover { border-color: var(--border); }
.dashed-box:hover {
border-color: var(--candle-faint);
}
.dashed-box.no-hover:hover {
border-color: var(--border);
}
/* ---- SEGMENTED CONTROL (flush dashed-border groups) ---- */
/* Negative-margin overlap: every item keeps all 4 borders,
siblings overlap by 1px, active item paints on top via z-index. */
.segmented {
display: flex;
}
.segmented > * {
position: relative;
}
.segmented > * + * {
margin-left: -1px;
}
/* ---- SECTION DIVIDERS ---- */
.section-divider {