diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 21a59df..251cc07 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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 --- @@ -16,12 +21,12 @@ import "../styles/global.css" rel="stylesheet" /> - Henry Hiles - Home + Henry Hiles - {title}
- + diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..c41cc22 --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,18 @@ +--- +import Layout from "../layouts/Layout.astro" +import "../styles/404.css" +--- + + + +
+

404 - Not Found

+ +

+ We couldn't find that page. Please return to our home page. +

+
+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index 1ca12f2..dccb22f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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" --- - +
Henry Hiles Multiplatform Flutter Developer & Front-End Web Developer @@ -219,4 +220,5 @@ import ButtonLink from "../components/ButtonLink.astro" + diff --git a/src/styles/404.css b/src/styles/404.css new file mode 100644 index 0000000..d63aa23 --- /dev/null +++ b/src/styles/404.css @@ -0,0 +1,5 @@ +body { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/styles/global.css b/src/styles/global.css index c0860f3..8d451cc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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 { diff --git a/src/styles/index.css b/src/styles/index.css index ffb8b2a..3390273 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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; - } - } } }