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 @@
-
+
diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 5da408f1..ab930f38 100644
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -321,7 +321,6 @@ a {
color: #53a3e5; }
a:hover, a:focus {
color: #80bbec; } }
-
blockquote {
padding-left: 2rem;
border-left: 3px solid #a6a6a6;
@@ -357,7 +356,6 @@ html {
html {
background-color: #282828;
color: #ddd; } }
-
_:default:not(:root:root),
html {
animation: webkitfix 1s forwards infinite; }
@@ -420,7 +418,6 @@ img {
background-color: #353535;
border: 1px solid #666;
color: #ddd; } }
-
.search-form__icon {
left: 0.6rem;
position: absolute;
@@ -431,7 +428,6 @@ img {
@media (prefers-color-scheme: dark) {
.search-form__icon {
fill: #ddd; } }
-
.home__about,
.home__photos,
.home__blog {
@@ -496,137 +492,96 @@ img {
border-radius: 0.25rem;
width: 100%; }
+: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) {
+ :root {
+ --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;
line-height: 0;
margin-bottom: 2em; }
+.logo__color {
+ animation-duration: 0.6s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ animation-play-state: paused; }
+
.logo__color_1 {
- fill: #f37001;
- transition: fill 200ms ease; }
+ animation-name: cycle_color_1; }
.logo__color_2 {
- fill: #b8d900;
- transition: fill 200ms ease; }
+ animation-name: cycle_color_2; }
.logo__color_3 {
- fill: #00a9ff;
- transition: fill 200ms ease; }
+ animation-name: cycle_color_3; }
.logo__color_4 {
- fill: #a95ed5;
- transition: fill 200ms ease; }
+ animation-name: cycle_color_4; }
.logo__link:hover .logo__color,
.logo__link:focus .logo__color {
- animation-duration: 0.6s;
- animation-iteration-count: infinite;
- animation-timing-function: linear; }
+ animation-play-state: running; }
-.logo__link:hover .logo__color_1,
-.logo__link:focus .logo__color_1 {
- animation-name: cycle_color_1; }
+.logo__color_1 {
+ fill: var(--color-1); }
-.logo__link:hover .logo__color_2,
-.logo__link:focus .logo__color_2 {
- animation-name: cycle_color_2; }
+.logo__color_2 {
+ fill: var(--color-2); }
-.logo__link:hover .logo__color_3,
-.logo__link:focus .logo__color_3 {
- animation-name: cycle_color_3; }
+.logo__color_3 {
+ fill: var(--color-3); }
-.logo__link:hover .logo__color_4,
-.logo__link:focus .logo__color_4 {
- animation-name: cycle_color_4; }
+.logo__color_4 {
+ fill: var(--color-4); }
-@media (prefers-color-scheme: light) {
- @keyframes cycle_color_1 {
- 0%,
- 100% {
- fill: #f37001; }
- 25% {
- fill: #b8d900; }
- 50% {
- fill: #00a9ff; }
- 75% {
- fill: #a95ed5; } }
- @keyframes cycle_color_2 {
- 0%,
- 100% {
- fill: #b8d900; }
- 25% {
- fill: #00a9ff; }
- 50% {
- fill: #a95ed5; }
- 75% {
- fill: #f37001; } }
- @keyframes cycle_color_3 {
- 0,
- 100% {
- fill: #00a9ff; }
- 25% {
- fill: #a95ed5; }
- 50% {
- fill: #f37001; }
- 75% {
- fill: #b8d900; } }
- @keyframes cycle_color_4 {
- 0%,
- 100% {
- fill: #a95ed5; }
- 25% {
- fill: #f37001; }
- 50% {
- fill: #b8d900; }
- 75% {
- fill: #00a9ff; } } }
+@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: #e7710d; }
- .logo__color_2 {
- fill: #b0ce0b; }
- .logo__color_3 {
- fill: #0da5f2; }
- .logo__color_4 {
- fill: #a668cb; }
- @keyframes cycle_color_1 {
- 0%,
- 100% {
- fill: #e7710d; }
- 25% {
- fill: #b0ce0b; }
- 50% {
- fill: #0da5f2; }
- 75% {
- fill: #a668cb; } }
- @keyframes cycle_color_2 {
- 0%,
- 100% {
- fill: #b0ce0b; }
- 25% {
- fill: #0da5f2; }
- 50% {
- fill: #a668cb; }
- 75% {
- fill: #e7710d; } }
- @keyframes cycle_color_3 {
- 0%,
- 100% {
- fill: #0da5f2; }
- 25% {
- fill: #a668cb; }
- 50% {
- fill: #e7710d; }
- 75% {
- fill: #b0ce0b; } }
- @keyframes cycle_color_4 {
- 0%,
- 100% {
- fill: #a668cb; }
- 25% {
- fill: #e7710d; }
- 50% {
- fill: #b0ce0b; }
- 75% {
- fill: #0da5f2; } } }
+@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); } }