From 789e7ce70a8e3b7e087973a19cf75876e2314602 Mon Sep 17 00:00:00 2001
From: Paul <lambdapaul@protonmail.com>
Date: Thu, 28 Apr 2022 10:05:26 -0400
Subject: [PATCH] More UI changes

---
 components/quick-links.tsx    |  5 ++--
 pages/404.tsx                 | 19 ++++++++++-----
 styles/global.css             | 44 +++++++++++++++++++++++++++++++++++
 styles/quick-links.module.css | 19 ---------------
 4 files changed, 59 insertions(+), 28 deletions(-)
 delete mode 100644 styles/quick-links.module.css

diff --git a/components/quick-links.tsx b/components/quick-links.tsx
index 1feb515..bd47a8a 100644
--- a/components/quick-links.tsx
+++ b/components/quick-links.tsx
@@ -1,16 +1,15 @@
 import Link from 'next/link';
 import Pages from '../public/pages.json';
-import style from '../styles/quick-links.module.css'
 
 function QuickLinks() {
     return (<>
         <div className='h2'>Quick Links</div>
         {
             Pages.map((obj, i) => {
-                const extern = obj.link.match(/^http/) && `blue ${style.blueButton}` || '';
+                const extern = obj.link.match(/^http/) && `blue extern` || '';
                 return (
                     <Link key={i} href={obj.link}>
-                        <a className={`${extern} ${style.button} button`}>{obj.title}</a>
+                        <a className={`${extern} link button`}>{obj.title}</a>
                     </Link>
                 );
             })
diff --git a/pages/404.tsx b/pages/404.tsx
index 3a2c07a..377413e 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,15 +1,22 @@
-import Layout from "../components/layout";
+import Link from 'next/link';
+import Layout from '../components/layout';
 
 function NotFoundPage() {
-
     return (
-        <Layout name="... ??? / 404: Not Found">
-            <section className="block">
-                <h1>Error 404: Not Found</h1>
+        <Layout title='Page Not Found' name='... ??? / 404: Not Found'>
+            <section className='block text center'>
+                <h1>Error 404</h1>
                 <p>
                     <strong>Uh oh! The page you are looking for does not exist...</strong><br />
-                    <strong><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">[Wikipedia] Learn more about HTTP status codes.</a></strong>
                 </p>
+                <Link href='/'>
+                    <a className='button green back link'>
+                        Go Home
+                    </a>
+                </Link>
+                <a className='button blue link extern' href='https://en.wikipedia.org/wiki/List_of_HTTP_status_codes'>
+                    More on HTTP status codes
+                </a>
             </section>
         </Layout>
     );
diff --git a/styles/global.css b/styles/global.css
index 1234989..c2c8c4d 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -231,6 +231,50 @@ code {
 
 .button.blue:active {
     background:#05232f;
+    box-shadow: none;
 }
 
+.text.center {
+    text-align: center;
+}
+
+.no-display {
+    display: none;
+}
+
+.button.link::after {
+    content: ' \2192';
+    display: inline-block;
+    transition: 100ms ease-in-out all;
+    margin-left: 0.3rem;
+}
+
+.button.link:hover {
+    display: inline-block;
+    transition: 100ms ease-in-out all;
+}
+
+.button.link:hover::after {
+    transform: translateX(0.2rem) scale(1.3);
+}
+
+.button.link.extern:hover::after {
+    transform: rotateZ(-45deg) scale(1.5);
+}
+
+.button.link.back::before {
+    content: ' \2190';
+    display: inline-block;
+    transition: 100ms ease-in-out all;
+    margin-right: 0.3rem;
+}
+
+.button.link:hover::before {
+    transform: translateX(-0.2rem) scale(1.3);
+}
+
+.button.link.back::after {
+    content: '';
+    display: none;
+}
 
diff --git a/styles/quick-links.module.css b/styles/quick-links.module.css
deleted file mode 100644
index 1c2fe6f..0000000
--- a/styles/quick-links.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.button::after {
-    content: ' \2192';
-    display: inline-block;
-    transition: 100ms ease-in-out all;
-    margin-left: 0.3rem;
-}
-
-.button:hover {
-    display: inline-block;
-    transition: 100ms ease-in-out all;
-}
-
-.button:hover::after {
-    transform: translateX(0.2rem) scale(1.3);
-}
-
-.blueButton:hover::after {
-    transform: rotateZ(-45deg) scale(1.5);
-}