basic setup

pages/+Layout.vue

@@ -1,34 +1,61 @@
-<!-- https://vike.dev/Layout -->
-
 <template>
-    <div class="layout">
-        <slot />
-    </div>
+    <lenis root>
+        <div :class="classes" :style="styles">
+            <slot />
+        </div>
+    </lenis>
 </template>
 
-<script lang="ts" setup></script>
+<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'
 
-<style>
-body {
-    margin: 0;
-    font-family: sans-serif;
-}
-* {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-}
-</style>
+const { height } = useWindowSize()
 
-<style scoped>
-.layout {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    background: #131313;
-    color: #ebebeb;
+const fontsLoading = ref(true)
+
+const classes = computed(() => [
+    'container',
+    { 'fonts-ready': !fontsLoading.value },
+    'theme-dark',
+])
+
+onMounted(async () => {
+    // Load fonts
+    loadFonts([
+        {
+            name: 'Office Times',
+            weights: [400],
+        },
+    ])
+        .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;
+    }
 }
 
 /* Page Transition Animation */