103 lines
2.9 KiB
Plaintext
103 lines
2.9 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
import BaseLayout from '../layouts/BaseLayout.astro'
|
|
---
|
|
|
|
<BaseLayout
|
|
pageTitle="404: Page Not Found"
|
|
description="The page doesn't exist, double check the URL."
|
|
classNames={{
|
|
main: 'm-0 -mt-16 flex max-w-none flex-col items-center justify-center bg-[#737373] pt-16 text-[#fafafa] [--speed:2s] perspective-distant [&_*]:[transform-style:preserve-3d]',
|
|
footer: 'bg-black',
|
|
}}
|
|
widthClassName="max-w-none"
|
|
isErrorPage
|
|
>
|
|
<h1
|
|
data-text="404"
|
|
data-animation-title
|
|
class="m-0 mb-4 text-[clamp(5rem,40vmin,15rem)] font-extrabold tracking-[clamp(0.5rem,2vmin,2rem)]"
|
|
>
|
|
404
|
|
</h1>
|
|
<div class="pointer-events-none fixed inset-0 overflow-hidden">
|
|
<div class="absolute top-1/2 left-1/2 h-[250vmax] w-[250vmax] -translate-x-1/2 -translate-y-1/2">
|
|
<div data-animation-cloak></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center leading-relaxed">
|
|
<h2 class="font-title mb-2 text-3xl tracking-wider text-balance uppercase">Page not found</h2>
|
|
<p class="mb-12 text-base text-balance">The page doesn't exist, double check the URL.</p>
|
|
<a
|
|
href="/"
|
|
class="group inline-flex items-center gap-4 rounded-lg border-2 border-zinc-100 bg-zinc-900 px-6 py-2 text-lg tracking-wider text-white uppercase transition-colors hover:bg-zinc-800"
|
|
>
|
|
<Icon
|
|
name="ri:arrow-left-line"
|
|
class="-mx-1 h-5 w-5 transition-transform group-hover:-translate-x-1 group-active:translate-x-0"
|
|
/>
|
|
Home
|
|
</a>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
@property --swing-x {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<integer>';
|
|
}
|
|
|
|
@property --swing-y {
|
|
initial-value: 0;
|
|
inherits: false;
|
|
syntax: '<integer>';
|
|
}
|
|
|
|
[data-animation-title] {
|
|
animation: swing var(--speed) infinite alternate ease-in-out;
|
|
transform: translate3d(0, 0, 0vmin);
|
|
--x: calc(50% + (var(--swing-x) * 0.5) * 1%);
|
|
background: radial-gradient(#e6e6e6, #7a7a7a 45%) var(--x) 100%/200% 200%;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
[data-animation-title]:after {
|
|
animation: swing var(--speed) infinite alternate ease-in-out;
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: #000;
|
|
filter: blur(1.5vmin);
|
|
transform: scale(1.05) translate3d(0, 12%, -10vmin)
|
|
translate(calc((var(--swing-x, 0) * 0.05) * 1%), calc((var(--swing-y) * 0.05) * 1%));
|
|
}
|
|
|
|
[data-animation-cloak] {
|
|
animation: swing var(--speed) infinite alternate-reverse ease-in-out;
|
|
height: 100%;
|
|
width: 100%;
|
|
transform-origin: 50% 30%;
|
|
transform: rotate(calc(var(--swing-x) * -0.25deg));
|
|
background: radial-gradient(40% 40% at 50% 42%, transparent, #000 35%);
|
|
}
|
|
|
|
@keyframes swing {
|
|
0% {
|
|
--swing-x: -100;
|
|
--swing-y: -100;
|
|
}
|
|
50% {
|
|
--swing-y: 0;
|
|
}
|
|
100% {
|
|
--swing-y: -100;
|
|
--swing-x: 100;
|
|
}
|
|
}
|
|
</style>
|