Fix some bugs

src/framework/helper/last.ts

@@ -1,2 +1,2 @@
-export const last = <T>(list: Array<T>): T =>
+export const last = <T>(list: ArrayLike<T>): T =>
   list.length >= 1 ? list[list.length - 1] : undefined;

src/framework/primitives/implementations/image.ts

@@ -3,6 +3,7 @@ import { html, ResponsiveImage } from '../../model/misc';
 import { last } from '../../helper/last';
 
 export class Image implements Primitive {
+  private static readonly IMAGE_SCREEN_RATIO = 0.8;
   public constructor(
     private readonly image: ResponsiveImage,
     private readonly alt: string
@@ -13,6 +14,15 @@ export class Image implements Primitive {
         ${!disableInnerShadow ? `<div class="figure-container">` : ''}
             <img tabindex="0"
                 srcset="${this.image.srcSet}" 
+                sizes="${this.image.images
+                  .slice(0, -1)
+                  .map(
+                    d =>
+                      `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${
+                        d.width
+                      }px,`
+                  )
+                  .join('\n') + `\n${last(this.image.images).width}px`}"
                 src="${last(this.image.images)?.path}" 
                 alt="${this.alt}"
             />

src/framework/styles/wrapper.scss

@@ -7,7 +7,7 @@ $large-screen-light-theme-variables: () !default;
 $large-screen-dark-theme-variables: () !default;
 
 @mixin on-small-screen() {
-  @media (max-width: $breakpoint-width) {
+  @media (max-width: $breakpoint-width - 1px) {
     @content;
   }
 }

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 {