404 page
This commit is contained in:
parent
07b8d13251
commit
28455cc0d7
6 changed files with 67 additions and 35 deletions
|
@ -1,8 +1,13 @@
|
|||
---
|
||||
import "mdui/mdui.css"
|
||||
import TopBar from "../components/TopBar.astro"
|
||||
import BottomBar from "../components/BottomBar.astro"
|
||||
import "../styles/global.css"
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
@ -16,12 +21,12 @@ import "../styles/global.css"
|
|||
rel="stylesheet"
|
||||
/>
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Henry Hiles - Home</title>
|
||||
<title>Henry Hiles - {title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<TopBar />
|
||||
<main><slot /></main>
|
||||
<BottomBar />
|
||||
<slot name="navbar" />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
18
src/pages/404.astro
Normal file
18
src/pages/404.astro
Normal file
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro"
|
||||
import "../styles/404.css"
|
||||
---
|
||||
|
||||
<Layout title="Not Found">
|
||||
<mdui-card variant="outlined">
|
||||
<section>
|
||||
<h2>404 - Not Found</h2>
|
||||
<mdui-divider></mdui-divider>
|
||||
<p>
|
||||
We couldn't find that page. Please return to our <a href="/"
|
||||
>home page</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
</mdui-card>
|
||||
</Layout>
|
|
@ -12,9 +12,10 @@ import helpdesk from "../images/projects/helpdesk.jpg"
|
|||
import googleCS from "../images/certificates/googleCS.png"
|
||||
import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
|
||||
import ButtonLink from "../components/ButtonLink.astro"
|
||||
import BottomBar from "../components/BottomBar.astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Layout title="Home">
|
||||
<header id="home">
|
||||
<Image src={logoLong} alt="Henry Hiles" />
|
||||
<span>Multiplatform Flutter Developer & Front-End Web Developer</span>
|
||||
|
@ -219,4 +220,5 @@ import ButtonLink from "../components/ButtonLink.astro"
|
|||
</ButtonLink>
|
||||
</section>
|
||||
</mdui-card>
|
||||
<BottomBar slot="navbar" />
|
||||
</Layout>
|
||||
|
|
5
src/styles/404.css
Normal file
5
src/styles/404.css
Normal file
|
@ -0,0 +1,5 @@
|
|||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
|
@ -31,7 +31,7 @@ body {
|
|||
margin: 0;
|
||||
|
||||
background: radial-gradient(
|
||||
circle 75vw at -25vw -20vh,
|
||||
circle 80vw at -25vw -20vh,
|
||||
var(--circle-color),
|
||||
transparent
|
||||
),
|
||||
|
@ -54,6 +54,30 @@ main {
|
|||
gap: 2em;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
& > * > section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-margin-top: 1em;
|
||||
|
||||
& div,
|
||||
mdui-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
gap: 0.5em;
|
||||
padding: 1em 2em;
|
||||
|
||||
& h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mdui-divider {
|
||||
|
|
|
@ -23,28 +23,6 @@ mdui-card {
|
|||
}
|
||||
|
||||
main > * > section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-margin-top: 1em;
|
||||
|
||||
& div,
|
||||
mdui-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
gap: 0.5em;
|
||||
padding: 1em 2em;
|
||||
|
||||
& h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&#certificates mdui-card {
|
||||
padding: 1em;
|
||||
flex-wrap: wrap;
|
||||
|
@ -64,6 +42,14 @@ main > * > section {
|
|||
flex-direction: column;
|
||||
gap: 1em;
|
||||
& mdui-card {
|
||||
@media (max-width: 500px) {
|
||||
border: none;
|
||||
|
||||
& section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
|
@ -99,14 +85,6 @@ main > * > section {
|
|||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
border: none;
|
||||
|
||||
& section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue