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

Use slow cycling logo

Browse Source
This commit is contained in:
Daniel Barber 2023-07-07 17:04:02 -05:00
parent 36db25873c
commit 26a141dfb0
1 changed files with 126 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
assets/css/components/_logo.scss
View File

@ -1,40 +1,36 @@
$_desaturate_amount: 10%;
$_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: 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 { :root {
--color-1: hsl(28, 100%, 48%); --color-1: hsl(28, 100%, 48%);
--color-2: hsl(69, 100%, 43%); --color-2: hsl(41, 100%, 50%);
--color-3: hsl(200, 100%, 50%); --color-3: hsl(69, 100%, 43%);
--color-4: hsl(278, 100%, 60%); --color-4: hsl(103, 80%, 46%);
--color-5: hsl(200, 100%, 50%);
--color-6: hsl(234, 100%, 68%);
--color-7: hsl(278, 100%, 63%);
--color-8: hsl(335, 85%, 63%);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--color-1: hsl(28, 90%, 48%); --color-1: hsl(28, 90%, 48%);
--color-2: hsl(69, 90%, 43%); --color-2: hsl(41, 90%, 50%);
--color-3: hsl(200, 90%, 50%); --color-3: hsl(69, 90%, 43%);
--color-4: hsl(278, 90%, 60%); --color-4: hsl(103, 70%, 46%);
--color-5: hsl(200, 90%, 50%);
--color-6: hsl(234, 90%, 68%);
--color-7: hsl(278, 90%, 60%);
--color-8: hsl(335, 80%, 63%);
} }
} }
.logo__wrapper { .logo__wrapper {
width: 7rem; width: 10rem;
line-height: 0; line-height: 0;
margin-bottom: 2em; padding-bottom: 0.5em;
} }
.logo__color { .logo__color {
animation-duration: 0.6s; animation-duration: 30s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: ease-in-out;
animation-play-state: paused; animation-play-state: playing;
} }
.logo__color_1 { .logo__color_1 {
@ -50,46 +46,127 @@ $_color_4_dark: hsl(278, 85%, 60%);
animation-name: cycle_color_4; animation-name: cycle_color_4;
} }
.logo__link:hover, .logo__color_1 {
.logo__link:focus { fill: var(--color-1);
.logo__color { }
animation-play-state: running; .logo__color_2 {
} fill: var(--color-3);
}
.logo__color_3 {
fill: var(--color-5);
}
.logo__color_4 {
fill: var(--color-7);
} }
.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_1 { @keyframes cycle_color_1 {
0%, 0%,
100% { fill: var(--color-1); } 100% {
25% { fill: var(--color-2); } fill: var(--color-1);
50% { fill: var(--color-3); } }
75% { fill: var(--color-4); } 12.5% {
fill: var(--color-2);
}
25% {
fill: var(--color-3);
}
37.5% {
fill: var(--color-4);
}
50% {
fill: var(--color-5);
}
62.5% {
fill: var(--color-6);
}
75% {
fill: var(--color-7);
}
87.5% {
fill: var(--color-8);
}
} }
@keyframes cycle_color_2 { @keyframes cycle_color_2 {
0%, 0%,
100% { fill: var(--color-2); } 100% {
25% { fill: var(--color-3); } fill: var(--color-3);
50% { fill: var(--color-4); } }
75% { fill: var(--color-1); } 12.5% {
fill: var(--color-4);
}
25% {
fill: var(--color-5);
}
37.5% {
fill: var(--color-6);
}
50% {
fill: var(--color-7);
}
62.5% {
fill: var(--color-8);
}
75% {
fill: var(--color-1);
}
87.5% {
fill: var(--color-2);
}
} }
@keyframes cycle_color_3 { @keyframes cycle_color_3 {
0%, 0%,
100% { fill: var(--color-3); } 100% {
25% { fill: var(--color-4); } fill: var(--color-5);
50% { fill: var(--color-1); } }
75% { fill: var(--color-2); } 12.5% {
fill: var(--color-6);
}
25% {
fill: var(--color-7);
}
37.5% {
fill: var(--color-8);
}
50% {
fill: var(--color-1);
}
62.5% {
fill: var(--color-2);
}
75% {
fill: var(--color-3);
}
87.5% {
fill: var(--color-4);
}
} }
@keyframes cycle_color_4 { @keyframes cycle_color_4 {
0%, 0%,
100% { fill: var(--color-4); } 100% {
25% { fill: var(--color-1); } fill: var(--color-7);
50% { fill: var(--color-2); } }
75% { fill: var(--color-3); } 12.5% {
fill: var(--color-8);
}
25% {
fill: var(--color-1);
}
37.5% {
fill: var(--color-2);
}
50% {
fill: var(--color-3);
}
62.5% {
fill: var(--color-4);
}
75% {
fill: var(--color-5);
}
87.5% {
fill: var(--color-6);
}
} }