diff --git a/Changelog.md b/Changelog.md
index c9cf741760ae9367cf6e3313db96cdd8409c8b46..f8d2f36316407dc50ae37043d587f7fa77d176df 100644
--- 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)
diff --git a/public/404.css b/public/404.css
new file mode 100644
index 0000000000000000000000000000000000000000..b0d7864ad23a1e9d0ef338568f852366ccf579b9
--- /dev/null
+++ b/public/404.css
@@ -0,0 +1,52 @@
+@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;
+}
diff --git a/public/404.html b/public/404.html
index f2d8f6910da55efd170ffd4a2314bbf1432918f6..f329c6708261652b7d891761b3dfa018d96459ab 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,85 +1,14 @@
<!DOCTYPE html>
<html>
-<head>
- <title>The page you were looking for doesn't exist (404)</title>
- <style type="text/css">
- @font-face{font-family:Roboto;src:url("Roboto-Regular.ttf")}
- @font-face{font-family:Roboto-BoldCondensed;src:url("Roboto-BoldCondensed.ttf")}
-
- body,
- html {
- overflow-y : hidden;
- }
-
- 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>
+ <head>
+ <title>The page you were looking for doesn't exist (404)</title>
+ <link href="favicon.ico" rel="shortcut icon">
+ <link href="404.css" type="text/css" rel="stylesheet">
+ </head>
+ <body>
+ <!-- This file lives in public/404.html -->
+ <div id="big-number" class="transparent">404</div>
+ <p>These are not the kittens you're looking for. Move along.</p>
+ <p><a href="javascript:history.back()">Go Back?</a></p>
+ </body>
</html>