Tweak font size and fix font scaling in Safari

Safari does not resize the text as the viewport is resized. This hack
gets around that by forcing a repaint on every frame. This does not seem
to impact the browsers CPU usage at all.

One interesting issue is that Safari snaps the font sizes to the
nearest pixel size, so the font sizes tend to jump around a little,
rather than scaling smoothly like Firefox/Chrome.

assets/sass/components/_logo.scss

@@ -26,55 +26,54 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   .logo__color {
     animation-duration: 0.6s;
     animation-iteration-count: infinite;
+    animation-timing-function: linear;
   }
   .logo__color_1 {
     animation-name: cycle_color_1;
-    fill: $_color_3;
   }
   .logo__color_2 {
     animation-name: cycle_color_2;
-    fill: $_color_4;
   }
   .logo__color_3 {
     animation-name: cycle_color_3;
-    fill: $_color_1;
   }
   .logo__color_4 {
     animation-name: cycle_color_4;
-    fill: $_color_2;
   }
 }
 
-@keyframes cycle_color_1 {
-  from { fill: $_color_1; }
-  25%  { fill: $_color_2; }
-  50%  { fill: $_color_3; }
-  75%  { fill: $_color_4; }
-  to   { fill: $_color_1; }
-}
+@media (prefers-color-scheme: light) {
+  @keyframes cycle_color_1 {
+    0%,
+    100% { fill: $_color_1; }
+    25%  { fill: $_color_2; }
+    50%  { fill: $_color_3; }
+    75%  { fill: $_color_4; }
+  }
 
-@keyframes cycle_color_2 {
-  from { fill: $_color_2; }
-  25%  { fill: $_color_3; }
-  50%  { fill: $_color_4; }
-  75%  { fill: $_color_1; }
-  to   { fill: $_color_2; }
-}
+  @keyframes cycle_color_2 {
+    0%,
+    100% { fill: $_color_2; }
+    25%  { fill: $_color_3; }
+    50%  { fill: $_color_4; }
+    75%  { fill: $_color_1; }
+  }
 
-@keyframes cycle_color_3 {
-  from { fill: $_color_3; }
-  25%  { fill: $_color_4; }
-  50%  { fill: $_color_1; }
-  75%  { fill: $_color_2; }
-  to   { fill: $_color_3; }
-}
+  @keyframes cycle_color_3 {
+    0,
+    100% { fill: $_color_3; }
+    25%  { fill: $_color_4; }
+    50%  { fill: $_color_1; }
+    75%  { fill: $_color_2; }
+  }
 
-@keyframes cycle_color_4 {
-  from { fill: $_color_4; }
-  25%  { fill: $_color_1; }
-  50%  { fill: $_color_2; }
-  75%  { fill: $_color_3; }
-  to   { fill: $_color_4; }
+  @keyframes cycle_color_4 {
+    0%,
+    100% { fill: $_color_4; }
+    25%  { fill: $_color_1; }
+    50%  { fill: $_color_2; }
+    75%  { fill: $_color_3; }
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -84,34 +83,34 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   .logo__color_4 { fill: $_color_4_dark; }
 
   @keyframes cycle_color_1 {
-    from { fill: $_color_1_dark; }
+    0%,
+    100% { fill: $_color_1_dark; }
     25%  { fill: $_color_2_dark; }
     50%  { fill: $_color_3_dark; }
     75%  { fill: $_color_4_dark; }
-    to   { fill: $_color_1_dark; }
   }
 
   @keyframes cycle_color_2 {
-    from { fill: $_color_2_dark; }
+    0%,
+    100% { fill: $_color_2_dark; }
     25%  { fill: $_color_3_dark; }
     50%  { fill: $_color_4_dark; }
     75%  { fill: $_color_1_dark; }
-    to   { fill: $_color_2_dark; }
   }
 
   @keyframes cycle_color_3 {
-    from { fill: $_color_3_dark; }
+    0%,
+    100% { fill: $_color_3_dark; }
     25%  { fill: $_color_4_dark; }
     50%  { fill: $_color_1_dark; }
     75%  { fill: $_color_2_dark; }
-    to   { fill: $_color_3_dark; }
   }
 
   @keyframes cycle_color_4 {
-    from { fill: $_color_4_dark; }
+    0%,
+    100% { fill: $_color_4_dark; }
     25%  { fill: $_color_1_dark; }
     50%  { fill: $_color_2_dark; }
     75%  { fill: $_color_3_dark; }
-    to   { fill: $_color_4_dark; }
   }
 }

assets/sass/elements/_html.scss

@@ -2,7 +2,7 @@ html {
   background-color: $background-color;
   color: $text-color;
   font-family: $body-font-family;
-  font-size: calc(0.85vmin + 13px);
+  font-size: calc(1vmin + 13px);
   font-style: normal;
   font-weight: 300;
   line-height: 1.4;
@@ -12,3 +12,13 @@ html {
     color: $text-color-dark;
   }
 }
+
+_:default:not(:root:root),
+html {
+  animation: webkitfix 1s forwards infinite;
+}
+@-webkit-keyframes webkitfix {
+  100% {
+    z-index: auto;
+  }
+}

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -349,7 +349,7 @@ html {
   background-color: #fff;
   color: #333;
   font-family: "Mercury SSm A", "Mercury SSm B", serif;
-  font-size: calc(0.85vmin + 13px);
+  font-size: calc(1vmin + 13px);
   font-style: normal;
   font-weight: 300;
   line-height: 1.4; }
@@ -358,6 +358,14 @@ html {
       background-color: #282828;
       color: #ddd; } }
 
+_:default:not(:root:root),
+html {
+  animation: webkitfix 1s forwards infinite; }
+
+@-webkit-keyframes webkitfix {
+  100% {
+    z-index: auto; } }
+
 pre {
   overflow: auto;
   background: black;
@@ -472,75 +480,66 @@ main {
 .logo__link:hover .logo__color,
 .logo__link:focus .logo__color {
   animation-duration: 0.6s;
-  animation-iteration-count: infinite; }
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; }
 
 .logo__link:hover .logo__color_1,
 .logo__link:focus .logo__color_1 {
-  animation-name: cycle_color_1;
-  fill: #00a9ff; }
+  animation-name: cycle_color_1; }
 
 .logo__link:hover .logo__color_2,
 .logo__link:focus .logo__color_2 {
-  animation-name: cycle_color_2;
-  fill: #b346e2; }
+  animation-name: cycle_color_2; }
 
 .logo__link:hover .logo__color_3,
 .logo__link:focus .logo__color_3 {
-  animation-name: cycle_color_3;
-  fill: #ff6800; }
+  animation-name: cycle_color_3; }
 
 .logo__link:hover .logo__color_4,
 .logo__link:focus .logo__color_4 {
-  animation-name: cycle_color_4;
-  fill: #e8ff00; }
+  animation-name: cycle_color_4; }
 
-@keyframes cycle_color_1 {
-  from {
-    fill: #ff6800; }
-  25% {
-    fill: #e8ff00; }
-  50% {
-    fill: #00a9ff; }
-  75% {
-    fill: #b346e2; }
-  to {
-    fill: #ff6800; } }
-
-@keyframes cycle_color_2 {
-  from {
-    fill: #e8ff00; }
-  25% {
-    fill: #00a9ff; }
-  50% {
-    fill: #b346e2; }
-  75% {
-    fill: #ff6800; }
-  to {
-    fill: #e8ff00; } }
-
-@keyframes cycle_color_3 {
-  from {
-    fill: #00a9ff; }
-  25% {
-    fill: #b346e2; }
-  50% {
-    fill: #ff6800; }
-  75% {
-    fill: #e8ff00; }
-  to {
-    fill: #00a9ff; } }
-
-@keyframes cycle_color_4 {
-  from {
-    fill: #b346e2; }
-  25% {
-    fill: #ff6800; }
-  50% {
-    fill: #e8ff00; }
-  75% {
-    fill: #00a9ff; }
-  to {
-    fill: #b346e2; } }
+@media (prefers-color-scheme: light) {
+  @keyframes cycle_color_1 {
+    0%,
+    100% {
+      fill: #ff6800; }
+    25% {
+      fill: #e8ff00; }
+    50% {
+      fill: #00a9ff; }
+    75% {
+      fill: #b346e2; } }
+  @keyframes cycle_color_2 {
+    0%,
+    100% {
+      fill: #e8ff00; }
+    25% {
+      fill: #00a9ff; }
+    50% {
+      fill: #b346e2; }
+    75% {
+      fill: #ff6800; } }
+  @keyframes cycle_color_3 {
+    0,
+    100% {
+      fill: #00a9ff; }
+    25% {
+      fill: #b346e2; }
+    50% {
+      fill: #ff6800; }
+    75% {
+      fill: #e8ff00; } }
+  @keyframes cycle_color_4 {
+    0%,
+    100% {
+      fill: #b346e2; }
+    25% {
+      fill: #ff6800; }
+    50% {
+      fill: #e8ff00; }
+    75% {
+      fill: #00a9ff; } } }
 
 @media (prefers-color-scheme: dark) {
   .logo__color_1 {
@@ -552,46 +551,42 @@ main {
   .logo__color_4 {
     fill: #a861c7; }
   @keyframes cycle_color_1 {
-    from {
+    0%,
+    100% {
       fill: #df6e20; }
     25% {
       fill: #cedf20; }
     50% {
       fill: #209fdf; }
     75% {
-      fill: #a861c7; }
-    to {
-      fill: #df6e20; } }
+      fill: #a861c7; } }
   @keyframes cycle_color_2 {
-    from {
+    0%,
+    100% {
       fill: #cedf20; }
     25% {
       fill: #209fdf; }
     50% {
       fill: #a861c7; }
     75% {
-      fill: #df6e20; }
-    to {
-      fill: #cedf20; } }
+      fill: #df6e20; } }
   @keyframes cycle_color_3 {
-    from {
+    0%,
+    100% {
       fill: #209fdf; }
     25% {
       fill: #a861c7; }
     50% {
       fill: #df6e20; }
     75% {
-      fill: #cedf20; }
-    to {
-      fill: #209fdf; } }
+      fill: #cedf20; } }
   @keyframes cycle_color_4 {
-    from {
+    0%,
+    100% {
       fill: #a861c7; }
     25% {
       fill: #df6e20; }
     50% {
       fill: #cedf20; }
     75% {
-      fill: #209fdf; }
-    to {
-      fill: #a861c7; } } }
+      fill: #209fdf; } } }