Migrate design system from ethereal/cool to warm/craft/guild theme
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens. Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components, layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
parent
d588c49946
commit
a62e167876
39 changed files with 1300 additions and 2087 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-ghost-900">
|
||||
<div class="min-h-screen bg-guild-900">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-ghost-900 relative">
|
||||
<div class="min-h-screen bg-guild-900 relative">
|
||||
<!-- Background image at top - full page width -->
|
||||
<div
|
||||
class="absolute inset-x-0 pointer-events-none z-0"
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
|
||||
<!-- Mobile Header -->
|
||||
<div
|
||||
class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-ghost-900/95 backdrop-blur-md border-b border-ghost-700"
|
||||
class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-guild-900/95 backdrop-blur-md border-b border-guild-700"
|
||||
>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="text-lg font-bold text-white ethereal-text tracking-wider"
|
||||
class="text-lg font-bold text-white warm-text tracking-wider"
|
||||
>
|
||||
Ghost Guild
|
||||
</NuxtLink>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<!-- Container to center content and sidebar together -->
|
||||
<div class="lg:flex lg:justify-center lg:gap-0">
|
||||
<!-- Main Content Column -->
|
||||
<div class="lg:w-[800px] overflow-y-auto relative z-[5]">
|
||||
<div class="lg:w-[800px] overflow-y-auto relative z-[5] guild-interior">
|
||||
<div class="relative">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
131
app/layouts/landing.vue
Normal file
131
app/layouts/landing.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-guild-900">
|
||||
<!-- Horizontal Navigation -->
|
||||
<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">
|
||||
Ghost Guild
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Desktop Navigation Links -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<NuxtLink
|
||||
to="/about"
|
||||
class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
|
||||
>
|
||||
About
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/events"
|
||||
class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
|
||||
>
|
||||
Events
|
||||
</NuxtLink>
|
||||
<template v-if="isAuthenticated">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
|
||||
>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
@click="openLoginModal"
|
||||
class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<UButton
|
||||
icon="i-lucide-menu"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="md"
|
||||
class="md:hidden"
|
||||
@click="isMobileMenuOpen = true"
|
||||
aria-label="Open menu"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-guild-800 py-8 px-6 md:px-8">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-guild-500 text-sm">
|
||||
© {{ currentYear }} Ghost Guild
|
||||
</p>
|
||||
<a
|
||||
href="mailto:hello@ghostguild.org"
|
||||
class="text-guild-500 hover:text-guild-300 transition-colors text-sm"
|
||||
>
|
||||
hello@ghostguild.org
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Mobile Navigation Drawer -->
|
||||
<USlideover v-model:open="isMobileMenuOpen" side="right">
|
||||
<template #body>
|
||||
<div class="p-6 space-y-6">
|
||||
<NuxtLink
|
||||
to="/about"
|
||||
class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
About
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/events"
|
||||
class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
Events
|
||||
</NuxtLink>
|
||||
<template v-if="isAuthenticated">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
@click="handleMobileSignIn"
|
||||
class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<!-- Login Modal -->
|
||||
<LoginModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { isAuthenticated } = useAuth()
|
||||
const { openLoginModal } = useLoginModal()
|
||||
|
||||
const isMobileMenuOpen = ref(false)
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
const handleMobileSignIn = () => {
|
||||
isMobileMenuOpen.value = false
|
||||
openLoginModal()
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue