156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { BreadcrumbItemType } from '@/types';
|
|
import { onMounted } from 'vue';
|
|
import Header from "@/components/Header.vue";
|
|
import Footer from "@/components/Footer.vue";
|
|
|
|
interface Props {
|
|
breadcrumbs?: BreadcrumbItemType[];
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
breadcrumbs: () => [],
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Header />
|
|
|
|
<transition name="fade" mode="out-in">
|
|
<main :key="$page.url">
|
|
<slot />
|
|
<Footer />
|
|
</main>
|
|
</transition>
|
|
</template>
|
|
<style scoped>
|
|
/* fade transition */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.5s ease; /* change 0.5s to slower/faster */
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.fade-enter-to,
|
|
.fade-leave-from {
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
|
|
:root {
|
|
/* Colors */
|
|
--primary: hsl(210, 100%, 50%);
|
|
--primary-glow: hsl(210, 100%, 70%);
|
|
--accent: hsl(30, 100%, 46%);
|
|
--background: hsl(222, 84%, 5%);
|
|
--foreground: hsl(210, 40%, 98%);
|
|
--card: hsl(222, 84%, 8%);
|
|
--card-foreground: hsl(210, 40%, 95%);
|
|
--muted: hsl(217, 32%, 17%);
|
|
--muted-foreground: hsl(215, 20%, 65%);
|
|
--border: hsl(217, 32%, 17%);
|
|
--destructive: hsl(0, 62%, 30%);
|
|
--destructive-foreground: hsl(210, 40%, 98%);
|
|
--secondary: hsl(217, 32%, 17%);
|
|
--secondary-foreground: hsl(210, 40%, 98%);
|
|
|
|
/* Gradients */
|
|
--gradient-adventure: linear-gradient(
|
|
135deg,
|
|
hsl(210, 100%, 50%) 0%,
|
|
white 49%,
|
|
white 50%,
|
|
hsl(30, 100%, 46%) 100%
|
|
);
|
|
--gradient-hero: linear-gradient(135deg, hsl(210 100% 15%), hsl(25 95% 25%));
|
|
--gradient-accent: linear-gradient(135deg, hsl(30, 100%, 46%), hsl(210, 100%, 50%));
|
|
|
|
/* Shadows */
|
|
--shadow-intense: 0 25px 50px -12px hsl(210, 100%, 50% );
|
|
--shadow-glow: 0 0 40px hsl(210, 100%, 70% );
|
|
|
|
/* Transitions */
|
|
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
|
|
.glass {
|
|
background-color: color-mix(in srgb, var(--card) 35%, transparent);
|
|
backdrop-filter: blur(5px);
|
|
-webkit-backdrop-filter: blur(5px); /* Safari */
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
|
|
/* Reset and Base Styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body{
|
|
scrollbar-width: none;
|
|
-ms-overflow-style:none;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Temporary debug styles */
|
|
/* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
|
|
html::-webkit-scrollbar,
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
html{
|
|
overflow:visible;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
display:flex;
|
|
flex-direction: column;
|
|
min-height: 100svh; /* ensure the page fills the viewport height */
|
|
}
|
|
html, body, #app {
|
|
min-height: 100svh; /* fill viewport */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
/* Make main fill remaining space and arrange its children vertically */
|
|
main{
|
|
display: flex; /* added */
|
|
flex-direction: column; /* keep */
|
|
flex: 1;
|
|
gap: 2em;/* keep */
|
|
}
|
|
|
|
/* Push the Footer (last child in main) to the bottom if content is short */
|
|
main > :last-child {
|
|
margin-top: auto;
|
|
}
|
|
</style>
|