WIP – refactored 404 view

Kikobeats · Feb 22, 2015 · 63eaef6 · 63eaef6
1 parent d7406b3
commit 63eaef6
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 260 deletions.
diff --git a/assets/css/uno.css b/assets/css/uno.css
diff --git a/assets/js/src/__init.coffee b/assets/js/src/__init.coffee
@@ -58,5 +58,5 @@ $ ->
 
   $('#panic-button').click ->
     s = document.createElement('script')
-    s.setAttribute('src','/assets/js/tdfw.js')
+    s.setAttribute('src','https://nthitz.github.io/turndownforwhatjs/tdfw.js')
     document.body.appendChild(s)
diff --git a/assets/js/tdfw.js b/assets/js/tdfw.js
diff --git a/assets/js/uno.js b/assets/js/uno.js
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
@@ -1,7 +1,3 @@
-// ------------------------------
-// BUTTONS
-// ------------------------------
-
 .btn {
   padding: 10px 20px;
   font-size: .9em;
@@ -37,10 +33,6 @@
   }
 }
 
-// ------------------------------
-// MOBILE MENU BUTTON
-// ------------------------------
-
 .btn-mobile-menu {
   position: fixed;
   top: 0;

diff --git a/assets/scss/components/_page-error.scss b/assets/scss/components/_page-error.scss
@@ -1,26 +1,23 @@
 body[data-page='error'] {
+  width: 100%;
+  height: 100%;
   font-size: 16px;
   font-weight: normal;
   line-height: 25px;
-  width: 100%;
-  height: 100%;
+  text-align: center;
   @include background-filter;
-
   > article {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    @include center-absolute;
   }
 }
 .mayday {
   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;
+    color: $gray-lightest;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
   }
 }
 .astro-wrap {
@@ -35,7 +32,7 @@ body[data-page='error'] {
   left: 0;
   width: 175px;
   height: 283px;
+  background: url('/assets/img/astronaut.png');
   transform: translate(0, 50px);
   animation: move 10s infinite;
-  background: url(/assets/img/astronaut.png);
 }
diff --git a/assets/scss/modules/_mixins.scss b/assets/scss/modules/_mixins.scss
@@ -6,8 +6,8 @@
 
 @mixin center-absolute {
   display: flex;
-    justify-content: center;
-    align-items: center;
+  justify-content: center;
+  align-items: center;
 }
 
 @mixin font-shadow {

diff --git a/error.hbs b/error.hbs
@@ -8,26 +8,25 @@
     <link rel="stylesheet" type="text/css" href="{{asset "css/uno.css"}}" />
     {{ghost_head}}
   </head>
-  <body data-page="error" class="text-center no-js">
+  <body>
     <article>
       <section>
         <div class="astro-wrap">
           <a class="astronaut" href="#" title="return to base"></a>
         </div>
         <div class="mayday">
-          <hr class="panel-cover__divider">
           <h1>
           Houston, we've got a problem. <br>
           Houston, 404 error appeared.
           </h1>
-          <hr class="panel-cover__divider panel-cover__divider--secondary">
+          <hr class="divider short">
           <h1>
           What happens now?
           </h1>
         </div>
         <div class="astro-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>
+          <a id="panic-button" class="btn small" href="#">Panic button</a>
+          <a id="safe-button" class="btn small" href="/#open">Safe button</a>
         </div>
       </section>
     </article>