diff --git a/assets/sass/components/_logo.scss b/assets/sass/components/_logo.scss
index fa14bb3b..2661511d 100644
--- a/assets/sass/components/_logo.scss
+++ b/assets/sass/components/_logo.scss
@@ -1,4 +1,4 @@
-$_desaturate_amount: 35%;
+$_desaturate_amount: 25%;
$_color_1: #ff6800;
$_color_2: #e8ff00;
@@ -16,14 +16,102 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
margin-bottom: 1em;
}
-.logo__color_1 { fill: $_color_1; }
-.logo__color_2 { fill: $_color_2; }
-.logo__color_3 { fill: $_color_3; }
-.logo__color_4 { fill: $_color_4; }
+.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__link:hover,
+.logo__link:focus {
+ .logo__color {
+ animation-duration: 0.6s;
+ animation-iteration-count: infinite;
+ }
+ .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; }
+}
+
+@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 {
+ from { fill: $_color_3; }
+ 25% { fill: $_color_4; }
+ 50% { fill: $_color_1; }
+ 75% { fill: $_color_2; }
+ to { fill: $_color_3; }
+}
+
+@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) {
.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 {
+ 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 {
+ 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 {
+ 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 {
+ 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; }
+ }
}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d35b2f49..532bd26a 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,9 @@
diff --git a/layouts/partials/logo.svg b/layouts/partials/logo.svg
index ea186f4d..bbbaea18 100644
--- a/layouts/partials/logo.svg
+++ b/layouts/partials/logo.svg
@@ -1 +1 @@
-
+
diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 93dce30d..63f39ae9 100644
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -454,23 +454,144 @@ main {
margin-bottom: 1em; }
.logo__color_1 {
- fill: #ff6800; }
+ fill: #ff6800;
+ transition: fill 200ms ease; }
.logo__color_2 {
- fill: #e8ff00; }
+ fill: #e8ff00;
+ transition: fill 200ms ease; }
.logo__color_3 {
- fill: #00a9ff; }
+ fill: #00a9ff;
+ transition: fill 200ms ease; }
.logo__color_4 {
+ fill: #b346e2;
+ transition: fill 200ms ease; }
+
+.logo__link:hover .logo__color,
+.logo__link:focus .logo__color {
+ animation-duration: 0.6s;
+ animation-iteration-count: infinite; }
+
+.logo__link:hover .logo__color_1,
+.logo__link:focus .logo__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;
fill: #b346e2; }
+.logo__link:hover .logo__color_3,
+.logo__link:focus .logo__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;
+ fill: #e8ff00; }
+
+@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: dark) {
.logo__color_1 {
- fill: #d2702d; }
+ fill: #df6e20; }
.logo__color_2 {
- fill: #c3d22d; }
+ fill: #cedf20; }
.logo__color_3 {
- fill: #2d9ad2; }
+ fill: #209fdf; }
.logo__color_4 {
- fill: #a46bbd; } }
+ fill: #a861c7; }
+ @keyframes cycle_color_1 {
+ from {
+ fill: #df6e20; }
+ 25% {
+ fill: #cedf20; }
+ 50% {
+ fill: #209fdf; }
+ 75% {
+ fill: #a861c7; }
+ 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 {
+ from {
+ fill: #209fdf; }
+ 25% {
+ fill: #a861c7; }
+ 50% {
+ fill: #df6e20; }
+ 75% {
+ fill: #cedf20; }
+ to {
+ fill: #209fdf; } }
+ @keyframes cycle_color_4 {
+ from {
+ fill: #a861c7; }
+ 25% {
+ fill: #df6e20; }
+ 50% {
+ fill: #cedf20; }
+ 75% {
+ fill: #209fdf; }
+ to {
+ fill: #a861c7; } } }