Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 17:15:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Broken ausgabe

Browse Source
This commit is contained in:
Simon Martens
2025-09-22 09:02:58 +02:00
parent 350631f6b4
commit 0307bd9c9c
11 changed files with 144 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
views/transform/site.css
View File

@@ -39,11 +39,21 @@ body::before {
/* Backdrop animation */
@keyframes backdrop-drift {
0% { transform: rotate(15deg) skew(25deg) scale(4); }
25% { transform: rotate(20deg) skew(30deg) scale(4.1); }
50% { transform: rotate(10deg) skew(20deg) scale(3.9); }
75% { transform: rotate(18deg) skew(28deg) scale(4.05); }
100% { transform: rotate(15deg) skew(25deg) scale(4); }
0% {
transform: rotate(15deg) skew(25deg) scale(4);
}
25% {
transform: rotate(20deg) skew(30deg) scale(4.1);
}
50% {
transform: rotate(10deg) skew(20deg) scale(3.9);
}
75% {
transform: rotate(18deg) skew(28deg) scale(4.05);
}
100% {
transform: rotate(15deg) skew(25deg) scale(4);
}
}
/* Page-specific backdrop variations with animations */
@@ -77,59 +87,129 @@ body.page-edition::before {
/* Page-specific keyframes */
@keyframes backdrop-drift-akteure {
0% { transform: rotate(-35deg) skew(-40deg) scale(4.2); }
25% { transform: rotate(-30deg) skew(-35deg) scale(4.0); }
50% { transform: rotate(-40deg) skew(-45deg) scale(4.4); }
75% { transform: rotate(-32deg) skew(-38deg) scale(4.1); }
100% { transform: rotate(-35deg) skew(-40deg) scale(4.2); }
0% {
transform: rotate(-35deg) skew(-40deg) scale(4.2);
}
25% {
transform: rotate(-30deg) skew(-35deg) scale(4);
}
50% {
transform: rotate(-40deg) skew(-45deg) scale(4.4);
}
75% {
transform: rotate(-32deg) skew(-38deg) scale(4.1);
}
100% {
transform: rotate(-35deg) skew(-40deg) scale(4.2);
}
}
@keyframes backdrop-drift-ausgabe {
0% { transform: rotate(40deg) skew(15deg) scale(4.5); }
25% { transform: rotate(45deg) skew(20deg) scale(4.3); }
50% { transform: rotate(35deg) skew(10deg) scale(4.7); }
75% { transform: rotate(42deg) skew(18deg) scale(4.4); }
100% { transform: rotate(40deg) skew(15deg) scale(4.5); }
0% {
transform: rotate(40deg) skew(15deg) scale(4.5);
}
25% {
transform: rotate(45deg) skew(20deg) scale(4.3);
}
50% {
transform: rotate(35deg) skew(10deg) scale(4.7);
}
75% {
transform: rotate(42deg) skew(18deg) scale(4.4);
}
100% {
transform: rotate(40deg) skew(15deg) scale(4.5);
}
}
@keyframes backdrop-drift-search {
0% { transform: rotate(0deg) skew(45deg) scale(3.8); }
25% { transform: rotate(5deg) skew(50deg) scale(3.6); }
50% { transform: rotate(-5deg) skew(40deg) scale(4.0); }
75% { transform: rotate(2deg) skew(48deg) scale(3.7); }
100% { transform: rotate(0deg) skew(45deg) scale(3.8); }
0% {
transform: rotate(0deg) skew(45deg) scale(3.8);
}
25% {
transform: rotate(5deg) skew(50deg) scale(3.6);
}
50% {
transform: rotate(-5deg) skew(40deg) scale(4);
}
75% {
transform: rotate(2deg) skew(48deg) scale(3.7);
}
100% {
transform: rotate(0deg) skew(45deg) scale(3.8);
}
}
@keyframes backdrop-drift-ort {
0% { transform: rotate(60deg) skew(-30deg) scale(4.8); }
25% { transform: rotate(65deg) skew(-25deg) scale(4.6); }
50% { transform: rotate(55deg) skew(-35deg) scale(5.0); }
75% { transform: rotate(62deg) skew(-28deg) scale(4.7); }
100% { transform: rotate(60deg) skew(-30deg) scale(4.8); }
0% {
transform: rotate(60deg) skew(-30deg) scale(4.8);
}
25% {
transform: rotate(65deg) skew(-25deg) scale(4.6);
}
50% {
transform: rotate(55deg) skew(-35deg) scale(5);
}
75% {
transform: rotate(62deg) skew(-28deg) scale(4.7);
}
100% {
transform: rotate(60deg) skew(-30deg) scale(4.8);
}
}
@keyframes backdrop-drift-kategorie {
0% { transform: rotate(-25deg) skew(50deg) scale(4.1); }
25% { transform: rotate(-20deg) skew(55deg) scale(3.9); }
50% { transform: rotate(-30deg) skew(45deg) scale(4.3); }
75% { transform: rotate(-22deg) skew(52deg) scale(4.0); }
100% { transform: rotate(-25deg) skew(50deg) scale(4.1); }
0% {
transform: rotate(-25deg) skew(50deg) scale(4.1);
}
25% {
transform: rotate(-20deg) skew(55deg) scale(3.9);
}
50% {
transform: rotate(-30deg) skew(45deg) scale(4.3);
}
75% {
transform: rotate(-22deg) skew(52deg) scale(4);
}
100% {
transform: rotate(-25deg) skew(50deg) scale(4.1);
}
}
@keyframes backdrop-drift-piece {
0% { transform: rotate(45deg) skew(-25deg) scale(4.3); }
25% { transform: rotate(50deg) skew(-20deg) scale(4.1); }
50% { transform: rotate(40deg) skew(-30deg) scale(4.5); }
75% { transform: rotate(47deg) skew(-22deg) scale(4.2); }
100% { transform: rotate(45deg) skew(-25deg) scale(4.3); }
0% {
transform: rotate(45deg) skew(-25deg) scale(4.3);
}
25% {
transform: rotate(50deg) skew(-20deg) scale(4.1);
}
50% {
transform: rotate(40deg) skew(-30deg) scale(4.5);
}
75% {
transform: rotate(47deg) skew(-22deg) scale(4.2);
}
100% {
transform: rotate(45deg) skew(-25deg) scale(4.3);
}
}
@keyframes backdrop-drift-edition {
0% { transform: rotate(-50deg) skew(35deg) scale(3.9); }
25% { transform: rotate(-45deg) skew(40deg) scale(3.7); }
50% { transform: rotate(-55deg) skew(30deg) scale(4.1); }
75% { transform: rotate(-48deg) skew(38deg) scale(3.8); }
100% { transform: rotate(-50deg) skew(35deg) scale(3.9); }
0% {
transform: rotate(-50deg) skew(35deg) scale(3.9);
}
25% {
transform: rotate(-45deg) skew(40deg) scale(3.7);
}
50% {
transform: rotate(-55deg) skew(30deg) scale(4.1);
}
75% {
transform: rotate(-48deg) skew(38deg) scale(3.8);
}
100% {
transform: rotate(-50deg) skew(35deg) scale(3.9);
}
}
/*
@@ -156,7 +236,7 @@ body.page-edition::before {
@layer components {
html {
font-size: 18px;
font-size: 17px;
}
body {