ISSUE-XXXX

Merge pull request #21 from untalsanders/develop

- changed global font family
- added error page styles

src/pages/error.page.jsx

@@ -3,7 +3,13 @@
 import styles from '@styles/Error.module.css'
 
 export const ErrorPage = () => (
-    <div className={styles.Error}>
-        <h1>404 - Page not found!</h1>
+    <div className={styles.ErrorPage}>
+        <section className={styles.ErrorPage__Description}>
+            <span>404</span>
+            <p>
+                <span>This page doesn't exist</span>
+                <span>Please check the URL in the address bar and try again.</span>
+            </p>
+        </section>
     </div>
 )

src/styles/Error.module.css

@@ -1,5 +1,35 @@
-.Error {
-    display: grid;
-    place-content: center;
+.ErrorPage {
+    align-content: center;
     min-height: 100vh;
-}
+}
+
+.ErrorPage__Description {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > span {
+        color: #4b5563;
+        font-size: 3rem;
+        font-weight: 900;
+        padding-right: 1.25rem;
+    }
+
+    p {
+        border-left: .0625rem solid #ccc6;
+        line-height: 1.3;
+        margin: 0;
+        padding-left: 1.25rem;
+        display: flex;
+        flex-direction: column;
+
+        span:first-child {
+            font-size: 3rem;
+            font-weight: 900;
+        }
+
+        span:nth-child(2) {
+            color: #707b90;
+        }
+    }
+}

src/styles/global.css

@@ -2,7 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 
 :root {
-    --fontFamily: Inter;
+    --fontFamily: Poppins;
     font-family: var(--fontFamily), system-ui, sans-serif;
     line-height: 1.8;
     font-weight: 400;