added minimal page error css

Gruntfile.coffee

@@ -28,7 +28,7 @@ module.exports = (grunt) ->
                   'assets/js/src/post.coffee']
         vendor : ['assets/vendor/ghostHunter/jquery.ghostHunter.min.js'
                   'assets/vendor/pace/pace.min.js'
-                  'assets/vendor/reading-time/build/readingTime.min.js']
+                  'assets/vendor/reading-time/build/readingTime.min.js' ]
       css      :
         main   : 'assets/css/uno.css'
         vendor : ['assets/vendor/animate.css/animate.min.css']

assets/js/src/__init.coffee

@@ -19,7 +19,8 @@ $(document).ready ->
     context: ->
       # get the context from the first class name of body
       # https://github.com/TryGhost/Ghost/wiki/Context-aware-Filters-and-Helpers
-      document.body.className.split(" ")[0].split("-")[0]
+      className = document.body.className.split(" ")[0].split("-")[0]
+      if className is "" then 'error' else className
 
     readTime: do ->
 
@@ -51,4 +52,5 @@ $(document).ready ->
 
   $("body").removeClass "no-js"
   context = document.body.dataset['page'] ?= Uno.context()
-  Uno.cover.collapsed() if context is 'post' or 'error'
+
+  Uno.cover.collapsed() if context is 'post'

assets/scss/components/_effects.scss

@@ -128,7 +128,67 @@
   animation-iteration-count: 1;
 }
 
-.example-one {
-  font-size: 100px;
-  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
+@keyframes move {
+  0% {
+    transform: translate(0, 50px);
+  }
+  50% {
+    transform: translate(20px, 100px);
+  }
+  100% {
+    transform: translate(0, 50px);
+  }
+}
+
+
+@keyframes blink {
+  0% {
+    top: 50px;
+    left: 0px;
+  }
+  50% {
+    top: 100px;
+    left: 20px;
+  }
+  100% {
+    top: 50px;
+    left: 0px;
+  }
+}
+
+
+@keyframes flicker {
+  0% {
+    opacity: 0.9;
+  }
+  30% {
+    opacity: 0.97;
+  }
+  40% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0.9;
+  }
+  88% {
+    opacity: 0.98;
+  }
+  90% {
+    opacity: 0.94;
+  }
+  93% {
+    opacity: 0.9;
+  }
+  95% {
+    opacity: 0.99;
+  }
+  96% {
+    opacity: 0.93;
+  }
+  98% {
+    opacity: 1;
+  }
+  99% {
+    opacity: 0.93;
+  }
 }

assets/scss/components/_page-error.scss

@@ -0,0 +1,35 @@
+body[data-page="error"] {
+  background-image: url(/assets/img/cover.jpg);
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  line-height: 25px;
+  font-weight: normal;
+}
+
+.mayday {
+  font-size: 34px;
+  color: white;
+  animation: flicker 2s ease infinite;
+  padding: 0 21rem;
+  margin: 9% auto 50px auto;
+}
+
+.astro-wrap {
+  width: 175px;
+  height: 283px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.astronaut {
+  background: url(/assets/img/astronaut.png);
+  width: 175px;
+  height: 283px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(0, 50px);
+  animation: move 10s infinite;
+}

assets/scss/modules/_helpers.scss

@@ -0,0 +1,3 @@
+.text-center {
+  text-align: center;
+}

assets/scss/modules/_mixins.scss

@@ -1,59 +0,0 @@
-/*
-  (TEXT) PARAMS
-  =================
-  1. Namespace
-  2. Intensity
-  3. Text color
-  4. Background color (flat)
-  5. Highlight #1 color
-  6. Highlight #2 color
-  7. Width (px)
-  8. Height (px)
-*/
-
-@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {
-
-  color: $textColor;
-  position: relative;
-  $steps: $intensity;
-
-  // Ensure the @keyframes are generated at the root level
-  @at-root {
-    // We need two different ones
-    @for $i from 1 through 2 {
-      @keyframes #{$name}-anim-#{$i} {
-        @for $i from 0 through $steps {
-          #{percentage($i*(1/$steps))} {
-            clip: rect(
-              random($height)+px,
-              $width+px,
-              random($height)+px,
-              0
-            );
-          }
-        }
-      }
-    }
-  }
-  &:before,
-  &:after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: $background;
-    clip: rect(0, 0, 0, 0);
-  }
-  &:after {
-    left: 2px;
-    text-shadow: -1px 0 $highlightColor1;
-    animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
-  }
-  &:before {
-    left: -2px;
-    text-shadow: 2px 0 $highlightColor2;
-    animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
-  }
-
-}

