63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<lenis root :options="{ duration: 1 }">
|
|
<div :class="classes" :style="styles" id="container">
|
|
<layout />
|
|
</div>
|
|
</lenis>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import loadFonts from '@fuzzco/font-loader'
|
|
import { useWindowSize } from '@vueuse/core'
|
|
|
|
const { height } = useWindowSize()
|
|
|
|
const classes = computed(() => [
|
|
'container',
|
|
{ 'fonts-ready': !fontsLoading.value },
|
|
'theme-light',
|
|
])
|
|
|
|
const fontsLoading = ref(true)
|
|
onMounted(async () => {
|
|
// Load fonts
|
|
loadFonts([
|
|
{
|
|
name: 'Liberation Sans',
|
|
weights: [400],
|
|
styles: ['normal', 'italic'],
|
|
},
|
|
{
|
|
name: 'IBM Plex Mono',
|
|
weights: [400],
|
|
styles: ['normal', 'italic'],
|
|
},
|
|
])
|
|
.then(() => {
|
|
fontsLoading.value = false
|
|
})
|
|
.catch(() => {
|
|
fontsLoading.value = false
|
|
})
|
|
})
|
|
|
|
const styles = computed(() => ({
|
|
'--vh': height.value ? height.value / 100 + 'px' : '100vh',
|
|
}))
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
min-height: calc(100 * var(--vh));
|
|
max-width: 100vw;
|
|
overflow-x: clip;
|
|
background: var(--theme-bg);
|
|
color: var(--theme-fg);
|
|
transition: opacity 1000ms;
|
|
|
|
&:not(.fonts-ready) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|