Fix error pages

benediktvaldez · benediktvaldez · commit bc43eeba25eb · 2015-02-23T02:27:04.000Z
diff --git a/src/scss/components/_section.scss b/src/scss/components/_section.scss
@@ -2,6 +2,7 @@
 section {
   padding-top: $spacing;
   padding-bottom: 0;
+  position: relative;
 
   article {
     padding: $spacing*2 0 $spacing*2;
diff --git a/src/views/404.jade b/src/views/404.jade
@@ -1,33 +1,32 @@
-extends shared/_layout
+extends shared/_layout-errors
 
 block hero
-  section.section.full.dark
-    .inner
-      .limit.padding.tight.text-center
+  section.section.dark(window-height)
+    row(vertical-center): column.large-6.medium-8.col-centered
+      .text-center
         h1 awkward..!
         h3 This page doesn't exist!
-        p.large.
+        p.
           Bad link? Mistyped address? We're not sure, but since this documentation
-          is a single page website you're either just messing about, getting
-          <a href="http://www.urbandictionary.com/define.php?term=trixed" target="_blank">trixed</a>
-          or simply lost!
+          is a single page website you're either just messing about or lost!
 
-        p.large.
+        p.
           Don’t worry though, it doesn't have to be anybody's fault, just
-          head on back to our <a href="/">front page</a> and start having fun!
+          head on back to our <a class="light" href="/">front page</a> and start having fun!
 
 block content
-  section.section.full.light#about
-    .limit.padding.tight.text-center
-      p.large.
+  section.section.light(window-height)
+    row: column.large-8.medium-10.col-centered: box
+      p.text-center.large.
         If you’re in denial and believe this is a conspiracy, please enjoy this
         thorough video tutorial on bathing your pet guinea pig.
 
-      | <iframe class="video" width="700" height="525" src="//www.youtube-nocookie.com/embed/EJ7u_zp7BVs?rel=0" frameborder="0" allowfullscreen></iframe>
+      figure.video.
+        <iframe class="video" width="700" height="525" src="//www.youtube-nocookie.com/embed/EJ7u_zp7BVs?rel=0" frameborder="0" allowfullscreen></iframe>
 
 block footer
-  .limit.padding
-    p.
+  footer: section.dark
+    row: column.medium-10.large-8.col-centered: box: p.text-large.
       If you're still here, you must be seriously bored!<br/>
       Perhaps you should check out our
       <a href="https://github.com/kristjanmik/apis" target="_blank">github repo</a>
diff --git a/src/views/500.jade b/src/views/500.jade
@@ -1,19 +1,19 @@
-extends shared/_layout
+extends shared/_layout-errors
 
 block hero
-  section.section.full.dark
-    .inner
-      .limit.padding.tight.text-center
+  section.section.dark(window-height)
+    row(vertical-center): column.large-6.medium-8.col-centered
+      .text-center
         h1 Oops..!
         h3 This time it's our fault :(
-        p.large
-          a(href='javascript:window.location.reload()') Try again
-          | in a little while
+        p.text-large
+          a.light(href='javascript:window.location.reload()') Try again
+          |  in a little while
 
 block footer
-  .limit.padding
-    p.
+  footer: section.dark
+    row: column.medium-10.large-8.col-centered: box: p.text-large.
       If you're still here, we must be having some problems!<br/>
       Perhaps you should check out our
       <a href="https://github.com/kristjanmik/apis" target="_blank">github repo</a>
-      for now.
+      and do some contributing?
diff --git a/src/views/shared/_layout-errors.jade b/src/views/shared/_layout-errors.jade
@@ -0,0 +1,24 @@
+include _mixins
+block vars
+  - var title = 'apis.is'
+
+doctype html
+//[if lt IE 9]><html class="no-js lt-ie10 lt-ie9"><![endif]
+//[if IE 9]>   <html class="no-js lt-ie10 ie9"><![endif]
+//[if gt IE 9]><!
+html.loading.no-js
+  //<![endif]
+  include _head
+
+  body#apis
+    include _loader
+
+    pagewrap
+      block hero
+      main
+        block content
+
+      block footer
+        include _footer
+
+    include _javascript
