38 lines
1.2 KiB
CSS
38 lines
1.2 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap");
|
|
@import "tailwindcss";
|
|
@plugin "daisyui" {
|
|
themes: cupcake --default;
|
|
}
|
|
|
|
body {
|
|
font-family: "Sour Gummy", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-style: normal;
|
|
font-variation-settings: "wdth" 100;
|
|
}
|
|
|
|
.bg-hero {
|
|
--size: 5vh;
|
|
--angle: 45deg;
|
|
background: repeating-linear-gradient(
|
|
var(--angle),
|
|
var(--color-base-200) calc(0 * var(--size)),
|
|
var(--color-base-200) calc(1 * var(--size)),
|
|
var(--color-secondary) calc(1 * var(--size)),
|
|
var(--color-secondary) calc(2 * var(--size)),
|
|
var(--color-base-200) calc(2 * var(--size)),
|
|
var(--color-base-200) calc(3 * var(--size)),
|
|
var(--color-accent) calc(3 * var(--size)),
|
|
var(--color-accent) calc(4 * var(--size))
|
|
);
|
|
background-size: calc(4 * var(--size) / sin(var(--angle)))
|
|
calc(4 * var(--size) / sin(var(--angle)));
|
|
animation: BackgroundAnimate 10s linear infinite reverse;
|
|
}
|
|
|
|
@keyframes BackgroundAnimate {
|
|
0% {
|
|
background-position: calc(4 * var(--size) / sin(var(--angle))) 0;
|
|
}
|
|
}
|