deploy: 7388d36

ninjamar · May 23, 2024 · 66982de · 66982de
1 parent 41d9a98
commit 66982de
Showing 1 changed file with 146 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, inital-scale=1.0">
+        <title>404 - ninjamar.dev</title>
+
+        <link rel="icon" type="image/x-icon" href="/favicon.ico">
+        <script src="https://cdn.jsdelivr.net/gh/ninjamar/analytics@latest/analytics.min.js"></script>
+        <script src="/static/js/base.js"></script>
+
+        <style>
+            /* Colors */
+            :root {
+                --light-text-color: #333333;
+                --light-background-color: #f2f2f2;
+                --light-secondary-color: #C9C9C9;
+            }
+
+            /* Core styling */
+            html, body {
+                height: 100%;
+            }
+            * {
+                font-family: 'Courier New', Courier, monospace;
+            }
+
+            /* Default colors*/
+            body {
+                margin: auto;
+                width: 75%;
+                background: var(--light-background-color);
+            }
+            .inverse {
+                color: var(--light-background-color);
+            }
+            .inverse-bg {
+                background: var(--light-text-color);
+            }
+            /* Change text color - not sure which elements have default text color */
+            *:not(a) {
+                color: var(--light-text-color);
+            }
+
+            /* Default header styling*/
+            h1, h2, h3, h4, h5, h6 {
+                text-align: center;
+                font-weight: normal;
+            }
+            .title {
+                font-size: 1.5em;
+            }
+            /* Upper and bottom part of documents have different alignments */
+            .center {
+                text-align: center;
+            }
+            .left {
+                text-align: left;
+            }
+
+            /* Navigation */
+            .navbar {
+                margin-top: 20px;
+                margin-bottom: 20px;
+                font-size: 1.5em;
+            }
+            .navbar * {
+                text-decoration: none;
+                color: black;
+            }
+
+            /* Content */
+            .content p {
+                text-indent: 4ch;
+            }
+            .content p * {
+                display: inline;
+            }
+
+            /* Row of buttons */
+            .button-collection {
+                display: flex;
+                justify-content: space-evenly;
+                flex-wrap: wrap;
+            }
+            .button {
+                border-radius: 5px;
+                padding: 3px 10px 3px 10px;
+                margin: 5px;
+            }
+            .button * {
+                text-decoration: none; /* Text color is set by default, otherwise use inverse*/
+            }
+
+            /* Footer */
+            .footer {
+                margin: 1em 0px;
+                display: flex;
+                justify-content: space-between;
+                width: 75%;
+            }
+
+            .block {
+                display: block;
+            }
+
+            /* 
+                Mobile 
+                https://stackoverflow.com/a/7354648/21322342
+            */
+            @media (min-width: 450px) and (max-width: 730px ){ /* Phones */
+                .navbar * {
+                    font-size: 3em;
+                }
+                h1, h2, h3, h4, h5, h6 {
+                    font-size: 3em;
+                }
+                .content {
+                    font-size: 2em;
+                }
+            }
+
+        </style>
+
+    </head>
+    <body>
+        <div class="center">
+            <nav class="navbar">
+                <a href="/">home</a>
+                <a href="/projects/">projects</a>
+                <a href="/blog/">blog</a>
+            </nav>
+        </div>
+        <div class="left">
+            <div class="content">
+
+    <h1 class="title">404 page not found</h1>
+
+            </div>
+            <footer class="footer">
+                <span>© Copyright 2024, ninjamar. All rights reserved</span>
+                <a href="/privacy.html">Privacy Policy</a>
+            </footer>
+        </div>
+    </body>
+</html>