From 2ee4e3688873ade5bc94cde56497aa7fc2106601 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Schmelczer=20Andr=C3=A1s?= <schmelczerandras@gmail.com>
Date: Mon, 30 Dec 2019 10:59:05 +0100
Subject: [PATCH] quicksave

---
 .idea/workspace.xml                                 |  4 ++--
 src/page/background/background.scss                 | 13 ++++++-------
 src/page/background/background.ts                   |  9 +++++++++
 src/page/background/blob.ts                         |  5 +++--
 .../timeline/timeline-element/timeline-element.scss |  1 +
 src/styles.scss                                     | 11 ++++++-----
 6 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f93c4bc..a9fd10c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,8 @@
       <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.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -106,6 +105,7 @@
       <workItem from="1577469180612" duration="18000" />
       <workItem from="1577526744211" duration="46374000" />
       <workItem from="1577639259221" duration="3798000" />
+      <workItem from="1577662869335" duration="4081000" />
     </task>
     <servers />
   </component>
diff --git a/src/page/background/background.scss b/src/page/background/background.scss
index ed62e3f..cf16a4d 100644
--- a/src/page/background/background.scss
+++ b/src/page/background/background.scss
@@ -7,20 +7,19 @@
   top: 0;
   z-index: -1;
   overflow: hidden;
-
   will-change: width, height;
-
   transition: height $long-transition-time, width $long-transition-time;
 
   div {
-    border-radius: 10000px;
+    border-radius: 100px;
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 130px;
+    left: -1000vh;
+    top: -1000vh;
+    margin: 1000vh;
+    width: 7px;
 
     transition: transform $long-transition-time, opacity $long-transition-time;
-
+    will-change: transform, opacity;
     animation: fade-in 1s linear;
     @keyframes fade-in {
       from {
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index 66c5767..8107329 100644
--- a/src/page/background/background.ts
+++ b/src/page/background/background.ts
@@ -12,6 +12,8 @@ import { generate } from "./background.html";
 export class PageBackground extends PageElement {
   private blobs: Array<Blob> = [];
   private blobSpacing = 350;
+  private previousWidth: number;
+  private previousHeight: number;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
@@ -41,6 +43,13 @@ export class PageBackground extends PageElement {
     if (heightChange) {
       height += heightChange;
     }
+
+    if (this.previousHeight === height && this.previousWidth === width) {
+      return;
+    }
+    this.previousHeight = height;
+    this.previousWidth = width;
+
     this.getElement().style.width = `${width}px`;
     this.getElement().style.height = `${height}px`;
 
diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts
index be1caee..c54d443 100644
--- a/src/page/background/blob.ts
+++ b/src/page/background/blob.ts
@@ -35,8 +35,8 @@ export class Blob {
       );
     this.element.style.zIndex = (-this.z).toString();
     this.element.style.height = `${randomInInterval(
-      160,
-      750,
+      8,
+      37,
       Blob.creatorRandom
     )}px`;
   }
@@ -95,6 +95,7 @@ export class Blob {
         startOffset,
         endOffset
       )}px)
+      scale(20)
       translateZ(${-this.z}px)
       rotate(-20deg)
     `;
diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss
index 5a88f55..72c75af 100644
--- a/src/page/timeline/timeline-element/timeline-element.scss
+++ b/src/page/timeline/timeline-element/timeline-element.scss
@@ -53,6 +53,7 @@
 
     .line {
       @include center-children();
+      justify-content: flex-start;
       height: 150px;
       width: 50%;
 
diff --git a/src/styles.scss b/src/styles.scss
index 2c1e9e4..8db910b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,16 +29,17 @@ body {
   height: 100%;
 
   & > main {
-    noscript {
-      @include square(100%);
-      @include center-children();
-    }
-
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     perspective-origin: center center;
     perspective: 5px;
+    will-change: scroll-position, transform;
+
+    noscript {
+      @include square(100%);
+      @include center-children();
+    }
 
     @media (min-width: $breakpoint-width) {
       &::-webkit-scrollbar-track,