diff --git a/src/pages/404.astro b/src/pages/404.astro index f6b9521..7d333e1 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,15 +1,17 @@ --- -import styles from "../styles/NotFound.module.css" +import styles from "../styles/404.module.css" import Layout from "../layouts/Layout.astro" +import Divider from "../components/Divider.astro" ---
-

Page not found.

+

Page Not Found

+ - We couldn't find that page. Please return to our - home page - . + We couldn't find that page. Please return to our home page.
diff --git a/src/styles/404.module.css b/src/styles/404.module.css new file mode 100644 index 0000000..5910423 --- /dev/null +++ b/src/styles/404.module.css @@ -0,0 +1,34 @@ +#notFound { + margin: 50px 20px; + display: flex; + padding: 60px 30px; + border-radius: 20px; + background: #1d2e3d; + align-items: center; + gap: 5px; + justify-content: center; + text-align: center; + flex-direction: column; + box-shadow: rgba(0, 0, 0, 0.5) 2px 10px 15px; +} + +#notFound a { + color: var(--text-primary); +} + +#header { + font-size: 3em; +} + +#description { + font-size: 1.3em; + width: 50%; +} + +@media (min-width: 800px) { + .notFound { + width: 60vw; + border-radius: 20px; + height: 65vh; + } +} diff --git a/src/styles/Divider.module.css b/src/styles/Divider.module.css index 781fc26..1c7b654 100644 --- a/src/styles/Divider.module.css +++ b/src/styles/Divider.module.css @@ -1,35 +1,35 @@ .container { - width: 100%; - display: flex; - justify-content: center; + width: 100%; + display: flex; + justify-content: center; } .dividerIcon { - margin: 10px 0 15px; - position: relative; + margin: 10px 0 15px; + position: relative; } .dividerIcon svg { - height: 2rem; - width: 2rem; - color: inherit; + height: 2rem; + width: 2rem; + color: inherit; } .dividerIcon::before, .dividerIcon::after { - border-bottom: 0.5rem solid var(--text-primary); - border-radius: 5em; - content: ""; - margin: 0 1em; - position: absolute; - top: 50%; - width: 7rem; + border-bottom: 0.5rem solid var(--text-primary); + border-radius: 5em; + content: ""; + margin: 0 1em; + position: absolute; + top: 50%; + width: 7rem; } .dividerIcon::before { - right: 100%; + right: 100%; } .dividerIcon::after { - left: 100%; + left: 100%; } diff --git a/src/styles/Jumbo.module.css b/src/styles/Jumbo.module.css index f84b8b2..40162fa 100644 --- a/src/styles/Jumbo.module.css +++ b/src/styles/Jumbo.module.css @@ -14,5 +14,6 @@ } #jumbo #shortAbout { - padding: 20px 0; + display: block; + padding: 20px 10px; } diff --git a/src/styles/NotFound.module.css b/src/styles/NotFound.module.css deleted file mode 100644 index cb623b3..0000000 --- a/src/styles/NotFound.module.css +++ /dev/null @@ -1,33 +0,0 @@ -#notFound { - display: flex; - padding: 50px 0px; - border-radius: 20px; - background: #161f27; - align-items: center; - justify-content: center; - gap: 10px; - text-align: center; - flex-direction: column; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -} - -#notFound a { - color: var(--text-primary); -} - -#header { - font-size: 2.5em; -} - -#description { - font-size: 1.2em; - width: 50%; -} - -@media (min-width: 800px) { - .notFound { - width: 60vw; - border-radius: 20px; - height: 65vh; - } -}