finally

.idea/workspace.xml

@@ -2,11 +2,20 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/page/background/animation.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/page/background/vec2.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/page/background/vec3.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/background/blob.html.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -44,7 +53,7 @@
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="ignore_missing_gitignore" value="true" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../life-towers" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/page/background" />
     <property name="node.js.detected.package.stylelint" value="true" />
     <property name="node.js.path.for.package.stylelint" value="project" />
     <property name="node.js.selected.package.stylelint" value="" />
@@ -56,6 +65,7 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/page/background" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
@@ -127,6 +137,7 @@
       <workItem from="1578559306201" duration="8231000" />
       <workItem from="1578641947739" duration="28021000" />
       <workItem from="1578727663054" duration="2241000" />
+      <workItem from="1578731179373" duration="9813000" />
     </task>
     <servers />
   </component>
@@ -166,17 +177,25 @@
       <screen x="0" y="27" width="2560" height="1053" />
     </state>
     <state x="1664" y="411" width="502" height="292" key="ANALYSIS_DLG_com.intellij.analysis.BaseAnalysisAction$1/0.27.2560.1053@0.27.2560.1053" timestamp="1578563647005" />
-    <state x="1380" y="127" width="1080" height="853" key="DiffContextDialog" timestamp="1578686003357">
+    <state x="1171" y="27" width="1080" height="853" maximized="true" key="DiffContextDialog" timestamp="1578738442479">
       <screen x="0" y="27" width="2560" height="1053" />
     </state>
-    <state x="1380" y="127" width="1080" height="853" key="DiffContextDialog/0.27.2560.1053@0.27.2560.1053" timestamp="1578686003357" />
+    <state x="1171" y="27" width="1080" height="853" maximized="true" key="DiffContextDialog/0.27.2560.1053@0.27.2560.1053" timestamp="1578738442479" />
-    <state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1578687009013">
+    <state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1578740458107">
       <screen x="0" y="27" width="2560" height="1053" />
     </state>
-    <state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.27.2560.1053@0.27.2560.1053" timestamp="1578687009013" />
+    <state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.27.2560.1053@0.27.2560.1053" timestamp="1578740458107" />
-    <state x="1603" y="289" width="774" height="677" key="find.popup" timestamp="1578682206106">
+    <state x="2130" y="404" width="969" height="749" key="dock-window-1" timestamp="1578731230649">
       <screen x="0" y="27" width="2560" height="1053" />
     </state>
-    <state x="1603" y="289" width="774" height="677" key="find.popup/0.27.2560.1053@0.27.2560.1053" timestamp="1578682206106" />
+    <state x="2130" y="404" width="969" height="749" key="dock-window-1/0.27.2560.1053@0.27.2560.1053" timestamp="1578731230649" />
+    <state x="1603" y="289" width="774" height="677" key="find.popup" timestamp="1578740080122">
+      <screen x="0" y="27" width="2560" height="1053" />
+    </state>
+    <state x="1603" y="289" width="774" height="677" key="find.popup/0.27.2560.1053@0.27.2560.1053" timestamp="1578740080122" />
+    <state x="943" y="259" width="672" height="678" key="search.everywhere.popup" timestamp="1578734818429">
+      <screen x="0" y="27" width="2560" height="1053" />
+    </state>
+    <state x="943" y="259" width="672" height="678" key="search.everywhere.popup/0.27.2560.1053@0.27.2560.1053" timestamp="1578734818429" />
   </component>
 </project>

src/index.html

@@ -17,6 +17,8 @@
         <title>Portfolio - András Schmelczer</title>
     </head>
     <body>
-        <noscript><h1>Javascript is required for this website.</h1></noscript>
+        <div id="main">  <!-- IE11 doesn't know <main> -->
+            <noscript><h1>Javascript is required for this website.</h1></noscript>
+        </div>
     </body>
 </html>

src/page/background/animation.ts

@@ -0,0 +1,32 @@
+export class Animation<T> {
+  private _value: T;
+  private elapsedTime = 0;
+
+  public constructor(
+    private from: T,
+    private to: T,
+    private intervalInMs: number,
+    private interpolator: (from: T, to: T, q: number) => T,
+
+    private onChange?: (currentValue: T) => void
+  ) {}
+
+  public step(deltaTimeInMs: number) {
+    if (this.elapsedTime === this.intervalInMs) {
+      return;
+    }
+
+    this.elapsedTime = Math.min(
+      this.elapsedTime + deltaTimeInMs,
+      this.intervalInMs
+    );
+
+    const q = this.elapsedTime / this.intervalInMs;
+    this._value = this.interpolator(this.from, this.to, q);
+    this.onChange?.call(null, this._value);
+  }
+
+  public get value(): T {
+    return this._value;
+  }
+}

