diff --git a/assets/sass/components/_logo.scss b/assets/sass/components/_logo.scss
index 1711eedd..a7377b7a 100644
--- a/assets/sass/components/_logo.scss
+++ b/assets/sass/components/_logo.scss
@@ -1,14 +1,28 @@
$_desaturate_amount: 10%;
-$_color_1: #f37001;
-$_color_2: #b8d900;
-$_color_3: #00a9ff;
-$_color_4: #a95ed5;
+$_color_1: hsl(28, 100%, 48%);
+$_color_2: hsl(69, 100%, 43%);
+$_color_3: hsl(200, 100%, 50%);
+$_color_4: hsl(278, 100%, 60%);
-$_color_1_dark: desaturate($_color_1, $_desaturate_amount);
-$_color_2_dark: desaturate($_color_2, $_desaturate_amount);
-$_color_3_dark: desaturate($_color_3, $_desaturate_amount);
-$_color_4_dark: desaturate($_color_4, $_desaturate_amount);
+$_color_1_dark: hsl(28, 85%, 48%);
+$_color_2_dark: hsl(69, 85%, 43%);
+$_color_3_dark: hsl(200, 85%, 50%);
+$_color_4_dark: hsl(278, 85%, 60%);
+
+:root {
+ --color-1: hsl(28, 100%, 48%);
+ --color-2: hsl(69, 100%, 43%);
+ --color-3: hsl(200, 100%, 50%);
+ --color-4: hsl(278, 100%, 60%);
+
+ @media (prefers-color-scheme: dark) {
+ --color-1: hsl(28, 90%, 48%);
+ --color-2: hsl(69, 90%, 43%);
+ --color-3: hsl(200, 90%, 50%);
+ --color-4: hsl(278, 90%, 60%);
+ }
+}
.logo__wrapper {
width: 7rem;
@@ -16,101 +30,66 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
margin-bottom: 2em;
}
-.logo__color_1 { fill: $_color_1; transition: fill 200ms ease; }
-.logo__color_2 { fill: $_color_2; transition: fill 200ms ease; }
-.logo__color_3 { fill: $_color_3; transition: fill 200ms ease; }
-.logo__color_4 { fill: $_color_4; transition: fill 200ms ease; }
+.logo__color {
+ animation-duration: 0.6s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ animation-play-state: paused;
+}
+
+.logo__color_1 {
+ animation-name: cycle_color_1;
+}
+.logo__color_2 {
+ animation-name: cycle_color_2;
+}
+.logo__color_3 {
+ animation-name: cycle_color_3;
+}
+.logo__color_4 {
+ animation-name: cycle_color_4;
+}
.logo__link:hover,
.logo__link:focus {
.logo__color {
- animation-duration: 0.6s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- }
- .logo__color_1 {
- animation-name: cycle_color_1;
- }
- .logo__color_2 {
- animation-name: cycle_color_2;
- }
- .logo__color_3 {
- animation-name: cycle_color_3;
- }
- .logo__color_4 {
- animation-name: cycle_color_4;
+ animation-play-state: running;
}
}
-@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; }
- }
+.logo__color_1 { fill: var(--color-1); }
+.logo__color_2 { fill: var(--color-2); }
+.logo__color_3 { fill: var(--color-3); }
+.logo__color_4 { fill: var(--color-4); }
- @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 {
- 0,
- 100% { fill: $_color_3; }
- 25% { fill: $_color_4; }
- 50% { fill: $_color_1; }
- 75% { fill: $_color_2; }
- }
-
- @keyframes cycle_color_4 {
- 0%,
- 100% { fill: $_color_4; }
- 25% { fill: $_color_1; }
- 50% { fill: $_color_2; }
- 75% { fill: $_color_3; }
- }
+@keyframes cycle_color_1 {
+ 0%,
+ 100% { fill: var(--color-1); }
+ 25% { fill: var(--color-2); }
+ 50% { fill: var(--color-3); }
+ 75% { fill: var(--color-4); }
}
-@media (prefers-color-scheme: dark) {
- .logo__color_1 { fill: $_color_1_dark; }
- .logo__color_2 { fill: $_color_2_dark; }
- .logo__color_3 { fill: $_color_3_dark; }
- .logo__color_4 { fill: $_color_4_dark; }
-
- @keyframes cycle_color_1 {
- 0%,
- 100% { fill: $_color_1_dark; }
- 25% { fill: $_color_2_dark; }
- 50% { fill: $_color_3_dark; }
- 75% { fill: $_color_4_dark; }
- }
-
- @keyframes cycle_color_2 {
- 0%,
- 100% { fill: $_color_2_dark; }
- 25% { fill: $_color_3_dark; }
- 50% { fill: $_color_4_dark; }
- 75% { fill: $_color_1_dark; }
- }
-
- @keyframes cycle_color_3 {
- 0%,
- 100% { fill: $_color_3_dark; }
- 25% { fill: $_color_4_dark; }
- 50% { fill: $_color_1_dark; }
- 75% { fill: $_color_2_dark; }
- }
-
- @keyframes cycle_color_4 {
- 0%,
- 100% { fill: $_color_4_dark; }
- 25% { fill: $_color_1_dark; }
- 50% { fill: $_color_2_dark; }
- 75% { fill: $_color_3_dark; }
- }
+@keyframes cycle_color_2 {
+ 0%,
+ 100% { fill: var(--color-2); }
+ 25% { fill: var(--color-3); }
+ 50% { fill: var(--color-4); }
+ 75% { fill: var(--color-1); }
+}
+
+@keyframes cycle_color_3 {
+ 0%,
+ 100% { fill: var(--color-3); }
+ 25% { fill: var(--color-4); }
+ 50% { fill: var(--color-1); }
+ 75% { fill: var(--color-2); }
+}
+
+@keyframes cycle_color_4 {
+ 0%,
+ 100% { fill: var(--color-4); }
+ 25% { fill: var(--color-1); }
+ 50% { fill: var(--color-2); }
+ 75% { fill: var(--color-3); }
}
diff --git a/layouts/partials/logo.svg b/layouts/partials/logo.svg
index bbbaea18..88d9341d 100644
--- a/layouts/partials/logo.svg
+++ b/layouts/partials/logo.svg
@@ -1 +1,8 @@
-
+