Fix compatibility and sizing

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="placeholder"></div>
+    <div class="photo-container">
+      ${photo}
+      <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 {
-      @include square($img-size);
-      position: absolute;
-      left: 0;
-      top: 0;
-      transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3));
+    > .photo-container {
+      position: relative;
+
+      > .image {
+        @include square($img-size);
+        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 {
-      @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;
+    > h1 {
       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-height: 80vh;
+      max-width: 80%;
+      max-height: 80%;
     }
 
     @include on-small-screen {
-      max-width: 95vw;
-      max-height: 80vh;
+      max-width: 95%;
+      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 {