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

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

68
app/layouts/admin.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="min-h-screen bg-muted">
<div class="min-h-screen bg-guild-950">
<!-- Admin Navigation -->
<nav class="bg-elevated border-b border-default shadow-sm">
<nav class="bg-guild-900 border-b border-guild-700 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center gap-8">
<NuxtLink
to="/"
class="text-xl font-bold text-highlighted hover:text-primary"
class="text-xl font-bold font-serif warm-text text-guild-100 hover:text-candlelight-400"
>
Ghost Guild
</NuxtLink>
@ -18,8 +18,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path === '/admin'
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
<svg
@ -49,8 +49,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path.includes('/admin/members')
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
<svg
@ -74,8 +74,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path.includes('/admin/events')
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
<svg
@ -99,8 +99,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path.includes('/admin/series')
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400 shadow-sm'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
<svg
@ -129,10 +129,10 @@
v-click-outside="() => (showUserMenu = false)"
>
<button
class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted cursor-pointer transition-colors"
class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-guild-800 cursor-pointer transition-colors"
>
<div
class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center"
class="w-8 h-8 bg-candlelight-600 rounded-full flex items-center justify-center"
>
<svg
class="w-4 h-4 text-white"
@ -148,11 +148,11 @@
/>
</svg>
</div>
<span class="hidden md:block text-sm font-medium text-default"
<span class="hidden md:block text-sm font-medium text-guild-100"
>Admin</span
>
<svg
class="w-4 h-4 text-gray-400"
class="w-4 h-4 text-guild-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -169,14 +169,14 @@
<!-- User Menu Dropdown -->
<div
v-if="showUserMenu"
class="absolute right-0 mt-2 w-56 bg-elevated rounded-lg shadow-lg border border-default py-1 z-50"
class="absolute right-0 mt-2 w-56 bg-guild-800 rounded-lg shadow-lg border border-guild-700 py-1 z-50"
>
<NuxtLink
to="/"
class="flex items-center px-4 py-2 text-sm text-default hover:bg-muted"
class="flex items-center px-4 py-2 text-sm text-guild-100 hover:bg-guild-700"
>
<svg
class="w-4 h-4 mr-3 text-gray-400"
class="w-4 h-4 mr-3 text-guild-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -198,10 +198,10 @@
</NuxtLink>
<NuxtLink
to="/admin/settings"
class="flex items-center px-4 py-2 text-sm text-default hover:bg-muted"
class="flex items-center px-4 py-2 text-sm text-guild-100 hover:bg-guild-700"
>
<svg
class="w-4 h-4 mr-3 text-gray-400"
class="w-4 h-4 mr-3 text-guild-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -221,13 +221,13 @@
</svg>
Settings
</NuxtLink>
<hr class="my-1 border-default" />
<hr class="my-1 border-guild-700" />
<button
@click="logout"
class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50"
class="flex items-center w-full px-4 py-2 text-sm text-ember-400 hover:bg-ember-900/20"
>
<svg
class="w-4 h-4 mr-3 text-red-500"
class="w-4 h-4 mr-3 text-ember-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -249,7 +249,7 @@
</nav>
<!-- Mobile Navigation -->
<div class="md:hidden bg-elevated border-b border-default">
<div class="md:hidden bg-guild-900 border-b border-guild-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 py-3 overflow-x-auto">
<NuxtLink
@ -257,8 +257,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path === '/admin'
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
Dashboard
@ -269,8 +269,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path.includes('/admin/members')
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
Members
@ -281,8 +281,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path.includes('/admin/events')
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
Events
@ -293,8 +293,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path.includes('/admin/series')
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
? 'bg-candlelight-900/30 text-candlelight-400'
: 'text-guild-400 hover:text-candlelight-400 hover:bg-candlelight-900/10',
]"
>
Series
@ -309,10 +309,10 @@
</main>
<!-- Footer -->
<footer class="bg-elevated border-t border-default mt-auto">
<footer class="bg-guild-900 border-t border-guild-700 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="py-8 text-center">
<p class="text-sm text-muted">
<p class="text-sm text-guild-400">
&copy; 2025 Ghost Guild. Admin Panel.
</p>
</div>

4
app/layouts/default.vue
View file

@ -4,7 +4,7 @@
<div
class="absolute inset-x-0 pointer-events-none z-0"
style="
background-image: url(&quot;/background-dither.png&quot;);
background-image: url(&quot;/background-dither.webp&quot;);
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
@ -28,7 +28,7 @@
<div class="flex items-center justify-between p-4">
<NuxtLink
to="/"
class="text-lg font-bold text-white warm-text tracking-wider"
class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wider"
>
Ghost Guild
</NuxtLink>

2
app/layouts/landing.vue
View file

@ -4,7 +4,7 @@
<nav class="w-full px-6 md:px-8 py-4">
<div class="max-w-6xl mx-auto flex items-center justify-between">
<!-- Logo/Wordmark -->
<NuxtLink to="/" class="text-xl font-bold text-primary-400 tracking-wide">
<NuxtLink to="/" class="text-display-sm font-bold text-candlelight-400 warm-text tracking-wide">
Ghost Guild
</NuxtLink>