raresj/mypage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝Update breadcrumbs i18n

Browse Source
This commit is contained in:
RJ
2025-12-05 16:19:58 +02:00
parent 919e638144
commit 0fe115f46e
12 changed files with 175 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
app/globals.css
View File

@@ -473,12 +473,62 @@
@layer utilities {
.glitch-btn-cyber {
--glitch-shimmy: 5;
--glitch-clip-1: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
--glitch-clip-2: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
--glitch-clip-3: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
--glitch-clip-1: polygon(
0 2%,
100% 2%,
100% 95%,
95% 95%,
95% 90%,
85% 90%,
85% 95%,
8% 95%,
0 70%
);
--glitch-clip-2: polygon(
0 78%,
100% 78%,
100% 100%,
95% 100%,
95% 90%,
85% 90%,
85% 100%,
8% 100%,
0 78%
);
--glitch-clip-3: polygon(
0 44%,
100% 44%,
100% 54%,
95% 54%,
95% 54%,
85% 54%,
85% 54%,
8% 54%,
0 54%
);
--glitch-clip-4: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
--glitch-clip-5: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
--glitch-clip-6: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
--glitch-clip-5: polygon(
0 40%,
100% 40%,
100% 85%,
95% 85%,
95% 85%,
85% 85%,
85% 85%,
8% 85%,
0 70%
);
--glitch-clip-6: polygon(
0 63%,
100% 63%,
100% 80%,
95% 80%,
95% 80%,
85% 80%,
85% 80%,
8% 80%,
0 70%
);
}
.glitch-overlay {
@@ -498,29 +548,80 @@
}
@keyframes glitch-btn-animate {
0% { clip-path: var(--glitch-clip-1); }
2%, 8% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
6% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
9% { clip-path: var(--glitch-clip-2); transform: translate(0, 0); }
10% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
13% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
14%, 21% { clip-path: var(--glitch-clip-4); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
25%, 30% { clip-path: var(--glitch-clip-5); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
35%, 45% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
40% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
50% { clip-path: var(--glitch-clip-6); transform: translate(0, 0); }
55% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
60% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
61%, 100% { clip-path: var(--glitch-clip-4); }
0% {
clip-path: var(--glitch-clip-1);
}
2%,
8% {
clip-path: var(--glitch-clip-2);
transform: translate(calc(var(--glitch-shimmy) * -1%), 0);
}
6% {
clip-path: var(--glitch-clip-2);
transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
}
9% {
clip-path: var(--glitch-clip-2);
transform: translate(0, 0);
}
10% {
clip-path: var(--glitch-clip-3);
transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
}
13% {
clip-path: var(--glitch-clip-3);
transform: translate(0, 0);
}
14%,
21% {
clip-path: var(--glitch-clip-4);
transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
}
25%,
30% {
clip-path: var(--glitch-clip-5);
transform: translate(calc(var(--glitch-shimmy) * -1%), 0);
}
35%,
45% {
clip-path: var(--glitch-clip-6);
transform: translate(calc(var(--glitch-shimmy) * -1%), 0);
}
40% {
clip-path: var(--glitch-clip-6);
transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
}
50% {
clip-path: var(--glitch-clip-6);
transform: translate(0, 0);
}
55% {
clip-path: var(--glitch-clip-3);
transform: translate(calc(var(--glitch-shimmy) * 1%), 0);
}
60% {
clip-path: var(--glitch-clip-3);
transform: translate(0, 0);
}
61%,
100% {
clip-path: var(--glitch-clip-4);
}
}
.glitch-btn-subtle {
--glitch-shimmy: 2;
}
.glitch-overlay-pink { color: var(--neon-pink); }
.glitch-overlay-purple { color: var(--neon-purple); }
.glitch-overlay-magenta { color: var(--neon-magenta); }
.glitch-overlay-pink {
color: var(--neon-pink);
}
.glitch-overlay-purple {
color: var(--neon-purple);
}
.glitch-overlay-magenta {
color: var(--neon-magenta);
}
@media (prefers-reduced-motion: reduce) {
.glitch-btn-cyber:is(:hover, :focus-visible) .glitch-overlay {