More UI changes

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>
                 );
             })

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>
     );

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;
+}
 

styles/quick-links.module.css

@@ -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);
-}