refactor: project cleanup + onboarding page

client/js/components/setup.vue

@@ -353,6 +353,7 @@
 /* global siteConfig */
 
 import axios from 'axios'
+import _ from 'lodash'
 
 export default {
   props: {
@@ -491,7 +492,7 @@ export default {
         results: []
       }
 
-      this.$helpers._.delay(() => {
+      _.delay(() => {
         axios.post('/syscheck', self.conf).then(resp => {
           if (resp.data.ok === true) {
             self.syscheck.ok = true
@@ -517,9 +518,9 @@ export default {
     },
     proceedToConsiderations: function (ev) {
       this.considerations = {
-        https: !this.$helpers._.startsWith(this.conf.host, 'https'),
+        https: false,
         port: false, // TODO
-        localhost: this.$helpers._.includes(this.conf.host, 'localhost')
+        localhost: false
       }
       this.state = 'considerations'
       this.loading = false
@@ -542,7 +543,7 @@ export default {
         error: ''
       }
 
-      this.$helpers._.delay(() => {
+      _.delay(() => {
         axios.post('/gitcheck', self.conf).then(resp => {
           if (resp.data.ok === true) {
             self.gitcheck.ok = true
@@ -587,7 +588,7 @@ export default {
         redirectUrl: ''
       }
 
-      this.$helpers._.delay(() => {
+      _.delay(() => {
         axios.post('/finalize', self.conf).then(resp => {
           if (resp.data.ok === true) {
             self.$helpers._.delay(() => {

client/scss/app.scss

@@ -30,6 +30,8 @@
 
 @import 'components/editor';
 
+@import 'pages/welcome';
+
 @import 'layout/_header';
 @import 'layout/_loader';
 @import 'layout/_rtl';

client/scss/base/base.scss

@@ -16,7 +16,6 @@ html {
   min-height: 100%;
 
   &.is-fullscreen {
-    //width: 100vw;
     height: 100vh;
   }
 }
@@ -27,7 +26,10 @@ body {
 }
 
 main {
-	background-color: lighten(mc('blue-grey','50'), 5%);
+  background-color: mc('blue','500');
+  background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue', '500') 100%);
+  padding: 50px;
+  min-height: 100vh;
 }
 
 a {
@@ -42,28 +44,8 @@ a {
 
 // Container
 
-.has-stickynav {
-	padding-top: 50px;
-}
-
 .container {
   position: relative;
-
-  @include desktop {
-    margin: 0 auto;
-    max-width: 960px;
-
-    // Modifiers
-    &.is-fluid {
-      margin: 0;
-      max-width: none;
-    }
-  }
-
-
-  @include widescreen {
-    max-width: 1200px;
-  }
 }
 
 .content {

client/scss/pages/_welcome.scss

@@ -0,0 +1,42 @@
+.onboarding {
+  background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '800') 100%);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: mc('grey', '50');
+
+  &::before {
+    content: '';
+    display:block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url('../static/svg/login-bg-motif.svg');
+    background-repeat: repeat;
+    background-size: 500px;
+    z-index: 0;
+    opacity: .75;
+  }
+
+  img {
+    width: 500px;
+    filter: grayscale(100%) brightness(160%);
+    margin-bottom: 3rem;
+    z-index: 2;
+  }
+  h1 {
+    margin-bottom: 1rem;
+    z-index: 2;
+  }
+  h2 {
+    margin-bottom: 3rem;
+    z-index: 2;
+  }
+  .button {
+    z-index: 2;
+  }
+}