ghostguild-org/app/layouts/default.vue

35 lines
993 B
Vue

<template>
<div class="min-h-screen bg-stone-800 flex relative">
<!-- Background image at top - full page width -->
<div
class="absolute inset-x-0 pointer-events-none z-0"
style="
background-image: url(&quot;/background-dither.png&quot;);
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%
);
"
/>
<!-- Main Content Column - Left -->
<div class="flex-1 overflow-y-auto relative z-[5]">
<div class="p-8 md:p-12 lg:p-16 max-w-4xl relative">
<slot />
</div>
<AppFooter />
</div>
<!-- Navigation Column - Right -->
<AppNavigation class="relative z-20" />
</div>
</template>