3 Commits
Author SHA1 Message Date
klemek db9ecb4773 fix: preview
TS Lint / Oxlint (push) Successful in 3m42s
TS Lint / ESLint (push) Successful in 3m42s
TS Lint / TypeScript (push) Successful in 3m44s
Docker Build / build (push) Successful in 9m19s
2026-07-15 15:49:34 +02:00
klemek 51801f67f9 fix: animated background 2026-07-15 15:49:29 +02:00
klemek fe41547ced fix: better preview 2026-07-15 15:22:05 +02:00
2 changed files with 22 additions and 13 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 78 KiB

+22 -13
View File
@@ -12,27 +12,36 @@ body {
} }
.bg-hero { .bg-hero {
--size: 5vh; --size: 15vh;
--angle: 45deg; --angle: 45deg;
background: repeating-linear-gradient( background: repeating-linear-gradient(
var(--angle), var(--angle),
var(--color-base-200) calc(0 * var(--size)), var(--color-base-200) 0%,
var(--color-base-200) calc(1 * var(--size)), var(--color-base-200) 12.5%,
var(--color-secondary) calc(1 * var(--size)), var(--color-secondary) 12.5%,
var(--color-secondary) calc(2 * var(--size)), var(--color-secondary) 25%,
var(--color-base-200) calc(2 * var(--size)), var(--color-base-200) 25%,
var(--color-base-200) calc(3 * var(--size)), var(--color-base-200) 37.5%,
var(--color-accent) calc(3 * var(--size)), var(--color-accent) 37.5%,
var(--color-accent) calc(4 * var(--size)), var(--color-accent) 50%,
var(--color-base-200) calc(4 * var(--size)) 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-size: calc(4 * var(--size) / sin(var(--angle))) background-repeat: repeat;
calc(4 * var(--size) / sin(var(--angle))); background-size: calc(var(--size) / sin(var(--angle)))
calc(var(--size) / sin(var(--angle)));
animation: BackgroundAnimate 10s linear infinite reverse; animation: BackgroundAnimate 10s linear infinite reverse;
} }
@keyframes BackgroundAnimate { @keyframes BackgroundAnimate {
0% { 0% {
background-position: calc(4 * var(--size) / sin(var(--angle))) 0; background-position: calc(var(--size) / sin(var(--angle))) 0;
} }
} }