test-card/src/routes/+layout.svelte
Tomáš Mládek 8394c19c2c
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
wip nav
2024-02-19 00:36:00 +01:00

52 lines
1 KiB
Svelte

<script lang="ts">
import 'normalize.css/normalize.css';
import '@fontsource/b612';
import '@fontsource/b612/700.css';
import '../index.css';
import TestCard from '$lib/TestCard.svelte';
import { page } from '$app/stores';
import { onMount } from 'svelte';
let idleTimeout: NodeJS.Timeout | undefined;
onMount(() => {
window.addEventListener('mousemove', () => {
clearTimeout(idleTimeout);
document.body.classList.remove('idle');
idleTimeout = setTimeout(() => {
document.body.classList.add('idle');
}, 3000);
});
});
$: onlyCard = $page.url.pathname === '/card';
</script>
<TestCard full={onlyCard} />
<main class:content={!onlyCard}>
<slot />
</main>
<style>
main.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90vh;
max-width: 90vw;
background: rgba(0, 0, 0, 0.8);
border-radius: 0.5rem;
border: 1px solid white;
padding: 1rem;
}
:global(.hide-idle) {
transition: opacity 1s;
opacity: 1;
}
:global(body.idle .hide-idle) {
opacity: 0;
}
</style>