From 256b3d414275f2fbf554eaa7ed3610b4b04b6e1c Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 6 Apr 2026 17:17:01 +0200
Subject: [PATCH] moved water background to separate component

---
 src/lib/viewport/water-background.svelte | 19 +++++++++++++++++++
 src/routes/+layout.svelte                | 19 ++-----------------
 src/routes/test/+page.svelte             |  1 +
 3 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/viewport/water-background.svelte
 create mode 100644 src/routes/test/+page.svelte

diff --git a/src/lib/viewport/water-background.svelte b/src/lib/viewport/water-background.svelte
new file mode 100644
index 0000000..cfebf8c
--- /dev/null
+++ b/src/lib/viewport/water-background.svelte
@@ -0,0 +1,19 @@
+<div class="waters"></div>
+
+<style>
+    .waters {
+        --color-waters: #242424;
+
+        position: fixed;
+        z-index: -99;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--color-waters);
+        mask-image: url('/bremen-waters-white.svg');
+        mask-position: center;
+        background-position: center;
+        background-attachment: fixed;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4ce64a1..c92edde 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
     import Header from "$lib/viewport/header.svelte";
     import Footer from "$lib/viewport/footer.svelte";
+    import WaterBackground from "$lib/viewport/water-background.svelte";
 
 	let { children } = $props();
 </script>
@@ -9,7 +10,7 @@
     <meta name="robots" content="noai, noimageai">
 </svelte:head>
 
-<div class="waters"></div>
+<WaterBackground />
 <div class="all-content-container">
     <Header />
 
@@ -113,8 +114,6 @@
             --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
             --color-background-highlight-hover-alt: color-mix(in srgb, var(--color-highlight-alt) 66%, transparent);
             --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent);
-            
-            --color-waters: #242424;
 
             --color-link-unvisited: #c2e8ff;
             --color-link-visited: #ffd7f0;
@@ -197,20 +196,6 @@
             /* max-width: 100%; */
         }
 
-        .waters {
-            position: fixed;
-            z-index: -99;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            background-color: var(--color-waters);
-            mask-image: url('/bremen-waters-white.svg');
-            mask-position: center;
-            background-position: center;
-            background-attachment: fixed;
-        }
-
         p, span, li, pre, a {
             color: var(--color-text);
             font-size: var(--font-size-sans-serif);
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
new file mode 100644
index 0000000..5e40c08
--- /dev/null
+++ b/src/routes/test/+page.svelte
@@ -0,0 +1 @@
+asdf
\ No newline at end of file