Jennie Robinson Faber
896ad0336c
The changes involve a comprehensive interface redesign across multiple pages, including: - Updated peer support badge with shield design - Switched privacy toggle to use USwitch component - Added light/dark mode support throughout - Enhanced layout and spacing in default template - Added series details page with timeline view - Improved event cards and status indicators - Refreshed member profile styles for better readability - Introduced global cursor styling for interactive elements
71 lines
2 KiB
Vue
71 lines
2 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-ghost-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-ghost-900/95 backdrop-blur-md border-b border-ghost-700"
|
|
>
|
|
<div class="flex items-center justify-between p-4">
|
|
<NuxtLink
|
|
to="/"
|
|
class="text-lg font-bold text-white ethereal-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]">
|
|
<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>
|