add 404 page
This commit is contained in:
parent
098f208c30
commit
89a5e02670
2 changed files with 68 additions and 0 deletions
35
src/layouts/err404.astro
Normal file
35
src/layouts/err404.astro
Normal 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
33
src/pages/404.astro
Normal 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>
|
Loading…
Reference in a new issue