Add custom 404 page

nkprince007 · hemangsk · commit 5d8842de155e · 2017-08-31T21:44:56.000+05:30
Fixes #360
diff --git a/404.html b/404.html
@@ -0,0 +1,51 @@
+---
+---
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Page Not Found | {{ site.title }}</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    .hidden-until-ready {
+      visibility: hidden;
+    }
+  </style>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
+  <link rel="stylesheet" href="resources/vendors/materialize/css/materialize.css">
+  <link rel="stylesheet" href="resources/css/404.css">
+  <link rel="stylesheet" href="https://rawgit.com/coala/coalaCSS/master/coala.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400,400i,700,700i|Roboto:100,200,300,400,500,600,700,800,900|Ubuntu+Mono|Overpass+Mono|Inconsolata" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+</head>
+<body class="hidden-until-ready">
+  <main>
+    <div class="coala-book container">
+      <img src="resources/images/coala-404.png" alt="missing coala in shock">
+    </div>
+    <div class="error container">
+      <h3 class="message">Oops! That was unexpected...</h3>
+      <p><span>coala</span> couldn't find the page you're looking for.</p>
+      <div class="buttons center">
+        <a href="/" class="btn home">Crawl back home</a>
+      </div>
+    </div>
+  </main>
+  <footer class="page-footer footer-light transparent">
+    <div class="row">
+      <div class="col m6 s12 offset-m3 center"> <img class="footer-logo" src="https://api.coala.io/en/latest/_static/images/coala_logo.svg" alt="coala"> <span class="footer-title">{{ site.organization }}</span> </div>
+    </div>
+    <div class="footer-small-title center"> <span class="blue-grey-text text-lighten-3 uppercase"> Licensed under {{ site.license }}</span> </div>
+  </footer>
+  <script>
+    window.onload = (e) => {
+      document.querySelectorAll(".hidden-until-ready").forEach(el => {
+        el.classList.remove('hidden-until-ready');
+      });
+    };
+  </script>
+</body>
+</html>
diff --git a/resources/css/404.css b/resources/css/404.css
@@ -0,0 +1,62 @@
+html, body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+}
+main {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: #fafafa;
+}
+main .container {
+    padding: 3% 5%;
+}
+.error {
+    margin-left: -12.5%;
+    font-family: "Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
+}
+.error .message {
+    display: block;
+    font-weight: bold;
+    font-size: 4.5vw;
+    color: #004D40;
+}
+.error p {
+    font-size: 2vw;
+    font-weight: 200;
+}
+.error p span {
+    font-weight: 400;
+}
+.error .home {
+    text-transform: uppercase;
+}
+.error .buttons {
+    padding: 3%;
+}
+.coala-book {
+    text-align: center;
+    opacity: 0.85;
+}
+.coala-book img {
+    width: 80%;
+}
+@media only screen and (max-width:760px) {
+    main {
+        flex-direction: column;
+    }
+    .error {
+        margin-left: auto;
+        text-align: center;
+    }
+    .error p {
+        font-size: 3.5vw;
+    }
+    .coala-book img {
+        width: 100%;
+    }
+}
diff --git a/resources/images/coala-404.png b/resources/images/coala-404.png
