75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { BreadcrumbItemType } from '@/types';
|
|
import { onMounted } from 'vue';
|
|
import Header from "@/components/Header.vue";
|
|
import {VApp} from "vuetify/components/VApp";
|
|
|
|
interface Props {
|
|
breadcrumbs?: BreadcrumbItemType[];
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
breadcrumbs: () => [],
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Header />
|
|
<slot />
|
|
</template>
|
|
|
|
<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);
|
|
}
|
|
|
|
/* Reset and Base Styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
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;
|
|
}
|
|
</style>
|