diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2024-01-21 14:48:35 +0100 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2024-01-21 14:48:35 +0100 |
| commit | 587d8fe65d61b8f7217b4e8850b44e43159c16fb (patch) | |
| tree | 8cd7ad359dbe79beff9e8288f97ee1277a3729f0 /src/lib/components/background.svelte | |
| parent | e4e4b5202bf0039127f591941fddc1ff5ca09897 (diff) | |
Save WIP
Diffstat (limited to 'src/lib/components/background.svelte')
| -rw-r--r-- | src/lib/components/background.svelte | 56 |
1 files changed, 31 insertions, 25 deletions
diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte index 1aa82fa..20b9e37 100644 --- a/src/lib/components/background.svelte +++ b/src/lib/components/background.svelte @@ -1,33 +1,39 @@ <script> - import { browser } from '$app/environment'; - import { canvas } from '$lib/stores/canvas'; + import { browser } from '$app/environment'; + import { canvas } from '$lib/stores/canvas'; - const kDotSize = 32; + const kDotSize = 32; - $: { - if (browser) { - document.documentElement.style.setProperty('--dot-size', kDotSize + 'px'); - document.documentElement.style.setProperty('--dot-x', kDotSize - $canvas.x % kDotSize + 'px'); - document.documentElement.style.setProperty('--dot-y', kDotSize - $canvas.y % kDotSize + 'px'); - } - } + $: { + if (browser) { + document.documentElement.style.setProperty('--dot-size', kDotSize + 'px'); + document.documentElement.style.setProperty( + '--dot-x', + kDotSize - ($canvas.x % kDotSize) + 'px' + ); + document.documentElement.style.setProperty( + '--dot-y', + kDotSize - ($canvas.y % kDotSize) + 'px' + ); + } + } </script> -<div class="background"></div> +<div class="background" /> <style> - .background { - position: fixed; - top: 0; - bottom: 0; - user-select: none; - pointer-events: none; - background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size)); - background-size: var(--dot-size) var(--dot-size); - background-position: var(--dot-x) var(--dot-y); - padding: 0; - margin: 0; - width: 100vw; - height: 100vh; - } + .background { + position: fixed; + top: 0; + bottom: 0; + user-select: none; + pointer-events: none; + background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size)); + background-size: var(--dot-size) var(--dot-size); + background-position: var(--dot-x) var(--dot-y); + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + } </style> |