70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<template>
|
|
<lenis root>
|
|
<div :class="classes">
|
|
<slot />
|
|
</div>
|
|
</lenis>
|
|
</template>
|
|
|
|
<script setup>
|
|
import '@/styles/main.scss'
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import loadFonts from '@fuzzco/font-loader'
|
|
import { useWindowSize } from '@vueuse/core'
|
|
import Lenis from '@/components/Lenis.vue'
|
|
|
|
const { height } = useWindowSize()
|
|
|
|
const fontsLoading = ref(true)
|
|
|
|
const classes = computed(() => [
|
|
'container',
|
|
{ 'fonts-ready': !fontsLoading.value },
|
|
'theme-dark',
|
|
])
|
|
|
|
onMounted(async () => {
|
|
// Load fonts
|
|
loadFonts([
|
|
{
|
|
name: 'Leibniz Fraktur',
|
|
weights: [400],
|
|
},
|
|
{
|
|
name: 'Geist Mono',
|
|
weights: [400, 700],
|
|
},
|
|
])
|
|
.then(() => {
|
|
fontsLoading.value = false
|
|
})
|
|
.catch(() => {
|
|
fontsLoading.value = false
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
min-height: 100vh;
|
|
max-width: 100vw;
|
|
overflow-x: clip;
|
|
background: var(--theme-bg);
|
|
color: var(--theme-fg);
|
|
transition: opacity 1000ms;
|
|
|
|
&:not(.fonts-ready) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Page Transition Animation */
|
|
#page-content {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
body.page-transition #page-content {
|
|
opacity: 0;
|
|
}
|
|
</style>
|