mirror of
https://github.com/SrIzan10/hc-site.git
synced 2026-05-01 10:45:23 +00:00
Add spinning dinobox to the 404 page
solves exactly zero problems, but it's fun
This commit is contained in:
18
pages/404.js
18
pages/404.js
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import { Heading, Container, Button, Text } from 'theme-ui'
|
||||
import { Heading, Container, Button, Text, Image } from 'theme-ui'
|
||||
import NextLink from 'next/link'
|
||||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
@@ -169,13 +169,27 @@ const Blinking = styled(Heading)`
|
||||
}
|
||||
`
|
||||
|
||||
const Spinning = styled(Image)`
|
||||
@keyframes spin {
|
||||
from {transform:rotate(0deg);}
|
||||
to {transform:rotate(360deg);}
|
||||
}
|
||||
|
||||
animation-name: spin;
|
||||
animation-duration: 10000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
aspect-ratio: 1;
|
||||
`
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<>
|
||||
<Meta as={Head} title="404" />
|
||||
<ForceTheme theme="dark" />
|
||||
<Nav color="primary" dark />
|
||||
<Container variant="narrow" sx={{ py: [5, 6], textAlign: 'center' }}>
|
||||
<Blinking as="h1" variant="title" sx={{ fontSize: [128, 256] }}>
|
||||
<Spinning sx={{fontSize: [128, 256], textAlign: 'center', height: '1lh'}} src="/404/dinobox.svg"></Spinning>
|
||||
<Blinking as="h1" variant="title" sx={{ fontSize: [64, 128] }}>
|
||||
404!
|
||||
</Blinking>
|
||||
<Text
|
||||
|
||||
1
public/404/dinobox.svg
Normal file
1
public/404/dinobox.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user