Add final touches

src/page/background/background.scss

@@ -1,9 +1,7 @@
-@import '../../style/vars';
-@import '../../style/mixins';
+@use '../../style/include' as *;
 
 @include responsive() using ($vars) {
   div.background-element {
-    position: -webkit-sticky;
     position: absolute;
     left: 0;
     top: 0;
@@ -24,9 +22,9 @@
       }
     }
 
-    transition: transform map_get($vars, $long-transition-time),
-      opacity map_get($vars, $long-transition-time),
-      background-color map_get($vars, $long-transition-time);
+    transition: transform map_get($vars, $transition-time),
+      opacity map_get($vars, $transition-time),
+      background-color map_get($vars, $transition-time);
 
     will-change: transform, opacity;
     animation: fade-in 1s linear;

src/page/background/background.ts

@@ -1,5 +1,5 @@
 import { PageElement } from '../../framework/page-element';
-import { PageEvent, PageEventType } from '../../framework/page-event';
+import { PageEvent, PageEventType } from '../../framework/events/page-event';
 import { Blob } from './blob';
 import { Random } from '../../framework/helper/random';
 import { getHeight } from '../../framework/helper/get-height';
@@ -15,13 +15,17 @@ export class PageBackground extends PageElement {
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
-    if (event.type === PageEventType.onLoad) {
-      this.bindListeners(parent);
-    } else if (event.type === PageEventType.onBodyDimensionsChanged) {
-      this.resize(parent, event.data?.deltaHeight);
-    } else if (event.type === PageEventType.pageThemeChanged) {
-      Blob.changeTheme(event.data);
-      this.blobs.forEach(b => b.decideColor());
+    switch (event.type) {
+      case PageEventType.onLoad:
+        this.bindListeners(parent);
+        break;
+      case PageEventType.onBodyDimensionsChanged:
+        this.resize(parent, event.data?.deltaHeight);
+        break;
+      case PageEventType.pageThemeChanged:
+        Blob.changeTheme(event.data);
+        this.blobs.forEach(b => b.decideColor());
+        break;
     }
   }
 

src/page/background/blob.html.ts

@@ -1,4 +1,4 @@
-import { html } from '../../model/misc';
+import { html } from '../../framework/model/misc';
 import './background.scss';
 
 export const generate = (): html => `

src/page/background/blob.ts

@@ -1,14 +1,15 @@
 import { mixColors } from '../../framework/helper/mix-colors';
 import { createElement } from '../../framework/helper/create-element';
 import { Random } from '../../framework/helper/random';
-import { generate } from './background.html';
+import { generate } from './blob.html';
 
 export class Blob {
   private static readonly creatorRandom = new Random(44);
-  private static colorPickerRandom = new Random(132);
+  private static readonly darkColors = ['#2c477a'];
   private static readonly lightColors = ['#fff9e0', '#ffd6d6'];
-  private static readonly darkColors = ['#2C477A'];
+  private static colorPickerRandom = new Random(132);
   private static isDarkThemed = false;
+
   private static zMin: number;
   private static zMax: number;
   private static perspective: number;