Jennie Robinson Faber
a62e167876
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.
71 lines
2 KiB
Vue
71 lines
2 KiB
Vue
<template>
|
|
<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"
|
|
style="
|
|
background-image: url("/background-dither.png");
|
|
background-size: 100% auto;
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
"
|
|
/>
|
|
|
|
<!-- Mobile Header -->
|
|
<div
|
|
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 warm-text tracking-wider"
|
|
>
|
|
Ghost Guild
|
|
</NuxtLink>
|
|
<UButton
|
|
icon="i-lucide-menu"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="lg"
|
|
@click="isMobileMenuOpen = true"
|
|
aria-label="Open menu"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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] guild-interior">
|
|
<div class="relative">
|
|
<slot />
|
|
</div>
|
|
<AppFooter />
|
|
</div>
|
|
|
|
<!-- Desktop Navigation Column -->
|
|
<AppNavigation class="hidden lg:block relative z-20" />
|
|
</div>
|
|
|
|
<!-- Mobile Navigation Drawer -->
|
|
<USlideover v-model:open="isMobileMenuOpen" side="right">
|
|
<template #body>
|
|
<AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
|
|
</template>
|
|
</USlideover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const isMobileMenuOpen = ref(false);
|
|
</script>
|