Remove zoom, improve performance and style

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