From 9eb10dbbd9ae828fb679f5f6bbc2fc7000b731b2 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Wed, 10 Jul 2024 22:08:46 -0600
Subject: [PATCH] Home: add 404 page

---
 src/pages/404.astro | 210 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 src/pages/404.astro
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..fc14910
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,210 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+    </head>
+    <body style="display: flex" class="flex-col items-center">
+        <Header class="grow" title={SITE_TITLE} />
+        <main>
+        <div id="big-circle-wrapper" >
+            <div id="big-circle"></div>
+        </div>
+        <div id="title-circle"></div>
+        <h1 id="name-title">
+            Fate 404
+        </h1>
+        <p id="about">
+            This timeline's corrupted. Let's rewind
+            <a href="javascript:history.back()">back</a> to our
+            <a href="/">beginning</a>.
+        </p>
+        <img id="pfp" src="/images/home/akemi-gasp-transparent.avif" />
+        <div class="footer"><Footer /></div>
+        </main>
+    </body>
+</html>
+
+<style>
+    /*****************************************
+     * Global styles
+     ****************************************/
+    body {
+        font-family: var(--font-sans);
+    }
+    main a {
+        color: var(--accent-color);
+    }
+    main .footer {
+        margin-top: -30px;
+        grid-row: 7 / 8;
+        grid-column: 1 / -1;
+    }
+
+    /*****************************************
+     * Desktop, iPad horizontal and vertical
+     ****************************************/
+    @media (min-width: 760px) {
+        main {
+            display: grid;
+            grid-template-columns: 1fr auto 180px calc(50% - 130px);
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
+            width: 100%;
+            min-height: 70vh;
+            overflow: hidden;
+            padding: 0 20px;
+        }
+        #name-title {
+            font-family: var(--font-title);
+            text-align: left;
+            /* Grid styles */
+            grid-column-start: 4;
+            grid-column-end: 5;
+            grid-row-start: 2;
+            grid-row-end: 4;
+            align-self: center;
+        }
+        #title-circle {
+            border-radius: 50%;
+            background-color: white;
+            width: 200px;
+            height: 200px;
+            box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
+            /* Grid styles */
+            grid-row: 2 / 4;
+            margin-top: -10px;
+            align-self: center;
+        }
+        #about {
+            margin-top: 20px;
+            max-width: 520px;
+            font-family: var(--font-sans);
+            font-size: 1.2rem;
+            line-height: 1.8;
+            padding-left: 4rem;
+            /* Grid styles */
+            grid-column-start: 4;
+            grid-row: 4 / 7;
+            justify-self: left;
+            align-self: start;
+        }
+        #big-circle {
+            border-radius: 50%;
+            background-color: white;
+            width: 1500px;
+            height: 1500px;
+            box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
+        }
+        #big-circle-wrapper {
+            width: calc(100% - 60%);
+            height: 160vh;
+            z-index: -1;
+            position: absolute;
+            top: -60%;
+            left: -60%;
+        }
+        #pfp {
+            width: 600px;
+            /* Grid styles */
+            grid-column: 1 / 3;
+            grid-row: 1 / 7;
+            justify-self: left;
+            align-self: bottom;
+            margin-left: -15%;
+        }
+        /*****************************************
+         * iPad vertical
+         ****************************************/
+        @media (max-width: 900px) {
+            main {
+                grid-template-columns: 1fr auto 0px 40%;
+                grid-template-rows: 1fr 1fr 1fr 1fr auto;
+            }
+            main .footer {
+                grid-row: 5 / 6;
+            }
+            #name-title {
+                grid-row-start: 1;
+                grid-row-end: 3;
+            }
+            #title-circle {
+                grid-row: 1 / 3;
+            }
+            #about {
+                grid-row: 3 / 6;
+                font-size: 1rem;
+                padding: 1rem 2rem;
+            }
+        }
+        /*****************************************
+         * iPad horizontal
+         ****************************************/
+        @media not (min-width: 1350px) {
+            #name-title {
+                font-size: 64px;
+            }
+            #title-circle {
+                justify-self: center;
+                margin-right: 0;
+                grid-column: 1 / 3;
+                margin-left: -120px;
+                margin-top: -30px;
+            }
+        }
+        /*****************************************
+         * Desktop
+         ****************************************/
+        @media (min-width: 1350px) {
+            #name-title {
+                font-size: 96px;
+            }
+            #title-circle {
+                justify-self: right;
+                margin-right: -120px;
+                grid-column: 3 / 4;
+            }
+        }
+        /*****************************************
+         * Shift over big circle for iPad
+         ****************************************/
+        @media (max-width: 1350px) and (min-width: 901px) {
+            #big-circle-wrapper {
+                width: calc(100% - 80%);
+                left: -80%;
+            }
+        }
+    }
+
+    /*****************************************
+     * Phones
+     *
+     * Completely changes the layout to flex
+     ****************************************/
+    @media not (min-width: 760px) {
+        main {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 20px;
+        }
+        #name-title {
+            font-family: var(--font-title);
+            font-size: 48px;
+        }
+        #about {
+            margin: 10px;
+        }
+        #pfp {
+            max-width: 300px;
+            border: 0;
+            padding: 0;
+            margin: 0;
+        }
+    }
+</style>
