Remove zoom, improve performance and style

src/index.scss

@@ -27,10 +27,13 @@ html[animations='off'] {
 
 html {
   height: 100%;
-
   overflow: hidden;
 
-  @include on-small-screen {
+  @media (min-width: 1000px) and (max-width: 1440px) {
+    font-size: 0.875rem;
+  }
+
+  @media (max-width: 999px) {
     font-size: 0.8rem;
   }
 
@@ -42,14 +45,6 @@ html {
 }
 
 body {
-  @media (min-width: $breakpoint-width) and (max-width: 999px) {
-    @include zoom(0.8);
-  }
-
-  @media (min-width: 1000px) and (max-width: 1440px) {
-    @include zoom(0.875);
-  }
-
   background-color: var(--background);
   transition: background-color linear var(--transition-time);
 

src/page/figure/figure.scss

@@ -2,7 +2,6 @@
 
 .figure-container {
   box-shadow: var(--inset-shadow);
-  transition: box-shadow var(--transition-time);
 
   position: relative;
   cursor: pointer;

src/page/header/header.scss

@@ -11,7 +11,7 @@
       outline: var(--very-light-text-color) solid var(--line-width);
     }
 
-    $img-size: 125px;
+    $img-size: 11rem;
     > .profile-picture {
       @include square($img-size);
       margin: auto;
@@ -24,7 +24,7 @@
   }
 
   @include on-large-screen {
-    $img-size: 190px;
+    $img-size: 12.5rem;
 
     width: var(--body-width);
     margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
@@ -44,9 +44,13 @@
         @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
         box-sizing: content-box;
         float: left;
-        margin: 0 0.75ex 0.5ex 0;
+        margin: 0 0.75ex 0.2ex 0;
       }
     }
+
+    > p {
+      text-align: justify;
+    }
   }
 
   ::selection {
@@ -82,7 +86,6 @@
   }
 
   > p {
-    text-align: justify;
     margin-top: var(--line-height);
   }
 

src/page/header/header.ts

@@ -32,7 +32,7 @@ export class Header extends PageElement {
         {
           image,
           alt: imageAltText,
-          sizes: '(max-width: 924px) 125px, 190px',
+          sizes: '(max-width: 924px) 11rem, 12.5rem',
         },
         imageViewer
       )

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

@@ -26,6 +26,7 @@
   > .line-container {
     position: relative;
     @include q-dependent-line-container(33%);
+    transform: translate3d(0, 0, 0); // fix visual glitches in webkit
 
     > .line {
       &,
@@ -64,39 +65,6 @@
     }
   }
 
-  @include on-large-screen {
-    &:first-of-type > .line-container > .line {
-      border-radius: 100px 100px 0 0;
-    }
-
-    &:last-of-type > .line-container > .line:before {
-      border-radius: 0 0 100px 100px;
-    }
-
-    > .line-container {
-      min-width: 160px;
-    }
-
-    &:not(:first-of-type) > .card {
-      margin-top: var(--large-margin);
-    }
-  }
-
-  @include on-small-screen {
-    flex-direction: column;
-    align-items: center;
-
-    > .line-container {
-      @include q-dependent-line-container(50%);
-      height: 150px;
-      min-width: 64%;
-
-      > .date {
-        transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
-      }
-    }
-  }
-
   > .card {
     @include blurred-background();
     box-shadow: var(--shadow);
@@ -146,7 +114,6 @@
         display: flex;
         justify-content: center;
         border-top: $border-width solid var(--normal-text-color);
-        transition: border-color var(--transition-time);
 
         margin: 0;
         padding: 0;
@@ -157,10 +124,42 @@
 
           &:not(:last-child) {
             border-right: $border-width solid var(--normal-text-color);
-            transition: border-color var(--transition-time);
           }
         }
       }
     }
   }
