Add a 404 page

src/css/main.scss

@@ -709,3 +709,26 @@ body.has-modal #main {
     margin-left: -5px;
     line-height: 0.45rem;
 }
+
+.error404 {
+    @extend .text-shadow;
+    max-width: 500px;
+    margin: auto;
+
+    .hook-box, .hook-box:before {
+        background-color: #888;
+        @extend .bg-stripes-gradient;
+
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+    }
+
+    .box-header {
+        padding: 5px 15px 10px;
+    }
+
+    .box-footer {
+        padding: 5px 15px 10px;
+    }
+}

src/js/components/404.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="hero is-fullheight">
+        <div class="hero-body">
+            <!-- 404! -->
+            <div class="error404 tilt-left">
+                <div class="hook-box">
+                    <div class="box-header">
+                        <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+                            404 Not Found
+                        </h2>
+                    </div>
+
+                    <img src="~@/img/404.jpg" />
+
+                    <div class="box-footer">
+                        <p class="has-text-centered">
+                            <router-link to="/" class="button is-translucent is-rounded">
+                                <span class="icon squid-icon-tilt">
+                                    <span class="fa squid-squid"></span>
+                                </span>
+                                <span class="font-splatoon2">
+                                    Return to Splatoon2.ink
+                                </span>
+                            </router-link>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/js/router.js

@@ -20,6 +20,10 @@ const routes = [
             },
         ],
     },
+    {
+        path: '*',
+        component: require('./components/404.vue').default,
+    },
 ];
 
 const router = new VueRouter({