added error page

Kikobeats · Feb 14, 2015 · f572957 · f572957
1 parent 7d37e47
commit f572957
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 48 deletions.
diff --git a/assets/css/uno.css b/assets/css/uno.css
diff --git a/assets/css/uno.css.map b/assets/css/uno.css.map
diff --git a/assets/js/src/__init.coffee b/assets/js/src/__init.coffee
@@ -3,7 +3,7 @@
 $(document).ready ->
 
   window.Uno = Uno =
-    version: '1.1.24'
+    version: '1.2'
 
     cover:
       width: -> $(".panel-cover").width()
@@ -23,7 +23,6 @@ $(document).ready ->
       if className is "" then 'error' else className
 
     readTime: do ->
-
       container = $('.content-wrapper')
       readingTime = $(".post-reading-time")
       isPostPage = container.length > 0 and readingTime.length > 0
@@ -50,7 +49,10 @@ $(document).ready ->
         DateInDays '.post-meta > time', ->
           container.readingTime readingTimeTarget: ".post-reading-time"
 
-  $("body").removeClass "no-js"
+  $('body').removeClass "no-js"
   context = document.body.dataset['page'] ?= Uno.context()
-
   Uno.cover.collapsed() if context is 'post'
+  $('#panic-button').click ->
+    s = document.createElement('script');
+    s.setAttribute('src','https://nthitz.github.io/turndownforwhatjs/tdfw.js');
+    document.body.appendChild(s);
diff --git a/assets/js/uno.js b/assets/js/uno.js
diff --git a/assets/scss/components/_media-queries.scss b/assets/scss/components/_media-queries.scss
@@ -60,9 +60,6 @@
     max-width: 600px;
     margin: 0 auto;
   }
-  .panel-cover__divider--secondary {
-    display: none;
-  }
   .panel-cover {
     width: 100%;
     height: 100%;
@@ -164,4 +161,16 @@
     display: block;
     margin-bottom: .4em;
   }
+
+  .panel-cover__divider {
+    margin: 15px auto;
+  }
+
+  .mayday {
+    width: 100%;
+    > h1 {
+      font-size: 20px;
+      line-height: 25px;
+    }
+  }
 }
diff --git a/assets/scss/components/_page-error.scss b/assets/scss/components/_page-error.scss
@@ -1,35 +1,40 @@
-body[data-page="error"] {
-  background-image: url(/assets/img/cover.jpg);
-  background-size: cover;
-  width: 100%;
-  height: 100%;
+body[data-page='error'] {
   font-size: 16px;
-  line-height: 25px;
   font-weight: normal;
+  line-height: 25px;
+  width: 100%;
+  height: 100%;
+  background-image: url(/assets/img/cover.jpg);
+  background-size: cover;
 }
-
 .mayday {
-  font-size: 34px;
-  color: white;
-  animation: flicker 2s ease infinite;
-  padding: 0 21rem;
-  margin: 9% auto 50px auto;
+  width: 500px;
+  margin: 150px auto 20px;
+  > h1 {
+    font-size: 24px;
+    color: $gray-lightest;
+    text-shadow: 0 1px 1px rgba(0,0,0,.4);
+    line-height: 35px;
+  }
+
+  &.options {
+  margin-top: 25px;
+  }
 }
 
 .astro-wrap {
+  position: relative;
   width: 175px;
   height: 283px;
-  margin: 0 auto;
-  position: relative;
+  margin: -7px auto;
 }
-
 .astronaut {
-  background: url(/assets/img/astronaut.png);
-  width: 175px;
-  height: 283px;
   position: absolute;
   top: 0;
   left: 0;
+  width: 175px;
+  height: 283px;
   transform: translate(0, 50px);
   animation: move 10s infinite;
+  background: url(/assets/img/astronaut.png);
 }
diff --git a/assets/scss/components/_panels.scss b/assets/scss/components/_panels.scss
@@ -60,7 +60,7 @@
 }
 .panel-cover__description {
   margin: 0 30px;
-  font-size: 14px;
+  font-size: 17px;
 }
 .panel-cover__divider {
   width: 50%;

diff --git a/assets/scss/modules/_global.scss b/assets/scss/modules/_global.scss
@@ -268,14 +268,3 @@ hr {
   margin: 2.2em 0 2.1em 0;
   border-top: 1px solid $gray-light;
 }
-// ------------------------------
-// MISC STYLES / HELPERS
-// ------------------------------
-
-.hidden {
-  display: none !important;
-}
-space-medium {
-  display: block;
-  height: 100px;
-}
diff --git a/assets/scss/modules/_helpers.scss b/assets/scss/modules/_helpers.scss
@@ -1,3 +1,7 @@
 .text-center {
   text-align: center;
 }
+
+.hidden {
+  display: none !important;
+}
diff --git a/error.hbs b/error.hbs
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
   {{! Meta }}
-  <title>Page not Found - {{@blog.title}}</title>
+  <title>Houston, we have a problem - {{@blog.title}}</title>
 
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">
@@ -52,14 +52,27 @@
 </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 class="mayday">
+      <hr class="panel-cover__divider">
+      <h1>
+      Houston, we have a problem. <br>
+      Houston, 404 error appeared.
+      </h1>
+      <hr class="panel-cover__divider panel-cover__divider--secondary">
+      <h1>
+        What happens now?
+      </h1>
+    </div>
+
+    <div class="mayday options">
+      <a id="panic-button" class="btn btn-small" href="#">Panic button</a>
+      <a id="safe-button" class="btn btn-small" href="/#open">Safe button</a>
+    </div>
 
   </div>
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "uno-zen",
   "description": "Minimalist and Elegant theme for Ghost",
-  "version": "1.1.24",
+  "version": "1.2",
   "author": {
     "name": "Kiko Beats",
     "url": "https://github.com/kikobeats"