feat: 404 page & prefix mixins

404.html

@@ -0,0 +1,4 @@
+---
+layout: error-404
+title: 404
+---

_layouts/error-404.html

@@ -0,0 +1,9 @@
+---
+layout: blog-default
+title: 404
+---
+<div class="m-error-404">
+    <div class="main">
+        <h1>404</h1>
+    </div>
+</div>

_sass/base/_animate.scss

@@ -10,10 +10,10 @@
 @keyframes fade-in-down {
     from {
         opacity: 0;
-        transform: translateY(- $spacing-unit);
+        @include transform(translateY(-$spacing-unit));
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        @include transform(translateY(0));
     }
 }

_sass/blog/_layout.default.scss

@@ -3,7 +3,7 @@
     min-height: 100%;
     overflow:auto;
     padding-bottom: $footer-height;
-    animation: fade-in-down .8s;
+    @include animation(fade-in-down .8s);
 }
 .m-page-content {
     padding: $content-gap * 3 0 $content-gap * 2;

_sass/blog/_page.error-404.scss

@@ -0,0 +1,7 @@
+.m-error-404 {
+    @include flexbox;
+    @include align-items(center);
+    & > .main > h1 {
+        font-size: $base-font-size * 7;
+    }
+}

_sass/mixins/_prefix.scss

@@ -0,0 +1,14 @@
+@mixin transition($value) {
+    -webkit-transition: $value;
+    transition: $value;
+}
+
+@mixin transform($value) {
+    -webkit-transform: $value;
+            transform: $value;
+}
+
+@mixin animation($value) {
+    -webkit-animation: $value;
+            animation: $value;
+}

statics/css/blog.scss

@@ -9,10 +9,10 @@
     "settings/font",
     "settings/highlighting",
 
+    "mixins/prefix",
     "mixins/media",
     "mixins/link",
     "mixins/flex",
-    "mixins/transition",
 
     "base/base",
     "base/text",
@@ -41,5 +41,6 @@
     "blog/layout.post",
 
     "blog/page.all",
-    "blog/page.index"
+    "blog/page.index",
+    "blog/page.error-404"
 ;