work

html/src/css/style.scss

@@ -48,6 +48,11 @@ a.navbar-item.is-active,
 .navbar-link.is-active {
   background-color: darken($white, 2.5);
 }
+// navbar brand left space override
+.navbar > .container .navbar-brand,
+.container > .navbar .navbar-brand {
+  margin-left: -0.75rem;
+}
 .x-footer {
   flex-shrink: 0;
 }
@@ -85,19 +90,13 @@ a.navbar-item.is-active,
   font-size: (14/16) * 1rem;
 }
 .signin {
-  // .content {
-  //   margin-top: -0.5rem;
-  //   margin-bottom: 1rem;
-  // }
   .box {
     padding-right: $golden * 1rem;
     padding-bottom: 2rem;
     padding-left: $golden * 1rem;
   }
   .column {
-    // @media screen and (min-width: 600px) {
     max-width: 26rem;
-    // }
   }
 }
 [v-cloak] {

html/src/js/app.js

@@ -11,7 +11,8 @@ Vue.use(VueRouter);
 var components = {
   signin: require('./components/signin.js'),
   navbar: require('./components/navbar.js'),
-  dashboard: require('./components/dashboard.js')
+  dashboard: require('./components/dashboard.js'),
+  notFound: require('./components/not-found.js')
 };
 
 var routes = [
@@ -27,6 +28,12 @@ var routes = [
     components: {
       main: components.signin
     }
+  },
+  {
+    path: '*',
+    components: {
+      main: components.notFound
+    }
   }
 ];
 

html/src/js/components/not-found.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var Vue = require('vue');
+var axios = require('axios');
+
+module.exports = Vue.component('not-found', function (resolve, reject) {
+  axios.get('/templates/not-found.html').then(function (resp) {
+    resolve({
+      template: resp.data
+    });
+  });
+});

html/src/templates/not-found.html

@@ -0,0 +1,10 @@
+<section class="hero is-fullheight signin">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <div class="content">
+        <h1>Error 404</h1>
+        <p>The requested page was not found.</p>
+      </div>
+    </div>
+  </div>
+</section>