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

173
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 {
--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-2: hsl(41, 100%, 50%);
--color-3: hsl(69, 100%, 43%);
--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) {
--color-1: hsl(28, 90%, 48%);
--color-2: hsl(69, 90%, 43%);
--color-3: hsl(200, 90%, 50%);
--color-4: hsl(278, 90%, 60%);
--color-2: hsl(41, 90%, 50%);
--color-3: hsl(69, 90%, 43%);
--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 {
width: 7rem;
width: 10rem;
line-height: 0;
margin-bottom: 2em;
padding-bottom: 0.5em;
}
.logo__color {
animation-duration: 0.6s;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;
animation-timing-function: ease-in-out;
animation-play-state: playing;
}
.logo__color_1 {
@ -50,46 +46,127 @@ $_color_4_dark: hsl(278, 85%, 60%);
animation-name: cycle_color_4;
}
.logo__link:hover,
.logo__link:focus {
.logo__color {
animation-play-state: running;
.logo__color_1 {
fill: var(--color-1);
}
.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 {
0%,
100% { fill: var(--color-1); }
25% { fill: var(--color-2); }
50% { fill: var(--color-3); }
75% { fill: var(--color-4); }
100% {
fill: var(--color-1);
}
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 {
0%,
100% { fill: var(--color-2); }
25% { fill: var(--color-3); }
50% { fill: var(--color-4); }
75% { fill: var(--color-1); }
100% {
fill: var(--color-3);
}
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 {
0%,
100% { fill: var(--color-3); }
25% { fill: var(--color-4); }
50% { fill: var(--color-1); }
75% { fill: var(--color-2); }
100% {
fill: var(--color-5);
}
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 {
0%,
100% { fill: var(--color-4); }
25% { fill: var(--color-1); }
50% { fill: var(--color-2); }
75% { fill: var(--color-3); }
100% {
fill: var(--color-7);
}
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);
}
}