Move things to components

1 files changed, 35 insertions, 0 deletions

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
new file mode 100644
index 0000000..7664939
--- /dev/null
+++ b/src/lib/components/background.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { browser } from '$app/env';
+
+  export let x;
+  export let y;
+
+  const kDotSize = 32;
+
+  $: {
+    if (browser) {
+      document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-x', kDotSize - x % kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-y', kDotSize - y % kDotSize + 'px');
+    }
+  }
+</script>
+
+<div class="background"></div>
+
+<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;
+  }
+</style>