Define vh CSS variable from viewport height

2022-08-29 14:21:06 +02:00
parent 5ed7142e9e
commit f0a7e9f38d
3 changed files with 8 additions and 3 deletions
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,6 +19,7 @@

    export let data: PageData

+    let innerHeight: number

    // Fonts to preload
    const fonts = [
@@ -58,8 +59,12 @@
        // Avoid FOUC
        document.body.style.opacity = '1'
    })
+
+    $: innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
 </script>

+<svelte:window bind:innerHeight />
+
 <svelte:head>
    {#each fonts as font}
        <link rel="preload" href="/fonts/{font}.woff2" as="font" type="font/woff2" crossorigin="anonymous">