assets/scss/uno.scss

@@ -8,6 +8,7 @@
 @import 'modules/reset.scss';
 @import 'modules/variables.scss';
 @import 'modules/mixins.scss';
+@import 'modules/helpers.scss';
 @import 'modules/grid.scss';
 @import 'modules/global.scss';
 @import 'modules/fonts.scss';
@@ -19,6 +20,7 @@
 @import 'components/panels.scss';
 @import 'components/buttons.scss';
 @import 'components/navigation.scss';
+@import 'components/page-error.scss';
 @import 'components/pagination.scss';
 @import 'components/icons.scss';
 @import 'components/post.scss';

bower.json

@@ -7,7 +7,9 @@
   ],
   "dependencies": {
     "ghostHunter": "git://github.com/i11ume/ghostHunter/",
-    "animate.css": "~3.2.0"
+    "animate.css": "~3.2.0",
+    "reading-time": "*",
+    "pace.js": "*"
   },
   "ignore": [
     "**/.*",

error.hbs

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+  {{! Meta }}
+  <title>Page not Found - {{@blog.title}}</title>
+
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <meta name="description" content="{{meta_description}}">
+
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="{{meta_title}}">
+  <meta name="twitter:description" content="{{meta_description}}">
+
+  <meta property="og:type" content="article">
+  <meta property="og:title" content="{{meta_title}}">
+  <meta property="og:description" content="{{meta_description}}">
+
+  {{!-- Favicon --}}
+  <link rel="shortcut icon" href="/assets/img/favicon.ico">
+  <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/apple-touch-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/assets/img/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/assets/img/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/assets/img/apple-touch-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/assets/img/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/assets/img/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/assets/img/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon-180x180.png">
+  <link rel="icon" type="image/png" href="/assets/img/favicon-192x192.png" sizes="192x192">
+  <link rel="icon" type="image/png" href="/assets/img/favicon-160x160.png" sizes="160x160">
+  <link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
+  <link rel="icon" type="image/png" href="/assets/img/favicon-16x16.png" sizes="16x16">
+  <link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
+  <meta name="msapplication-TileColor" content="#00a300">
+  <meta name="msapplication-TileImage" content="/assets/img/mstile-144x144.png">
+  <meta name="msapplication-config" content="/assets/img/browserconfig.xml">
+
+  {{! Styles and Scripts }}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/uno.css"}}" />
+
+  {{! Ghost Magic }}
+  {{ghost_head}}
+
+</head>
+<body data-page="error" class="text-center no-js">
+  <div class="panel-cover--overlay">
+    <div class="astro-wrap">
+      <a class="astronaut" href="#" title="return to base"></a>
+    </div>
+    <h1 class="mayday">
+    ..shhh....houston...404. ..shhhh...lost...in...space. .shhhhh...
+    </h1>
+
+    <a id="panic-button" class="btn btn-small" href="#">Panic button</a>
+
+  </div>
+
+  {{! Ghost Footer Magic }}
+  {{ghost_foot}}
+  {{! The main JavaScript file for Casper }}
+  <script type="text/javascript" src="{{asset "js/uno.js"}}"></script>
+  {{> google-analytics}}
+</body>
+</html>