35 lines
993 B
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("/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%
|
|
);
|
|
"
|
|
/>
|
|
|
|
<!-- 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>
|