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 { .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; }
} }
} }

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

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