404 page
This commit is contained in:
parent
07b8d13251
commit
28455cc0d7
SSH key fingerprint:
SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
6 changed files with 67 additions and 35 deletions
|
|
@ -1,8 +1,13 @@
|
||||||
---
|
---
|
||||||
import "mdui/mdui.css"
|
import "mdui/mdui.css"
|
||||||
import TopBar from "../components/TopBar.astro"
|
import TopBar from "../components/TopBar.astro"
|
||||||
import BottomBar from "../components/BottomBar.astro"
|
|
||||||
import "../styles/global.css"
|
import "../styles/global.css"
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
@ -16,12 +21,12 @@ import "../styles/global.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Henry Hiles - Home</title>
|
<title>Henry Hiles - {title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<TopBar />
|
<TopBar />
|
||||||
<main><slot /></main>
|
<main><slot /></main>
|
||||||
<BottomBar />
|
<slot name="navbar" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 googleCS from "../images/certificates/googleCS.png"
|
||||||
import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
|
import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
|
||||||
import ButtonLink from "../components/ButtonLink.astro"
|
import ButtonLink from "../components/ButtonLink.astro"
|
||||||
|
import BottomBar from "../components/BottomBar.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout title="Home">
|
||||||
<header id="home">
|
<header id="home">
|
||||||
<Image src={logoLong} alt="Henry Hiles" />
|
<Image src={logoLong} alt="Henry Hiles" />
|
||||||
<span>Multiplatform Flutter Developer & Front-End Web Developer</span>
|
<span>Multiplatform Flutter Developer & Front-End Web Developer</span>
|
||||||
|
|
@ -219,4 +220,5 @@ import ButtonLink from "../components/ButtonLink.astro"
|
||||||
</ButtonLink>
|
</ButtonLink>
|
||||||
</section>
|
</section>
|
||||||
</mdui-card>
|
</mdui-card>
|
||||||
|
<BottomBar slot="navbar" />
|
||||||
</Layout>
|
</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;
|
margin: 0;
|
||||||
|
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
circle 75vw at -25vw -20vh,
|
circle 80vw at -25vw -20vh,
|
||||||
var(--circle-color),
|
var(--circle-color),
|
||||||
transparent
|
transparent
|
||||||
),
|
),
|
||||||
|
|
@ -54,6 +54,30 @@ main {
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
|
|
||||||
padding: 1em;
|
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 {
|
mdui-divider {
|
||||||
|
|
|
||||||
|
|
@ -23,28 +23,6 @@ mdui-card {
|
||||||
}
|
}
|
||||||
|
|
||||||
main > * > section {
|
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 {
|
&#certificates mdui-card {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -64,6 +42,14 @@ main > * > section {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
& mdui-card {
|
& mdui-card {
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
& section {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& section {
|
& section {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
@ -99,14 +85,6 @@ main > * > section {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
& section {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue