From 2facd06e75d3ff6b5668321a7d05643eaa8ecd9f Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Sun, 13 Aug 2023 11:30:08 +1000
Subject: [PATCH] add background

---
 src/App.module.scss                     |  1 -
 src/App.svelte                          |  3 ++
 src/widget/Background/Background.svelte |  6 +++
 src/widget/Background/style.module.scss | 52 +++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/widget/Background/Background.svelte
 create mode 100644 src/widget/Background/style.module.scss

diff --git a/src/App.module.scss b/src/App.module.scss
index dfee0c4..7597303 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -5,7 +5,6 @@ body, html {
   font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
 }
 .backdrop {
-  background: #111;
   width: 100%;
   height: 100%;
   position: fixed;
diff --git a/src/App.svelte b/src/App.svelte
index 925dbc0..c72b0d0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,6 +8,7 @@
 
     import { Router, Link, Route, navigate } from "svelte-routing";
     import RouteStore from './store/RouteStore';
+    import Background from './widget/Background/Background.svelte';
 
     export let url = "/load";
     RouteStore.subscribe(() => {
@@ -20,6 +21,8 @@
 </script>
 
 <Titlebar />
+<Background />
+
 <div class={style.backdrop}>
     <div class={style['delay-show']}>
         <Router {url}>
diff --git a/src/widget/Background/Background.svelte b/src/widget/Background/Background.svelte
new file mode 100644
index 0000000..e7931d0
--- /dev/null
+++ b/src/widget/Background/Background.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    import style from './style.module.scss';
+</script>
+
+<div class={style.backdrop_bg}></div>
+<div class={style.mesh_bg}></div>
\ No newline at end of file
diff --git a/src/widget/Background/style.module.scss b/src/widget/Background/style.module.scss
new file mode 100644
index 0000000..1ef43a3
--- /dev/null
+++ b/src/widget/Background/style.module.scss
@@ -0,0 +1,52 @@
+@keyframes backdrop {
+    0%  { background: #0e0e0e }
+    50% { background: #0e0606 }
+    to  { background: #0e0e0e }
+}
+
+.backdrop_bg {
+    background: #0e0606;
+    width: 100%; height: 100%;
+    position: fixed;
+    border-radius: 16px;
+    animation: backdrop 15s ease infinite;
+}
+
+@keyframes breeze {
+    0%  {
+        opacity: 0.1;
+        filter: blur(64px);
+        transform: translate(-50%, -50%);
+        width: 90%; height: 80%;
+    }
+    33% {
+        opacity: 0.5;
+        filter: blur(82px);
+        transform: translate(-50%, -40%);
+        width: 100%; height: 100%;
+    }
+    67% {
+        opacity: 0.5;
+        filter: blur(72px);
+        transform: translate(-50%, -60%);
+        width: 100%; height: 100%;
+    }
+    to  {
+        opacity: 0.1;
+        filter: blur(64px);
+        transform: translate(-50%, -50%);
+        width: 90%; height: 80%;
+    }
+}
+
+.mesh_bg {
+    background: linear-gradient(45deg, rgba(3, 32, 87, 0.25) 25%, rgba(165, 5, 138, 0.25) 75%);
+    width: 90%; height: 80%;
+    position: fixed;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 800px 1200px;
+    filter: blur(64px);
+    opacity: 0.1;
+    animation: breeze 25s ease infinite;
+}
\ No newline at end of file