valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove all animations from 404 page

Browse Source 
Clean static design without glitch effects

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-02-05 20:04:22 +01:00
parent d3980d19ed
commit 4508596010
1 changed files with 2 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
layouts/404.html
View File

@@ -1,65 +1,7 @@
{{ define "main" }} {{ define "main" }}
<style> <section class="min-h-screen flex flex-col items-center justify-center px-4">
/* Glitch animation for 404 text */
.glitch {
position: relative;
font-size: clamp(8rem, 20vw, 16rem);
font-weight: 700;
line-height: 1;
color: #fff;
letter-spacing: 0.02em;
animation: glitch-skew 4s infinite linear alternate-reverse;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: #888;
animation: glitch-1 2s infinite linear alternate-reverse;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
color: #555;
animation: glitch-2 3s infinite linear alternate-reverse;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch-1 {
0%, 100% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(-3px, -3px); }
60% { transform: translate(3px, 3px); }
80% { transform: translate(3px, -3px); }
}
@keyframes glitch-2 {
0%, 100% { transform: translate(0); }
20% { transform: translate(3px, -3px); }
40% { transform: translate(3px, 3px); }
60% { transform: translate(-3px, -3px); }
80% { transform: translate(-3px, 3px); }
}
@keyframes glitch-skew {
0%, 100% { transform: skew(0deg); }
30% { transform: skew(0.5deg); }
60% { transform: skew(-0.5deg); }
}
</style>
<section class="min-h-screen flex flex-col items-center justify-center px-4 relative z-20">
<div class="text-center"> <div class="text-center">
<h1 class="glitch font-mono" data-text="404">404</h1> <h1 class="text-[clamp(8rem,20vw,16rem)] font-bold leading-none tracking-tight">404</h1>
<p class="mt-8 text-xl md:text-2xl text-text-secondary font-mono tracking-widest uppercase"> <p class="mt-8 text-xl md:text-2xl text-text-secondary font-mono tracking-widest uppercase">
Signal Lost Signal Lost