another small fix

This commit is contained in:
Ludwig Lehnert 2025-06-13 09:48:30 +02:00
parent cbb1da50df
commit 0d4d348979
Signed by: ludwig
SSH Key Fingerprint: SHA256:4vshH9GJ8TLO1RS2fY6rDDLnq7+KVvSClCY+uEhYYRA
6 changed files with 25 additions and 5 deletions

View File

@ -62,3 +62,11 @@ body {
animation-timing-function: linear; animation-timing-function: linear;
animation-duration: 1s; animation-duration: 1s;
} }
.rh-screen {
height: calc(100 * var(--vh));
}
.min-rh-screen {
min-height: calc(100 * var(--vh));
}

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover" style="--vh: 1vh">
<div id="root" style="display: contents">%sveltekit.body%</div> <div id="root" style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

View File

@ -42,7 +42,7 @@
}; };
</script> </script>
<div class="h-screen p-4 flex flex-col items-center"> <div class="rh-screen p-4 flex flex-col items-center">
<div class="shrink-0"> <div class="shrink-0">
<input type="date" <input type="date"
class="px-4 py-2 rounded-full bg-white min-w-0" class="px-4 py-2 rounded-full bg-white min-w-0"

View File

@ -107,8 +107,8 @@
}; };
</script> </script>
<div class="min-h-screen"> <div class="min-rh-screen">
<div class="h-screen p-4 min-h-0 grid place-items-center"> <div class="rh-screen p-4 min-h-0 grid place-items-center">
<video <video
autoplay muted bind:this={video} autoplay muted bind:this={video}
class="opacity-0 h-full w-full min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030] fade-in" class="opacity-0 h-full w-full min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030] fade-in"

View File

@ -1,5 +1,15 @@
<script> <script>
import { onMount } from "svelte";
import "../app.css"; import "../app.css";
onMount(() => {
if (typeof window !== 'object') return;
document.body.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
window.addEventListener('resize', () => {
document.body.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
});
});
</script> </script>
<slot /> <slot />

View File

@ -11,7 +11,9 @@ const config = {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters. // See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter() adapter: adapter({
})
} }
}; };