assets/sass/components/_logo.scss

@@ -26,54 +26,55 @@ $_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;
   }
 }
 
-@media (prefers-color-scheme: light) {
-  @keyframes cycle_color_1 {
-    0%,
-    100% { fill: $_color_1; }
+@keyframes cycle_color_1 {
+  from { fill: $_color_1; }
   25%  { fill: $_color_2; }
   50%  { fill: $_color_3; }
   75%  { fill: $_color_4; }
-  }
+  to   { fill: $_color_1; }
+}
 
-  @keyframes cycle_color_2 {
-    0%,
-    100% { fill: $_color_2; }
+@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_3 {
-    0,
-    100% { fill: $_color_3; }
+@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_4 {
-    0%,
-    100% { fill: $_color_4; }
+@keyframes cycle_color_4 {
+  from { fill: $_color_4; }
   25%  { fill: $_color_1; }
   50%  { fill: $_color_2; }
   75%  { fill: $_color_3; }
-  }
+  to   { fill: $_color_4; }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -83,34 +84,34 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   .logo__color_4 { fill: $_color_4_dark; }
 
   @keyframes cycle_color_1 {
-    0%,
-    100% { fill: $_color_1_dark; }
+    from { 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 {
-    0%,
-    100% { fill: $_color_2_dark; }
+    from { 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 {
-    0%,
-    100% { fill: $_color_3_dark; }
+    from { 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 {
-    0%,
-    100% { fill: $_color_4_dark; }
+    from { 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(1vmin + 13px);
+  font-size: calc(0.85vmin + 13px);
   font-style: normal;
   font-weight: 300;
   line-height: 1.4;
@@ -12,13 +12,3 @@ 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(1vmin + 13px);
+  font-size: calc(0.85vmin + 13px);
   font-style: normal;
   font-weight: 300;
   line-height: 1.4; }
@@ -358,14 +358,6 @@ 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;
@@ -480,66 +472,75 @@ main {
 .logo__link:hover .logo__color,
 .logo__link:focus .logo__color {
   animation-duration: 0.6s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear; }
+  animation-iteration-count: infinite; }
 
 .logo__link:hover .logo__color_1,
 .logo__link:focus .logo__color_1 {
-  animation-name: cycle_color_1; }
+  animation-name: cycle_color_1;
+  fill: #00a9ff; }
 
 .logo__link:hover .logo__color_2,
 .logo__link:focus .logo__color_2 {
-  animation-name: cycle_color_2; }
+  animation-name: cycle_color_2;
+  fill: #b346e2; }
 
 .logo__link:hover .logo__color_3,
 .logo__link:focus .logo__color_3 {
-  animation-name: cycle_color_3; }
+  animation-name: cycle_color_3;
+  fill: #ff6800; }
 
 .logo__link:hover .logo__color_4,
 .logo__link:focus .logo__color_4 {
-  animation-name: cycle_color_4; }
+  animation-name: cycle_color_4;
+  fill: #e8ff00; }
 
-@media (prefers-color-scheme: light) {
-  @keyframes cycle_color_1 {
-    0%,
-    100% {
+@keyframes cycle_color_1 {
+  from {
     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% {
+  to {
     fill: #ff6800; } }
-  @keyframes cycle_color_3 {
-    0,
-    100% {
+
+@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; } }
-  @keyframes cycle_color_4 {
-    0%,
-    100% {
+    fill: #e8ff00; }
+  to {
+    fill: #00a9ff; } }
+
+@keyframes cycle_color_4 {
+  from {
     fill: #b346e2; }
   25% {
     fill: #ff6800; }
   50% {
     fill: #e8ff00; }
   75% {
-      fill: #00a9ff; } } }
+    fill: #00a9ff; }
+  to {
+    fill: #b346e2; } }
 
 @media (prefers-color-scheme: dark) {
   .logo__color_1 {
@@ -551,42 +552,46 @@ main {
   .logo__color_4 {
     fill: #a861c7; }
   @keyframes cycle_color_1 {
-    0%,
-    100% {
+    from {
       fill: #df6e20; }
     25% {
       fill: #cedf20; }
     50% {
       fill: #209fdf; }
     75% {
-      fill: #a861c7; } }
-  @keyframes cycle_color_2 {
-    0%,
-    100% {
-      fill: #cedf20; }
-    25% {
-      fill: #209fdf; }
-    50% {
       fill: #a861c7; }
-    75% {
+    to {
       fill: #df6e20; } }
+  @keyframes cycle_color_2 {
+    from {
+      fill: #cedf20; }
+    25% {
+      fill: #209fdf; }
+    50% {
+      fill: #a861c7; }
+    75% {
+      fill: #df6e20; }
+    to {
+      fill: #cedf20; } }
   @keyframes cycle_color_3 {
-    0%,
-    100% {
+    from {
       fill: #209fdf; }
     25% {
       fill: #a861c7; }
     50% {
       fill: #df6e20; }
     75% {
-      fill: #cedf20; } }
+      fill: #cedf20; }
+    to {
+      fill: #209fdf; } }
   @keyframes cycle_color_4 {
-    0%,
-    100% {
+    from {
       fill: #a861c7; }
     25% {
       fill: #df6e20; }
     50% {
       fill: #cedf20; }
     75% {
-      fill: #209fdf; } } }
+      fill: #209fdf; }
+    to {
+      fill: #a861c7; } } }