From 3717f7fbf9ec110b51fe002cdced5d73ebd6136b Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Tue, 5 Jul 2022 19:11:31 +0200
Subject: Move things to components

---
 src/lib/components/background.svelte | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/lib/components/background.svelte

(limited to 'src/lib/components/background.svelte')

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>
-- 
cgit