refactor: project cleanup + onboarding page

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;
+  }
+}