48 lines
1.4 KiB
CSS
48 lines
1.4 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: 15vh;
|
|
--angle: 45deg;
|
|
background: repeating-linear-gradient(
|
|
var(--angle),
|
|
var(--color-base-200) 0%,
|
|
var(--color-base-200) 12.5%,
|
|
var(--color-secondary) 12.5%,
|
|
var(--color-secondary) 25%,
|
|
var(--color-base-200) 25%,
|
|
var(--color-base-200) 37.5%,
|
|
var(--color-accent) 37.5%,
|
|
var(--color-accent) 50%,
|
|
var(--color-base-200) 50%,
|
|
var(--color-base-200) 62.5%,
|
|
var(--color-secondary) 62.5%,
|
|
var(--color-secondary) 75%,
|
|
var(--color-base-200) 75%,
|
|
var(--color-base-200) 87.5%,
|
|
var(--color-accent) 87.5%,
|
|
var(--color-accent) 100%,
|
|
var(--color-base-200) 100%
|
|
);
|
|
background-repeat: repeat;
|
|
background-size: calc(var(--size) / sin(var(--angle)))
|
|
calc(var(--size) / sin(var(--angle)));
|
|
animation: BackgroundAnimate 10s linear infinite reverse;
|
|
}
|
|
|
|
@keyframes BackgroundAnimate {
|
|
0% {
|
|
background-position: calc(var(--size) / sin(var(--angle))) 0;
|
|
}
|
|
}
|