quicksave

.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>

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;
+    left: -1000vh;
-    top: 0;
+    top: -1000vh;
-    width: 130px;
+    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 {

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`;
 

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,
+      8,
-      750,
+      37,
       Blob.creatorRandom
     )}px`;
   }
@@ -95,6 +95,7 @@ export class Blob {
         startOffset,
         endOffset
       )}px)
+      scale(20)
       translateZ(${-this.z}px)
       rotate(-20deg)
     `;

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

@@ -53,6 +53,7 @@
 
     .line {
       @include center-children();
+      justify-content: flex-start;
       height: 150px;
       width: 50%;
 

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,