danbarber/danbarber.me.hugo
1
0
Fork 0
mirror of https://github.com/danbee/danbarber.me.hugo.git synced 2025-03-04 08:59:18 +00:00
Code Issues Releases Wiki Activity

Tidy up colour cycling

Browse Source
This commit is contained in:
Daniel Barber 2019-10-20 23:05:07 -04:00
parent b6ef4e861d
commit 8d4daff253
1 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
assets/sass/components/_logo.scss
View File

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