src/page/background/background.html.ts

@@ -1,6 +1,6 @@
-import { html } from '../../framework/model/misc';
 import './background.scss';
+import { html } from '../../framework/model/misc';
 
 export const generate = (): html => `
-    <div class="background-element"></div>
+    <canvas id="background"></canvas>
 `;

src/page/background/background.scss

@@ -1,34 +1,18 @@
 @use '../../style/include' as *;
 
 @include responsive() using ($vars) {
-  div.background-element {
+  canvas#background {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
-    border-radius: 100px;
+    height: 100%;
-    width: 140px;
+    width: 100%;
+    z-index: -10;
 
-    overflow: visible !important; // IE11 fix for disappearing elements
+    @media print {
-
-    @media (prefers-reduced-motion: reduce) {
       & {
         display: none;
       }
     }
-
-    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;
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
   }
 }

src/page/background/background.ts

@@ -1,21 +1,37 @@
 import { PageElement } from '../../framework/page-element';
-import { PageEvent, PageEventType } from '../../framework/events/page-event';
 import { Blob } from './blob';
-import { Random } from '../../framework/helper/random';
+import { generate } from './background.html';
-import { getHeight } from '../../framework/helper/get-height';
+import { Animation } from './animation';
+import { Vec3 } from './vec3';
+import { Vec2 } from './vec2';
+import { PageEvent, PageEventType } from '../../framework/events/page-event';
+import { createElement } from '../../framework/helper/create-element';
 import { sum } from '../../framework/helper/sum';
+import { getHeight } from '../../framework/helper/get-height';
 
 export class PageBackground extends PageElement {
   private readonly blobs: Array<Blob> = [];
-  private readonly blobSpacing = 350;
+  private readonly blobSpacing = 325;
+  private readonly minBlobCount = 30;
+  private readonly perspective = 5;
+  private readonly zMin = 10;
+  private readonly zMax = 30;
+  private readonly animationTime = 250;
+  private backgroundSize: Animation<Vec2>;
+  private scrollPosition: number = 0;
+  private previousTimestamp: DOMHighResTimeStamp = null;
+  private readonly canvas: HTMLCanvasElement;
+  private readonly ctx: CanvasRenderingContext2D;
 
   public constructor(
     private readonly start: PageElement,
     private readonly inBetween: Array<PageElement>,
     private readonly end: PageElement
   ) {
-    super();
+    super(createElement(generate()));
-    Blob.initialize(10, 30, 5);
+    this.canvas = this.element as HTMLCanvasElement;
+    this.ctx = this.canvas.getContext('2d');
+    Blob.initialize(this.zMin, this.zMax);
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
@@ -35,48 +51,146 @@ export class PageBackground extends PageElement {
 
   private bindListeners(parent: PageElement) {
     window.addEventListener('resize', () => this.resize(parent));
-    window.addEventListener('load', () => this.resize(parent));
+    window.addEventListener('load', e => {
+      this.resize(parent);
+      this.redraw(e.timeStamp, parent);
+    });
   }
 
   private resize(parent: PageElement, heightChange?: number) {
+    this.resizeCanvas();
+    this.resizeBackground(parent, heightChange);
+  }
+
+  private resizeCanvas() {
+    this.canvas.width = this.canvas.clientWidth;
+    this.canvas.height = this.canvas.clientHeight;
+  }
+
+  private resizeBackground(parent: PageElement, heightChange?: number) {
+    const targetWidth = parent.element.clientWidth;
+
     const siblings: Array<HTMLElement> = this.getSiblings();
-
+    let targetHeight = sum(siblings.map(getHeight));
-    const width = document.body.clientWidth;
-    let height = sum(siblings.map(getHeight));
     if (heightChange) {
-      height += heightChange;
+      targetHeight += heightChange;
     }
 
-    const requiredBlobCount = Math.round(
+    const targetSize = new Vec2(targetWidth, targetHeight);
-      (width * height) / this.blobSpacing ** 2
+
+    this.backgroundSize = new Animation(
+      this.backgroundSize ? this.backgroundSize.value : targetSize,
+      targetSize,
+      this.animationTime,
+      (from: Vec2, to: Vec2, q: number): Vec2 =>
+        new Vec2(from.x + q * (to.x - from.x), from.y + q * (to.y - from.y)),
+      backgroundSize =>
+        this.blobs.forEach(blob => {
+          const variableOffset = (offset, q) =>
+            Math.max(
+              0,
+              offset -
+                ((blob.z - this.zMin) / (this.zMax - this.zMin)) * offset * q
+            );
+          const topOffset = variableOffset(getHeight(this.start.element), 1);
+          const topLeft = this.convertFrom2Dto3D(
+            new Vec2(0, topOffset),
+            blob.z
+          );
+
+          const bottomOffset = variableOffset(getHeight(this.end.element), 0.2);
+
+          const bottomRight = this.convertFrom2Dto3D(
+            new Vec2(this.canvas.width, this.canvas.height - bottomOffset),
+            blob.z,
+            backgroundSize.y - this.canvas.height
+          );
+
+          blob.positionOffset = topLeft;
+          blob.positionScale = bottomRight.subtract(topLeft);
+        })
     );
-
-    while (requiredBlobCount > this.blobs.length) {
-      const blob = new Blob();
-      parent.element.appendChild(blob.htmlElement);
-      this.blobs.push(blob);
-    }
-
-    const random = new Random(2662);
-
-    this.blobs.forEach((b, i) => {
-      if (i >= requiredBlobCount) {
-        b.hide();
-      } else {
-        b.transform(
-          random,
-          width,
-          parent.element.clientHeight,
-          height,
-          getHeight(this.start.element),
-          getHeight(this.end.element)
-        );
-        b.show();
-      }
-    });
   }
 
   private getSiblings(): Array<HTMLElement> {
     return [this.start, ...this.inBetween, this.end].map(e => e.element);
   }
+
+  private redraw(timestamp: DOMHighResTimeStamp, parent: PageElement) {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    const deltaTime = this.getDeltaTime(timestamp);
+    this.backgroundSize.step(deltaTime);
+    this.blobs.forEach(b => b.step(deltaTime));
+
+    this.scrollPosition = parent.element.scrollTop;
+    const requiredBlobCount = this.requiredBlobCount;
+
+    while (requiredBlobCount > this.blobs.length) {
+      this.blobs.push(new Blob());
+    }
+
+    this.blobs.sort((b1, b2) => b2.z - b1.z);
+
+    this.blobs.forEach((blob, i) => {
+      if (i >= requiredBlobCount) {
+        return;
+      }
+
+      const topLeft = this.convertFrom3Dto2D(blob.topLeft);
+      const bottomRight = this.convertFrom3Dto2D(
+        blob.topLeft.add(Vec3.from(blob.size, 0))
+      );
+
+      if (this.isInView(topLeft) || this.isInView(bottomRight)) {
+        blob.draw(this.ctx, topLeft, bottomRight.subtract(topLeft));
+      }
+    });
+
+    window.requestAnimationFrame(timestamp => this.redraw(timestamp, parent));
+  }
+
+  private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
+    const deltaTime = this.previousTimestamp
+      ? timestamp - this.previousTimestamp
+      : 0;
+    this.previousTimestamp = timestamp;
+    return Math.max(0, deltaTime);
+  }
+
+  private convertFrom3Dto2D(p: Vec3): Vec2 {
+    const m = this.perspective / (this.perspective + p.z);
+    return new Vec2(
+      m * (p.z / 2 + p.x),
+      m * (p.z / 2 + p.y - this.scrollPosition)
+    );
+  }
+
+  private convertFrom2Dto3D(
+    p: Vec2,
+    z: number,
+    scrollPosition: number = 0
+  ): Vec2 {
+    const m = 1 + z / this.perspective;
+    return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
+  }
+
+  private isInView(p: Vec2): boolean {
+    return (
+      0 <= p.x &&
+      p.x <= this.canvas.width &&
+      0 <= p.y &&
+      p.y <= this.canvas.height
+    );
+  }
+
+  private get requiredBlobCount(): number {
+    return Math.max(
+      this.minBlobCount,
+      Math.round(
+        (this.backgroundSize.value.x * this.backgroundSize.value.y) /
+          this.blobSpacing ** 2
+      )
+    );
+  }
 }

src/page/background/blob.ts

@@ -1,22 +1,22 @@
+import { Vec2 } from './vec2';
+import { Vec3 } from './vec3';
 import { mixColors } from '../../framework/helper/mix-colors';
-import { createElement } from '../../framework/helper/create-element';
 import { Random } from '../../framework/helper/random';
-import { generate } from './blob.html';
+import { Animation } from './animation';
 
 export class Blob {
-  private static readonly creatorRandom = new Random(44);
   private static readonly darkColors = ['#2c477a'];
   private static readonly lightColors = ['#fff9e0', '#ffd6d6'];
+  private static readonly rotation = (-20 / 180) * Math.PI;
+  private static readonly creatorRandom = new Random(51);
   private static colorPickerRandom = new Random(132);
   private static isDarkThemed = false;
 
   private static zMin: number;
   private static zMax: number;
-  private static perspective: number;
+  public static initialize(zMin: number, zMax: number) {
-  public static initialize(zMin: number, zMax: number, perspective: number) {
     Blob.zMin = zMin;
     Blob.zMax = zMax;
-    Blob.perspective = perspective;
   }
 
   public static changeTheme(isDarkThemed: boolean) {
@@ -24,89 +24,79 @@ export class Blob {
     Blob.isDarkThemed = isDarkThemed;
   }
 
-  private readonly z = Blob.creatorRandom.randomInInterval(
+  public readonly z = Blob.creatorRandom.randomInInterval(Blob.zMin, Blob.zMax);
-    Blob.zMin,
+  private color: Animation<string>;
-    Blob.zMax
+
+  private readonly positionQ = new Vec2(
+    Blob.creatorRandom.next,
+    Blob.creatorRandom.next
+  );
+  private _positionScale = new Vec2(0, 0);
+  private _positionOffset = new Vec2(0, 0);
+
+  private readonly _size = new Vec2(
+    140,
+    Blob.creatorRandom.randomInInterval(260, 740)
   );
 
-  private readonly element: HTMLElement = createElement(generate());
+  public constructor() {
-  constructor() {
     this.decideColor();
-    this.element.style.zIndex = Math.round(-this.z).toString();
-    this.element.style.height = `${Blob.creatorRandom.randomInInterval(
-      160,
-      740
-    )}px`;
   }
 
   public decideColor() {
-    this.element.style.backgroundColor = mixColors(
+    const target = mixColors(
-      Blob.isDarkThemed ? '#242638  ' : '#ffffff',
+      Blob.isDarkThemed ? '#242638' : '#ffffff',
       Blob.colorPickerRandom.choose(
         Blob.isDarkThemed ? Blob.darkColors : Blob.lightColors
       ),
       (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
     );
+
+    this.color = new Animation<string>(
+      this.color ? this.color.value : target,
+      target,
+      250,
+      (f, t, q) => mixColors(f, t, 1 - q)
+    );
   }
 
-  get htmlElement(): HTMLElement {
+  public step(value) {
-    return this.element;
+    this.color?.step(value);
   }
 
-  private randomWithKnownZ(
+  public get topLeft(): Vec3 {
-    random: Random,
+    return Vec3.from(
-    viewportSize: number,
+      this.positionQ.multiply(this._positionScale).add(this._positionOffset),
-    scrollSize: number,
+      this.z
-    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 random.randomInInterval(lowerBound, lowerBound + l);
   }
 
-  public show() {
+  public get size(): Vec2 {
-    this.element.style.opacity = '1';
+    return this._size;
   }
 
-  public hide() {
+  public set positionScale(value: Vec2) {
-    this.element.style.opacity = '0';
+    this._positionScale = value;
   }
 
-  public transform(
+  public set positionOffset(value: Vec2) {
-    random: Random,
+    this._positionOffset = value;
-    width: number,
+  }
-    viewportHeight: number,
+
-    scrollHeight: number,
+  public draw(ctx: CanvasRenderingContext2D, position: Vec2, size: Vec2) {
-    startOffset: number,
+    ctx.save();
-    endOffset: number
+
-  ) {
+    ctx.translate(position.x, position.y);
-    const value = `
+    ctx.rotate(Blob.rotation);
-      translateX(${this.randomWithKnownZ(random, width, width)}px)
+
-      translateY(${this.randomWithKnownZ(
+    ctx.beginPath();
-        random,
+    ctx.arc(0, size.x / 2, size.x / 2, Math.PI, 0);
-        viewportHeight,
+    ctx.arc(0, size.y - size.x / 2, size.x / 2, 0, Math.PI);
-        scrollHeight,
+    ctx.closePath();
-        startOffset,
+
-        endOffset
+    ctx.fillStyle = this.color.value;
-      )}px)
+    ctx.fill();
-      translateZ(${-this.z}px)
+
-      rotate(-20deg)
+    ctx.restore();
-    `;
-    this.element.style['-webkit-transform'] = value;
-    this.element.style.transform = value;
   }
 }

src/page/background/vec2.ts

@@ -0,0 +1,17 @@
+export class Vec2 {
+  public static readonly Zero = new Vec2(0, 0);
+
+  public constructor(public readonly x: number, public readonly y: number) {}
+
+  public add(other: Vec2): Vec2 {
+    return new Vec2(this.x + other.x, this.y + other.y);
+  }
+
+  public subtract(other: Vec2): Vec2 {
+    return new Vec2(this.x - other.x, this.y - other.y);
+  }
+
+  public multiply(other: Vec2): Vec2 {
+    return new Vec2(this.x * other.x, this.y * other.y);
+  }
+}

src/page/background/vec3.ts

@@ -0,0 +1,23 @@
+import { Vec2 } from './vec2';
+
+export class Vec3 {
+  public static readonly Zero = new Vec3(0, 0, 0);
+
+  public static from(vec2: Vec2, z: number): Vec3 {
+    return new Vec3(vec2.x, vec2.y, z);
+  }
+
+  public constructor(
+    public readonly x: number,
+    public readonly y: number,
+    public readonly z: number
+  ) {}
+
+  public add(other: Vec3): Vec3 {
+    return new Vec3(this.x + other.x, this.y + other.y, this.z + other.z);
+  }
+
+  public multiply(other: Vec3): Vec3 {
+    return new Vec3(this.x * other.x, this.y * other.y, this.z * other.z);
+  }
+}

src/page/index.ts

@@ -11,7 +11,7 @@ export const create = ({ header, timeline, footer }: Portfolio) => {
   const pageTimeline = new PageTimeline(timeline);
   const pageFooter = new PageFooter(footer);
 
-  new ContainerPage(document.body, [
+  new ContainerPage(document.body.querySelector('#main'), [
     new PageImageViewer(),
     pageHeader,
     pageTimeline,

src/page/timeline/timeline.html.ts

@@ -2,5 +2,5 @@ import { html } from '../../framework/model/misc';
 import './timeline.scss';
 
 export const generate = (): html => `
-    <main id="timeline"></main>
+    <div id="timeline"></div> <!-- IE11 doesn't know <main> -->
 `;

src/page/timeline/timeline.scss

@@ -1,7 +1,7 @@
 @use '../../style/include' as *;
 
 @include responsive() using ($vars) {
-  main#timeline {
+  div#timeline {
     @include on-large-screen {
       // workaround for IE
       & > :first-child {

src/style/mixins.scss

@@ -19,6 +19,7 @@
   padding: map_get($vars, vars.$normal-margin);
   box-shadow: map_get($vars, vars.$shadow);
   z-index: 1;
+  width: 100%;
 }
 
 @mixin square($size) {

src/styles.scss

@@ -5,14 +5,9 @@
 @include responsive() using ($vars) {
   & {
     height: 100%;
-    overflow: hidden;
-
-    transform-style: preserve-3d;
 
     background-color: map_get($vars, $background);
-    transition: background-color map_get($vars, $transition-time);
+    transition: background-color linear map_get($vars, $transition-time);
-
-    touch-action: manipulation;
 
     @include on-small-screen {
       font-size: 0.8rem;
@@ -48,17 +43,13 @@
   *::after {
     @include main-font($vars);
 
-    transform-style: preserve-3d;
-
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    transition: background-color map_get($vars, $transition-time),
+    transition: background-color linear map_get($vars, $transition-time),
       color map_get($vars, $transition-time);
 
     hyphens: auto;
-
-    touch-action: manipulation;
   }
 
   img,
@@ -66,7 +57,6 @@
   .figure-container {
     width: 100%;
     height: auto;
-    object-fit: contain;
   }
 
   .figure-container {
@@ -97,35 +87,34 @@
     padding: env(safe-area-inset-top) env(safe-area-inset-right)
       env(safe-area-inset-bottom) env(safe-area-inset-left);
 
+    height: 100%;
+
     @media print {
       & {
         height: auto;
       }
     }
 
-    max-height: 100%; // to take mobile nav-bar into account
+    div#main {
-    overflow-x: hidden;
+      height: 100%;
-    overflow-y: scroll;
+      overflow-x: hidden;
+      overflow-y: scroll;
 
-    //will-change: transform;
+      noscript {
-
+        @include square(100%);
-    perspective: 5px;
+        @include center-children();
-    perspective-origin: center center;
-
-    noscript {
-      @include square(100%);
-      @include center-children();
-    }
-
-    @include on-large-screen {
-      &::-webkit-scrollbar-track,
-      &::-webkit-scrollbar {
-        background-color: transparent;
-        width: 12px;
       }
-      &::-webkit-scrollbar-thumb {
+
-        background-color: map_get($vars, $accent-color);
+      @include on-large-screen {
-        border-radius: map_get($vars, $border-radius);
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar {
+          background-color: transparent;
+          width: 12px;
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: map_get($vars, $accent-color);
+          border-radius: map_get($vars, $border-radius);
+        }
       }
     }
   }