Fix compatibility and sizing

src/index.scss

@@ -37,6 +37,15 @@ a {
 html {
   height: 100%;
 
+  overflow: hidden;
+  @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);
+  }
+
   @include on-small-screen {
     font-size: 0.8rem;
   }

src/page/contact/contact.scss

@@ -18,7 +18,8 @@
   }
 
   > aside {
-    margin: var(--large-margin) auto var(--line-height) auto;
+    margin: var(--large-margin) auto 0 auto;
+    padding-bottom: var(--line-height); // margin-bottom doesn't work in Firefox
 
     > p {
       @include special-text-font();

src/page/header/header.html.ts

@@ -11,9 +11,10 @@ export const generate = ({
   photo: html;
 }): html => `
   <header id="about">
-    ${photo}
+    <div class="photo-container">
-
+      ${photo}
-    <div class="placeholder"></div>
+      <div class="placeholder"></div>
+    </div>
 
     <h1>${name}</h1>
 

src/page/header/header.scss

@@ -2,53 +2,23 @@
 @use '../../style/mixins' as *;
 
 #about {
-  text-align: center;
   box-shadow: var(--shadow);
   padding: var(--normal-margin);
   background-color: var(--accent-color);
-  font-size: 0;
-
-  ::selection {
-    background-color: var(--very-light-text-color);
-    color: var(--accent-color);
-  }
-
-  h1,
-  .placeholder {
-    @include title-font();
-  }
-
-  $img-size: 125px;
-  .image {
-    @include square($img-size);
-    border-radius: 100%;
-    box-shadow: var(--shadow);
-    margin: auto;
-  }
-
-  p {
-    text-align: justify;
-  }
-
-  h1,
-  p,
-  a {
-    color: var(--very-light-text-color);
-    margin-top: var(--line-height);
-
-    :focus:not(:hover) {
-      outline: var(--very-light-text-color) solid var(--line-width);
-    }
-  }
-
-  a {
-    border-bottom: 2px solid var(--very-light-text-color);
-  }
 
   @include on-small-screen {
     :focus:not(:hover) {
       outline: var(--very-light-text-color) solid var(--line-width);
     }
+
+    $img-size: 125px;
+    > .photo-container > .image {
+      @include square($img-size);
+    }
+
+    > h1 {
+      text-align: center;
+    }
   }
 
   @include on-large-screen {
@@ -57,27 +27,65 @@
     width: var(--body-width);
     margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
       auto;
-    position: relative;
     border-radius: var(--border-radius);
 
-    .image {
+    > .photo-container {
-      @include square($img-size);
+      position: relative;
-      position: absolute;
+
-      left: 0;
+      > .image {
-      top: 0;
+        @include square($img-size);
-      transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3));
+        position: absolute;
+        left: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
+        top: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
+      }
+
+      > .placeholder {
+        @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
+        box-sizing: content-box;
+        float: left;
+        margin: 0 0.75ex 0.5ex 0;
+      }
     }
 
-    .placeholder {
+    > h1 {
-      @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
-      box-sizing: content-box;
-      float: left;
-      margin: 0 0.75ex 0.5ex 0;
-    }
-
-    h1 {
-      text-align: left;
       margin-top: 0;
     }
   }
+
+  ::selection {
+    background-color: var(--very-light-text-color);
+    color: var(--accent-color);
+  }
+
+  > h1,
+  > .photo-container > .placeholder {
+    @include title-font();
+  }
+
+  > .photo-container {
+    > .image {
+      border-radius: 100%;
+      box-shadow: var(--shadow);
+      margin: auto;
+    }
+  }
+
+  > h1,
+  > p,
+  a {
+    color: var(--very-light-text-color);
+    margin-top: var(--line-height);
+
+    :focus:not(:hover) {
+      outline: var(--very-light-text-color) solid var(--line-width);
+    }
+  }
+
+  > p {
+    text-align: justify;
+  }
+
+  a {
+    border-bottom: 2px solid var(--very-light-text-color);
+  }
 }

src/page/header/theme-switcher/theme-switcher.scss

@@ -1,22 +1,11 @@
 @use '../../../style/mixins' as *;
 
 #theme-switcher {
-  @include on-large-screen {
-    position: absolute;
-    top: calc(-1 * var(--normal-margin));
-    left: calc(50% + 50vw);
-    transform: translateX(calc(-100% - var(--normal-margin))) translateY(-50%);
-  }
-
-  @include on-small-screen {
-    position: relative;
-    margin-top: var(--normal-margin);
-  }
-
-  background-color: var(--accent-color);
   cursor: pointer;
+  background-color: var(--accent-color);
   -webkit-appearance: none;
   -moz-appearance: none;
+  display: block;
 
   $size: var(--icon-size);
   width: calc(2 * #{$size});
@@ -27,6 +16,17 @@
   border-radius: 1000px;
   box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), inset 0 0 1px rgba(0, 0, 0, 0.4);
 
+  @include on-large-screen {
+    position: absolute;
+    top: var(--normal-margin);
+    right: var(--normal-margin);
+  }
+
+  @include on-small-screen {
+    position: relative;
+    margin: var(--normal-margin) auto 0 auto;
+  }
+
   &:before {
     // moon + sun
     @include square($icon-size);
@@ -70,7 +70,6 @@
     }
 
     &:after {
-      background-color: transparent;
       transform: translateY(-50%) translateX(calc(#{$size} * 2 - #{$icon-size}));
     }
   }

src/page/image-viewer/image-viewer.scss

@@ -15,13 +15,13 @@
     @include square(auto);
 
     @include on-large-screen {
-      max-width: 80vw;
+      max-width: 80%;
-      max-height: 80vh;
+      max-height: 80%;
     }
 
     @include on-small-screen {
-      max-width: 95vw;
+      max-width: 95%;
-      max-height: 80vh;
+      max-height: 80%;
     }
   }
 

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

@@ -12,7 +12,7 @@
 
   position: fixed;
   bottom: var(--small-margin);
-  right: var(--small-margin);
+  right: var(--normal-margin);
   padding: 4px;
 
   &:hover {

src/style/mixins.scss

@@ -1,4 +1,6 @@
-$breakpoint-width: 800px !default;
+@use 'sass:math';
+
+$breakpoint-width: 700px !default;
 
 @mixin on-small-screen() {
   @media (max-width: ($breakpoint-width - 1px)) {
@@ -18,6 +20,13 @@ $breakpoint-width: 800px !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;

src/style/vars.scss

@@ -8,7 +8,6 @@
   --accent-color: #b7455e;
   --sun-color: #f7f78c;
   --very-light-text-color: #ffffff;
-
   --background: #ffffff;
   --normal-text-color: #31343f;
   --card-color: #ffffff;
@@ -27,7 +26,7 @@
     --inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15);
     --icon-size: 45px;
     --large-icon-size: 60px;
-    --body-width: min(85%, 830px);
+    --body-width: min(80%, 830px);
   }
 }