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 {
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;
}
}
@keyframes cycle_color_1 {
from { fill: $_color_1; }
25% { fill: $_color_2; }
50% { fill: $_color_3; }
75% { fill: $_color_4; }
to { fill: $_color_1; }
}
@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; }
}
@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_2 {
0%,
100% { fill: $_color_2; }
25% { fill: $_color_3; }
50% { fill: $_color_4; }
75% { fill: $_color_1; }
}
@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_3 {
0,
100% { fill: $_color_3; }
25% { fill: $_color_4; }
50% { fill: $_color_1; }
75% { fill: $_color_2; }
}
@keyframes cycle_color_4 {
from { fill: $_color_4; }
25% { fill: $_color_1; }
50% { fill: $_color_2; }
75% { fill: $_color_3; }
to { fill: $_color_4; }
@keyframes cycle_color_4 {
0%,
100% { fill: $_color_4; }
25% { fill: $_color_1; }
50% { fill: $_color_2; }
75% { fill: $_color_3; }
}
}
@media (prefers-color-scheme: dark) {
@ -84,34 +83,34 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
.logo__color_4 { fill: $_color_4_dark; }
@keyframes cycle_color_1 {
from { fill: $_color_1_dark; }
0%,
100% { 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; }
0%,
100% { 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; }
0%,
100% { 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; }
0%,
100% { fill: $_color_4_dark; }
25% { fill: $_color_1_dark; }
50% { fill: $_color_2_dark; }
75% { fill: $_color_3_dark; }
to { fill: $_color_4_dark; }
}
}