Added custom 404 page (#410)

Closes #282

demo: https://csclub.uwaterloo.ca/~a3thakra/csc/404page/404/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #410
Reviewed-by: j285he <j285he@localhost>
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
pull/420/head
Shahan Neda 6 months ago
parent 174ddff299
commit c13b6a98f9
  1. 1
      images/codey-404.svg
  2. 27
      pages/404.module.css
  3. 26
      pages/404.tsx

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.5 KiB

@ -0,0 +1,27 @@
.container {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: calc(60rem / 16);
}
.codey {
width: calc(380rem / 16);
padding: calc(20rem / 16);
padding-right: 0;
}
.heading {
margin-top: 0;
}
@media only screen and (max-width: calc(768rem / 16)) {
.container {
flex-direction: column;
padding-bottom: calc(30rem / 16);
}
.codey {
padding: calc(20rem / 16) 0;
}
}

@ -0,0 +1,26 @@
import React from "react";
import { Image } from "@/components/Image";
import { Link } from "@/components/Link";
import { Title } from "@/components/Title";
import styles from "./404.module.css";
export default function Custom404() {
return (
<div className={styles.container}>
<div className={styles.text}>
<Title>404: Page Not Found</Title>
<h2>Error 404</h2>
<h1 className={styles.heading}>
We couldnt find the page youre looking for!
</h1>
<p>
<Link href="/">Click here to go back to the main page.</Link>
</p>
</div>
<Image src="images/codey-404.svg" className={styles.codey} />
</div>
);
}
Loading…
Cancel
Save