Fix some bugs

src/page/background/animation.ts

@@ -7,9 +7,10 @@ export class Animation<T> {
     private to: T,
     private intervalInMs: number,
     private interpolator: (from: T, to: T, q: number) => T,
-
     private onChange?: (currentValue: T) => void
-  ) {}
+  ) {
+    this._value = from;
+  }
 
   public step(deltaTimeInMs: number) {
     if (this.elapsedTime === this.intervalInMs) {

src/page/background/background.ts

@@ -142,7 +142,7 @@ export class PageBackground extends PageElement {
         blob.topLeft.add(Vec3.from(blob.size, 0))
       );
 
-      if (this.isInView(topLeft) || this.isInView(bottomRight)) {
+      if (this.isInView(topLeft, bottomRight)) {
         blob.draw(this.ctx, topLeft, bottomRight.subtract(topLeft));
       }
     });
@@ -175,12 +175,12 @@ export class PageBackground extends PageElement {
     return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
   }
 
-  private isInView(p: Vec2): boolean {
+  private isInView(topLeft: Vec2, bottomRight: Vec2): boolean {
     return (
-      0 <= p.x &&
-      p.x <= this.canvas.width &&
-      0 <= p.y &&
-      p.y <= this.canvas.height
+      ((0 <= topLeft.x && topLeft.x <= this.canvas.width) ||
+        (0 <= bottomRight.x && bottomRight.x < this.canvas.width)) &&
+      ((0 <= topLeft.y && topLeft.y <= this.canvas.height) ||
+        (0 <= bottomRight.y && bottomRight.y <= this.canvas.height))
     );
   }
 

src/page/image-viewer/image-viewer.ts

@@ -28,10 +28,11 @@ export class PageImageViewer extends PageElement {
 
   private handleClick(event: Event) {
     const container = this.query('#container');
-    Array.prototype.forEach.call(container.childNodes, (e: HTMLElement) =>
-      e.remove()
-    );
-    container.appendChild((event.target as HTMLElement).cloneNode());
+    container.firstElementChild?.remove();
+
+    const element: HTMLImageElement = new Image();
+    element.src = (event.target as HTMLImageElement).src;
+    container.appendChild(element);
     PageImageViewer.show(this.element);
   }
 

src/page/theme-switcher/theme-switcher.scss

@@ -3,9 +3,15 @@
 @include responsive using($vars) {
   input[type='checkbox']#theme-switcher {
     @include on-large-screen {
-      position: fixed;
-      top: map_get($vars, $normal-margin);
-      right: map_get($vars, $normal-margin);
+      position: absolute;
+      top: -1 * map_get($vars, $small-margin);
+      right: calc(
+        -1 * (50vw - #{map_get($vars, $body-width)} / 2) + #{map_get(
+            $vars,
+            $normal-margin
+          )}
+      );
+      transform: translateY(-100%);
     }
 
     @include on-small-screen {