PC styles done

src/page/about/about.html.ts

@@ -8,5 +8,6 @@ export const generate = (
 ): html => `
     <section id="about">
         <img alt="${aPictureOf} ${name}" src="${picture}"/>
+        <div class="placeholder"></div>
         <h1>${name}</h1>
     </section>`;

src/page/about/about.scss

@@ -2,33 +2,48 @@
 @import "../../style/vars";
 
 #about {
+  @include important-card();
+
+  $img-size: 190px;
+
+  position: relative;
   width: $body-width;
-  margin-top: $normal-margin;
+  margin-top: calc(#{$normal-margin} + #{$img-size} * 1 / 3);
+
+  h1 {
+    text-align: left;
+  }
 
   h1,
-  img {
+  img,
+  .placeholder,
+  & {
     @include title-font();
   }
 
-  img {
-    @include square(4ch);
-    border-radius: 100%;
-    margin-right: 1.5ex;
-    cursor: pointer;
+  .placeholder {
+    @include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin}));
+    box-sizing: content-box;
     float: left;
+    margin: 0 0.75ex 0.75ex 0;
+  }
+
+  img {
+    @include square($img-size);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
+    border-radius: 100%;
+    cursor: pointer;
   }
 
   @media (max-width: $breakpoint-width) {
-    flex-direction: column;
-    img {
-      margin: 0 0 $small-margin 0;
-    }
-    h1 {
-      text-align: center;
-    }
   }
 
-  * {
+  p {
     @include main-font();
+    text-align: justify;
+    margin-top: $small-margin;
   }
 }

src/page/background/background.html.ts

@@ -1,34 +1,6 @@
 import { html } from "../../model/misc";
 import "./background.scss";
 
