add 404 page

This commit is contained in:
nelle 2023-08-14 02:44:28 -06:00
parent 098f208c30
commit 89a5e02670
2 changed files with 68 additions and 0 deletions

35
src/layouts/err404.astro Normal file
View file

@ -0,0 +1,35 @@
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description">
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/assets/branding/obo-icon.png" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
}
html {
font-family: system-ui, sans-serif;
background: #13151A;
background-size: 224px;
}
</style>

33
src/pages/404.astro Normal file
View file

@ -0,0 +1,33 @@
---
import Layout from '../layouts/err404.astro';
import Card from '../components/Card.astro';
---
<Layout title="Error 404">
<main>
<marquee behavior="alternate" scrollamount="30">
<marquee behavior="alternate" scrollamount="30" direction="down">
<img src="assets/404/404.png">
</marquee>
</marquee>
</main>
</Layout>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
body{
width: 100%;
height: 100vh;
background-image: url('assets/404/crt.gif');
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
marquee{
height: 100vh;
}
</style>