404 page
Some checks failed
Deploy to Pages / Build (push) Has been cancelled
Deploy to Pages / Deploy (push) Has been cancelled

This commit is contained in:
Henry Hiles 2025-03-31 17:44:05 -04:00
parent 07b8d13251
commit 28455cc0d7
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
6 changed files with 67 additions and 35 deletions

View file

@ -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
View 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>

View file

@ -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
View file

@ -0,0 +1,5 @@
body {
display: flex;
justify-content: center;
align-items: center;
}

View file

@ -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 {

View file

@ -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;
}
}
}
}