+
+  @include on-large-screen {
+    &:first-of-type > .line-container > .line {
+      border-radius: 100px 100px 0 0;
+    }
+
+    &:last-of-type > .line-container > .line:before {
+      border-radius: 0 0 100px 100px;
+    }
+
+    > .line-container {
+      min-width: 10rem;
+    }
+
+    &:not(:first-of-type) > .card {
+      margin-top: var(--large-margin);
+    }
+  }
+
+  @include on-small-screen {
+    flex-direction: column;
+    align-items: center;
+
+    > .line-container {
+      @include q-dependent-line-container(50%);
+      height: 150px;
+      min-width: 64%;
+
+      > .date {
+        transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
+      }
+    }
+  }
 }

src/page/up-arrow-button/up-arrow-button.scss

@@ -13,7 +13,7 @@
   position: fixed;
   bottom: var(--small-margin);
   right: var(--normal-margin);
-  padding: 4px;
+  padding: 0.25rem;
 
   &:hover {
     transform: scale(1.1);

src/style/mixins.scss

@@ -20,13 +20,6 @@ $breakpoint-width: 700px !default;
   }
 }
 
-@mixin zoom($q) {
-  transform: scale($q);
-  transform-origin: top center;
-  height: math.div(100%, $q);
-  margin: 0 (0.5 - math.div(0.5, $q)) * 100%;
-}
-
 @mixin image-button($icon-size) {
   display: block;
   box-sizing: content-box;
@@ -96,7 +89,6 @@ $breakpoint-width: 700px !default;
   font: 400 3rem 'Comfortaa', sans-serif;
   color: var(--normal-text-color);
   line-height: 1;
-  transition: color var(--transition-time);
 
   @include on-small-screen {
     font-size: 3rem;
@@ -108,7 +100,6 @@ $breakpoint-width: 700px !default;
   font: 400 1.75rem 'Comfortaa', sans-serif;
   color: var(--normal-text-color);
   hyphens: auto;
-  transition: color var(--transition-time);
 }
 
 @mixin main-font() {
@@ -116,7 +107,6 @@ $breakpoint-width: 700px !default;
   color: var(--normal-text-color);
   line-height: 1.8;
   hyphens: auto;
-  transition: color var(--transition-time);
 }
 
 @mixin special-text-font() {
@@ -124,7 +114,6 @@ $breakpoint-width: 700px !default;
   color: var(--special-text-color);
   hyphens: auto;
   font-style: italic;
-  transition: color var(--transition-time);
 }
 
 @mixin link {

src/style/vars.scss

@@ -4,7 +4,7 @@
   --transition-time: 200ms;
   --transition-time-long: 300ms;
   --line-width: 4px;
-  --line-height: 18px;
+  --line-height: 1.125rem;
   --accent-color: #b7455e;
   --sun-color: #f7f78c;
   --very-light-text-color: #ffffff;
@@ -15,31 +15,22 @@
   --blur-radius: 16px;
   --special-text-color: var(--accent-color);
   --inset-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.2);
-}
+  --border-radius: 0.85rem;
 
-@include on-large-screen {
+  --large-margin: 4.6rem;
-  :root {
+  --normal-margin: 2.8rem;
-    --border-radius: 15px;
+  --small-margin: 1.4rem;
-    --large-margin: 80px;
+  --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);
-    --normal-margin: 45px;
+  --icon-size: 2.8rem;
-    --small-margin: 25px;
+  --large-icon-size: 3.75rem;
-    --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);
+  --body-width: min(80%, 60rem);
-    --icon-size: 45px;
-    --large-icon-size: 60px;
-    --body-width: min(80%, 900px);
-  }
 }
 
 @include on-small-screen {
   :root {
-    --border-radius: 10px;
-    --large-margin: 60px;
-    --normal-margin: 30px;
-    --small-margin: 15px;
-    --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.125);
-    --icon-size: 35px;
-    --large-icon-size: 55px;
     --body-width: 90%;
+    --large-margin: 2.8rem;
+    --normal-margin: 2rem;
   }
 }
 
@@ -48,7 +39,6 @@
   --normal-text-color: #ffffff;
   --card-color: #263551;
   --blurred-card-color: #212f4a77;
-  --blur-radius: 30px;
   --special-text-color: #ffffff;
   --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.5);
 }

static/icons/loading.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
   <g transform="rotate(0 50 50)">
     <rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
       <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>