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 ed71caed26
commit 88b5dec182
2 changed files with 97 additions and 111 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; }
}
}

131
resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
View File

@ -472,75 +472,66 @@ main {
.logo__link:hover .logo__color,
.logo__link:focus .logo__color {
animation-duration: 0.6s;
animation-iteration-count: infinite; }
animation-iteration-count: infinite;
animation-timing-function: linear; }
.logo__link:hover .logo__color_1,
.logo__link:focus .logo__color_1 {
animation-name: cycle_color_1;
fill: #00a9ff; }
animation-name: cycle_color_1; }
.logo__link:hover .logo__color_2,
.logo__link:focus .logo__color_2 {
animation-name: cycle_color_2;
fill: #b346e2; }
animation-name: cycle_color_2; }
.logo__link:hover .logo__color_3,
.logo__link:focus .logo__color_3 {
animation-name: cycle_color_3;
fill: #ff6800; }
animation-name: cycle_color_3; }
.logo__link:hover .logo__color_4,
.logo__link:focus .logo__color_4 {
animation-name: cycle_color_4;
fill: #e8ff00; }
animation-name: cycle_color_4; }
@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: light) {
@keyframes cycle_color_1 {
0%,
100% {
fill: #ff6800; }
25% {
fill: #e8ff00; }
50% {
fill: #00a9ff; }
75% {
fill: #b346e2; } }
@keyframes cycle_color_2 {
0%,
100% {
fill: #e8ff00; }
25% {
fill: #00a9ff; }
50% {
fill: #b346e2; }
75% {
fill: #ff6800; } }
@keyframes cycle_color_3 {
0,
100% {
fill: #00a9ff; }
25% {
fill: #b346e2; }
50% {
fill: #ff6800; }
75% {
fill: #e8ff00; } }
@keyframes cycle_color_4 {
0%,
100% {
fill: #b346e2; }
25% {
fill: #ff6800; }
50% {
fill: #e8ff00; }
75% {
fill: #00a9ff; } } }
@media (prefers-color-scheme: dark) {
.logo__color_1 {
@ -552,46 +543,42 @@ main {
.logo__color_4 {
fill: #a861c7; }
@keyframes cycle_color_1 {
from {
0%,
100% {
fill: #df6e20; }
25% {
fill: #cedf20; }
50% {
fill: #209fdf; }
75% {
fill: #a861c7; }
to {
fill: #df6e20; } }
fill: #a861c7; } }
@keyframes cycle_color_2 {
from {
0%,
100% {
fill: #cedf20; }
25% {
fill: #209fdf; }
50% {
fill: #a861c7; }
75% {
fill: #df6e20; }
to {
fill: #cedf20; } }
fill: #df6e20; } }
@keyframes cycle_color_3 {
from {
0%,
100% {
fill: #209fdf; }
25% {
fill: #a861c7; }
50% {
fill: #df6e20; }
75% {
fill: #cedf20; }
to {
fill: #209fdf; } }
fill: #cedf20; } }
@keyframes cycle_color_4 {
from {
0%,
100% {
fill: #a861c7; }
25% {
fill: #df6e20; }
50% {
fill: #cedf20; }
75% {
fill: #209fdf; }
to {
fill: #a861c7; } } }
fill: #209fdf; } } }