refactor: remove config namespaces

client/scss/app.scss

@@ -15,6 +15,7 @@
 // @import 'node_modules/diff2html/dist/diff2html.min';
 
 @import 'pages/welcome';
+@import 'pages/error';
 
 @import 'layout/_rtl';
 

client/scss/pages/_error.scss

@@ -0,0 +1,64 @@
+.app-error {
+  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');
+
+  img {
+    width: 250px;
+    filter: grayscale(50%) brightness(120%);
+    animation: errorlogo 5s linear infinite;
+    margin-bottom: 3rem;
+
+    @include until($tablet) {
+      width: 200px;
+    }
+  }
+
+  @keyframes errorlogo {
+    0% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
+    }
+    10% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(100%);
+    }
+    15% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(0%);
+    }
+    30% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
+    }
+    32% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(2700deg) invert(100%);
+    }
+    34% {
+      filter: blur(0) grayscale(100%) brightness(50%) hue-rotate(110deg);
+    }
+    50% {
+      filter: blur(0) grayscale(100%) brightness(200%) hue-rotate(110deg) sepia(0%);
+    }
+    55% {
+      filter: blur(0) grayscale(100%) brightness(100%) hue-rotate(110deg) sepia(100%);
+    }
+    60% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) sepia(0%);
+    }
+    90% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
+    }
+    95% {
+      filter: blur(5px) grayscale(50%) brightness(200%) hue-rotate(720deg);
+    }
+    100% {
+      filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(100%);
+    }
+  }
+
+  code {
+    color: mc('grey', '500');
+    font-size: .8rem;
+  }
+}