-export const generate = (
-  count: number,
-  z?: () => number,
-  color?: (z) => string,
-  height?: () => number,
-  isAnimated?: (index) => boolean,
-  transform?: (z) => string
-): html => {
-  return `
-    <section class="background">
-        ${
-          count > 0
-            ? new Array(count)
-                .fill(0, 0, count)
-                .map(_ => z())
-                .map(
-                  (zValue, i) => `
-                    <div class="${isAnimated(i) ? "animated" : ""}" style="
-                        background-color: ${color(zValue)};
-                        height: ${height()}px;
-                        z-index: ${-zValue};
-                        transform: ${transform(zValue)}"
-                    ></div>
-                `
-                )
-                .join("")
-            : ""
-        }
-    </section>
+export const generate = (): html => `
+    <section id="background"></section>
 `;
-};

src/page/background/background.scss

@@ -1,7 +1,7 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-.background {
+#background {
   position: absolute;
   left: 0;
   top: 0;
@@ -18,17 +18,15 @@
     top: 0;
     width: 160px;
 
-    transition: transform $slow-transition-time;
+    transition: transform $slow-transition-time, opacity $slow-transition-time;
 
-    &.animated {
-      animation: fade-in 1s linear forwards;
-      @keyframes fade-in {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
+    animation: fade-in 1s linear;
+    @keyframes fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
       }
     }
   }

src/page/background/background.ts

@@ -1,120 +1,82 @@
 import { PageElement } from "../../framework/page-element";
-import { generate } from "./background.html";
 import {
-  choose,
   getHeight,
   createElement,
   randomFactory,
-  randomInInterval,
-  sum,
-  mixColors
+  sum
 } from "../../framework/helper";
 import { PageEvent, PageEventType } from "../../framework/page-event";
+import { Blob } from "./blob";
+import { generate } from "./background.html";
 
 export class PageBackground extends PageElement {
-  private colors = ["#fff9e0", "#ffd6d6"];
-  private blobSpacing = 200;
-  private perspective = 5;
-  private currentRealHeight = 0;
-  private currentRealWidth = 0;
-  private currentBlobCount = 0;
+  private blobs: Array<Blob> = [];
+  private blobSpacing = 300;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
-    this.setElement(createElement(generate(0)));
+    this.setElement(createElement(generate()));
+    Blob.initialize(20, 40, 5);
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
     if (event.type === PageEventType.onLoad) {
       this.bindListeners(parent);
-    } else if (event.type === PageEventType.onBodyDimensionsChanged) {
       this.resize(parent);
+    } else if (event.type === PageEventType.onBodyDimensionsChanged) {
+      this.resize(parent, event.data.deltaHeight);
     }
   }
 
   private bindListeners(parent: PageElement) {
-    window.addEventListener("resize", this.resize.bind(this, parent));
-    window.addEventListener("load", this.resize.bind(this, parent));
+    window.addEventListener("resize", () => this.resize(parent));
+    window.addEventListener("load", () => this.resize(parent));
   }
 
-  private resize(parent: PageElement) {
-    const siblings: Array<HTMLElement> = Array.prototype.slice
-      .call(parent.getElement().children)
-      .filter(e => e !== this.getElement());
+  private resize(parent: PageElement, heightChange?: number) {
+    const siblings: Array<HTMLElement> = this.getSiblings(parent);
 
     const width = parent.getElement().clientWidth;
-    const height = sum(siblings.map(getHeight));
-
-    if (height > this.currentRealHeight || width > this.currentRealWidth) {
-      this.currentRealHeight = height;
-      this.currentRealWidth = width;
-
-      const random = randomFactory(46);
-
-      const zMin = 20;
-      const zMax = 40;
-
-      const count = Math.round((width * height) / this.blobSpacing ** 2);
-
-      const randomWithKnownZ = (
-        z: number,
-        viewportSize: number,
-        scrollSize: number,
-        startOffset = 0,
-        endOffset = 0
-      ): number => {
-        const m = 1 + z / this.perspective;
-
-        const variableOffset = (offset, q) =>
-          offset - ((z - zMin) / (zMax - zMin)) * (offset * q);
-
-        startOffset = variableOffset(startOffset, 0.6);
-        endOffset = variableOffset(endOffset, 0.2);
-
-        const lowerBound =
-          viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
-        const l =
-          scrollSize -
-          viewportSize +
-          (viewportSize - startOffset - endOffset) * m;
-
-        return randomInInterval(lowerBound, lowerBound + l, random);
-      };
-
-      this.setElement(
-        createElement(
-          generate(
-            count,
-            () => randomInInterval(zMin, zMax, random),
-            z =>
-              "#" +
-              mixColors(
-                "#ffffff",
-                choose(this.colors, random),
-                (z - zMin) / (zMax - zMin)
-              ),
-            () => randomInInterval(160, 750, random),
-            i => i >= this.currentBlobCount,
-            z => `
-              translateX(${randomWithKnownZ(z, width, width)}px)
-              translateY(${randomWithKnownZ(
-                z,
-                parent.getElement().clientHeight,
-                height,
-                getHeight(this.start.getElement()),
-                getHeight(this.end.getElement())
-              )}px)
-              translateZ(${-z}px)
-              rotate(-20deg)
-            `
-          )
-        )
-      );
-
-      this.currentBlobCount = count;
-      console.log(count);
+    let height = sum(siblings.map(getHeight));
+    if (heightChange) {
+      height += heightChange;
     }
     this.getElement().style.width = `${width}px`;
     this.getElement().style.height = `${height}px`;
+
+    const requiredBlobCount =
+      width > 900 ? Math.round((width * height) / this.blobSpacing ** 2) : 0;
+
+    console.log(requiredBlobCount);
+
+    while (requiredBlobCount > this.blobs.length) {
+      const blob = new Blob();
+      this.getElement().appendChild(blob.htmlElement);
+      this.blobs.push(blob);
+    }
+
+    const random = randomFactory(2322);
+
+    this.blobs.forEach((b, i) => {
+      if (i >= requiredBlobCount) {
+        b.hide();
+      } else {
+        b.transform(
+          random,
+          width,
+          parent.getElement().clientHeight,
+          height,
+          getHeight(this.start.getElement()),
+          getHeight(this.end.getElement())
+        );
+        b.show();
+      }
+    });
+  }
+
+  private getSiblings(parent: PageElement): Array<HTMLElement> {
+    return Array.prototype.slice
+      .call(parent.getElement().children)
+      .filter(e => e !== this.getElement());
   }
 }

src/page/background/blob.ts

@@ -0,0 +1,102 @@
+import {
+  choose,
+  createElement,
+  mixColors,
+  randomFactory,
+  randomInInterval
+} from "../../framework/helper";
+
+export class Blob {
+  private static readonly creatorRandom = randomFactory(42);
+  private static readonly colors = ["#fff9e0", "#ffd6d6"];
+  private static zMin: number;
+  private static zMax: number;
+  private static perspective: number;
+  public static initialize(zMin: number, zMax: number, perspective: number) {
+    Blob.zMin = zMin;
+    Blob.zMax = zMax;
+    Blob.perspective = perspective;
+  }
+
+  private readonly z = randomInInterval(
+    Blob.zMin,
+    Blob.zMax,
+    Blob.creatorRandom
+  );
+
+  private readonly element: HTMLElement = createElement("<div></div>");
+  constructor() {
+    this.element.style.backgroundColor =
+      "#" +
+      mixColors(
+        "#ffffff",
+        choose(Blob.colors, Blob.creatorRandom),
+        (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
+      );
+    this.element.style.zIndex = (-this.z).toString();
+    this.element.style.height = `${randomInInterval(
+      160,
+      750,
+      Blob.creatorRandom
+    )}px`;
+  }
+
+  get htmlElement(): HTMLElement {
+    return this.element;
+  }
+
+  private randomWithKnownZ(
+    random: () => number,
+    viewportSize: number,
+    scrollSize: number,
+    startOffset = 0,
+    endOffset = 0
+  ): number {
+    const m = 1 + this.z / Blob.perspective;
+
+    const variableOffset = (offset, q) =>
+      Math.max(
+        0,
+        offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q)
+      );
+
+    startOffset = variableOffset(startOffset, 1);
+    endOffset = variableOffset(endOffset, 0.2);
+
+    const lowerBound = viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
+    const l =
+      scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
+
+    return randomInInterval(lowerBound, lowerBound + l, random);
+  }
+
+  public show() {
+    this.element.style.opacity = "1";
+  }
+
+  public hide() {
+    this.element.style.opacity = "0";
+  }
+
+  public transform(
+    random: () => number,
+    width: number,
+    viewportHeight: number,
+    scrollHeight: number,
+    startOffset: number,
+    endOffset: number
+  ) {
+    this.element.style.transform = `
+      translateX(${this.randomWithKnownZ(random, width, width)}px)
+      translateY(${this.randomWithKnownZ(
+        random,
+        viewportHeight,
+        scrollHeight,
+        startOffset,
+        endOffset
+      )}px)
+      translateZ(${-this.z}px)
+      rotate(-20deg)
+    `;
+  }
+}

src/page/image-viewer/image-viewer.scss

@@ -14,7 +14,7 @@
   background-color: rgba(0, 0, 0, 0.75);
 
   #photo {
-    max-width: 90vw;
+    max-width: 80vw;
     max-height: 80vh;
   }
 

src/page/timeline/timeline-element/timeline-element.html.ts

@@ -14,7 +14,9 @@ export const generate = (
         <div class="card">
             <h2>${title}</h2>
             <p class="date-narrow-screen">${date}</p>
-            <img src="${picture}" alt="${picture}"/>
+            <div class="image-container">
+                <img src="${picture}" alt="${picture}"/>
+            </div>
             <p class="description">${description}</p>
             ${
               more

src/page/timeline/timeline-element/timeline-element.scss

@@ -9,6 +9,10 @@
     @include insignificant-font();
   }
 
+  .date-wide-screen {
+    color: $accent-color;
+  }
+
   .line {
     @media (max-width: $breakpoint-width) {
       display: none;
@@ -16,7 +20,7 @@
 
     position: relative;
     margin: 0 $small-margin 0 $icon-size / 2;
-    border-left: $line-width solid $normal-text-color;
+    border-left: $line-width solid $accent-color;
 
     &:before {
       content: "";
@@ -24,7 +28,7 @@
       position: absolute;
       top: 33%;
       left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));
-      border: $line-width solid $normal-text-color;
+      border: $line-width solid $accent-color;
       border-radius: 100%;
       background: $background;
     }
@@ -63,8 +67,16 @@
       color: $light-text-color;
     }
 
-    img {
-      cursor: pointer;
+    .image-container {
+      font-size: 0;
+      box-shadow: inset $shadow;
+      pointer-events: none;
+      img {
+        pointer-events: all;
+        cursor: pointer;
+        position: relative;
+        z-index: -2;
+      }
     }
 
     .description {

src/page/timeline/timeline-element/timeline-element.ts

@@ -34,27 +34,23 @@ export class PageTimelineElement extends PageElement {
     const showMore = this.query("#show-more") as HTMLElement;
     const showLess = this.query("#show-less") as HTMLElement;
     if (this.isOpen) {
-      this.more.style.height = "0";
       PageTimelineElement.show(showMore);
       PageTimelineElement.hide(showLess);
-      this.notifyOfHeightChange();
+      this.closeMore();
     } else {
       PageTimelineElement.hide(showMore);
       PageTimelineElement.show(showLess);
-      this.openMoreToFullHeight();
+      this.openMore();
     }
 
     this.isOpen = !this.isOpen;
   }
 
-  private notifyOfHeightChange(change: number = null) {
-    const notify = () =>
-      this.eventBroadcaster?.broadcastEvent({
-        type: PageEventType.onBodyDimensionsChanged,
-        data: change
-      });
-    notify();
-    setTimeout(notify, 350);
+  private notifyOfHeightChange(deltaHeight: number = undefined) {
+    this.eventBroadcaster?.broadcastEvent({
+      type: PageEventType.onBodyDimensionsChanged,
+      data: { deltaHeight }
+    });
   }
 
   private static hide(element: HTMLElement) {
@@ -69,15 +65,22 @@ export class PageTimelineElement extends PageElement {
     element.style.opacity = "1";
   }
 
-  private openMoreToFullHeight() {
-    this.more.style.height = `${this.more.scrollHeight.toString()}px`;
-    this.notifyOfHeightChange();
+  private openMore() {
+    const deltaHeight = this.more.scrollHeight;
+    this.more.style.height = `${deltaHeight.toString()}px`;
+    this.notifyOfHeightChange(deltaHeight);
+  }
+
+  private closeMore() {
+    const deltaHeight = this.more.scrollHeight;
+    this.more.style.height = "0";
+    this.notifyOfHeightChange(-deltaHeight);
   }
 
   private handleResize() {
     if (this.isOpen) {
       this.more.style.height = "auto";
-      setTimeout(this.openMoreToFullHeight.bind(this), 200);
+      setTimeout(this.openMore.bind(this), 200);
     }
   }
 }