Work in progress pages + header fixes

Author: mark-graciov

public/Home.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="container">
+  <img src="/assets/wip.gif" alt="Work in progress">
+</div>
+</template>
+
+<script>
+export default {
+name: "WorkInProgress"
+}
+</script>
+
+<style scoped>
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4rem;
+  }
+
+  .container img {
+    width: 50%;
+    max-width: 480px;
+  }
+</style>

public/assets/wip.gif

@@ -80,15 +80,14 @@ export default {
   margin: 0;
   justify-content: center;
   align-items: center;
-  margin-left: 0px;
 }
 
 .nav-links .link {
   margin-left: 40px;
 }
 
 .nav-links ul li:first-child .link {
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 a:hover {
@@ -113,26 +112,24 @@ a:hover {
     flex-direction: column;
   }
 
-  .logo,
+  .logo {
+    align-items: start;
+  }
+
+  .name {
+    margin-top: 80px;
+  }
+
   .link,
   .nav-links {
     width: 100%;
     justify-content: center;
   }
 
-  .logo {
-    order: -1;
-    margin-bottom: 30px;
-  }
-
   .nav-links ul {
     justify-content: center;
   }
 
-  .logo {
-    margin-bottom: 30px;
-  }
-
   .link {
     display: inline-block;
     margin-bottom: 20px;
@@ -146,7 +143,7 @@ a:hover {
     align-items: center;
   }
 
-  .nav-links ul li a {
+  .nav-links .link {
     margin: 5px 0;
   }
 }

src/WorkInProgress.vue

@@ -1,12 +1,13 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import Axios from "axios";
 import App from "./App.vue";
 import LogIn from "./components/LogIn";
 import Dashboard from "./Dashboard";
 import Notes from "./Notes";
 import Register from "./Register";
 import Landing from "./Landing";
-import Axios from "axios";
+import WorkInProgress from "@/WorkInProgress";
 
 Vue.config.productionTip = false;
 
@@ -29,6 +30,8 @@ const routes = [
   { path: "/dashboard", component: Dashboard, beforeEnter: loginGuard },
   { path: "/notes/:id", component: Notes, beforeEnter: loginGuard },
   { path: "/new-notes", component: Notes, beforeEnter: loginGuard },
+  { path: "/settings", component: WorkInProgress, beforeEnter: loginGuard },
+  { path: "/help", component: WorkInProgress, beforeEnter: loginGuard },
   { path: "*", component: Landing }
 ];