57 lines
1.1 KiB
SCSS
57 lines
1.1 KiB
SCSS
|
@use "sass:math";
|
||
|
|
@use "sass:color";
|
||
|
|
@use "../variables" as *;
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes waltuh-gradient-anim {
|
||
|
|
$r: 6em;
|
||
|
|
$pd: math.div(2*math.$pi,10);
|
||
|
|
from {
|
||
|
|
background-position: 6em 0em;
|
||
|
|
}
|
||
|
|
@for $i from 1 through 9 {
|
||
|
|
#{$i*10}% {
|
||
|
|
background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
background-position: 6em 0em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes wipeIn {
|
||
|
|
from { clip-path: inset(0 100% 0 0); }
|
||
|
|
to { clip-path: inset(0 0 0 0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
span.waltuh-gradient {
|
||
|
|
font-weight: 600;
|
||
|
|
|
||
|
|
color: transparent;
|
||
|
|
$grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
|
||
|
|
$grad2: color.adjust($grad1, $lightness: +30%);
|
||
|
|
background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
|
||
|
|
background-size: 30vmin 30vmin;
|
||
|
|
background-clip: text;
|
||
|
|
|
||
|
|
animation: waltuh-gradient-anim 12s linear infinite,
|
||
|
|
wipeIn 0.25s ease-in;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
span.waltuh-gradient-underline {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
@extend span, .waltuh-gradient;
|
||
|
|
background-clip: unset;
|
||
|
|
border-radius: 2rem;
|
||
|
|
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0.2rem;
|
||
|
|
left: 10%;
|
||
|
|
height: 0.4rem;
|
||
|
|
width: 80%;
|
||
|
|
}
|
||
|
|
}
|