Merge pull request #4079 from Flaburgan/patch-3

Fix #4078 by refactoring 404.html

Merge pull request #4079 from Flaburgan/patch-3
68da48f0 · Jonne Haß · 22964897 · 48dcea07 · 68da48f0 · 68da48f0
--- a/Changelog.md
+++ b/Changelog.md
@@ -6,6 +6,7 @@
 * Rename bitcoin_wallet_id setting to bitcoin_address [#4485](https://github.com/diaspora/diaspora/pull/4485)
 * Batch insert posts into stream collection for a small speedup [#4341](https://github.com/diaspora/diaspora/pull/4351)
 * Ported fileuploader to Backbone and refactored publisher views [#4480](https://github.com/diaspora/diaspora/pull/4480)
+* Refactor 404.html, fix [#4078](https://github.com/diaspora/diaspora/issues/4078)
 ## Bug fixes
 * Highlight down arrow at the user menu on hover [#4441](https://github.com/diaspora/diaspora/pull/4441)

--- a/public/404.css
+++ b/public/404.css
+@font-face {
+	font-family:Roboto;
+	src: local("Roboto-Regular.ttf")
+}
+@font-face {
+	font-family:Roboto-BoldCondensed;
+	src: local("Roboto-BoldCondensed.ttf")
+}
+html {
+	background: url("bgpattern.png") #ebebeb;
+	text-align: center;
+}
+body {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	bottom:0px;
+	margin: 0px;
+	font-family: Roboto, Helvetica, Arial, sans-serif;
+	text-align: center;
+	text-shadow: 0 1px 0 #fff;
+	color: #666;
+	background: url("peeping-tom.png") no-repeat bottom;
+}
+#big-number {
+  font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
+  font-size: 250px;
+  text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
+  color: #ddd;
+}
+a {
+  text-decoration : none;
+  color : rgb(42,156,235);
+}
+a:hover {
+  text-decoration : underline;
+}
+.transparent {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
+  opacity: 0.8;
+  -moz-opacity: 0.8;
+  -khtml-opacity: 0.8;
+  -webkit-opacity: 0.8;
+}
--- a/public/404.html
+++ b/public/404.html
 <!DOCTYPE html>
 <html>
-<head>
+	<head>
-  <title>The page you were looking for doesn't exist (404)</title>
+		<title>The page you were looking for doesn't exist (404)</title>
-  <style type="text/css">
+		<link href="favicon.ico" rel="shortcut icon">
-    @font-face{font-family:Roboto;src:url("Roboto-Regular.ttf")}
+		<link href="404.css" type="text/css" rel="stylesheet">
-    @font-face{font-family:Roboto-BoldCondensed;src:url("Roboto-BoldCondensed.ttf")}
+	</head>
+	<body>
-    body,
+		<!-- This file lives in public/404.html -->
-    html {
+		<div id="big-number" class="transparent">404</div>
-      overflow-y : hidden;
+		<p>These are not the kittens you're looking for. Move along.</p>
-    }
+		<p><a href="javascript:history.back()">Go Back?</a></p>
+	</body>
-    body {
-      margin-bottom: 0;
-      padding-bottom: 0;
-      margin-top: 5%;
-      background-color: #fff;
-      color: #666;
-      text-align: center;
-      font-family: Roboto, Helvetica, Arial, sans-serif;
-      background-image: url("bgpattern.png");
-      text-shadow: 0 1px 0 #fff;
-    }
-    #big-number {
-      font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
-      font-size: 250px;
-      text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
-      color: #ddd;
-    }
-    a {
-      text-decoration : none;
-      color : rgb(42,156,235);
-    }
-    a:hover {
-      text-decoration : underline;
-    }
-    .transparent {
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-      filter: alpha(opacity=80);
-      -moz-opacity: 0.8;
-      -khtml-opacity: 0.8;
-      opacity: 0.8;
-    }
-    #cat-footer {
-      width: 100%;
-      position: fixed;
-      text-align: center;
-      bottom : -8px;
-      left : 0;
-    }
-    #content {
-      z-index: 3;
-      position: relative;
-    }
-  </style>
-</head>
-<body>
-  <!-- This file lives in public/404.html -->
-  <div id="big-number" class="transparent">
-    404
-  </div>
-  <div id="content">
-    These are not the kittens you're looking for.  Move along.
-    <br/>
-    <br/>
-    <a href="/">
-      Go Back?
-    </a>
-  </div>
-  <div id="cat-footer" class="transparent">
-    <img src="peeping-tom.png">
-  </div>
-</body>
 </html>