diff options
| author | Antoine D <flaburgan@geexxx.fr> | 2013-03-27 19:50:22 +0400 |
|---|---|---|
| committer | flaburgan <flaburgan@geexxx.fr> | 2013-09-19 02:55:46 +0400 |
| commit | 48dcea07460f175fc3bb93a97da4a1d99276292f (patch) | |
| tree | 3532de633a4f853af5fd6f720749312dfdc7df15 /public | |
| parent | 5a821efa18e87d9f7e3bbc65467b901b1b5080c7 (diff) | |
Fix #4078 by refactoring 404.html
I moved 404 to the assets to avoid loading font and images from joindiaspora.
#- Can I move the design to a 404-style.css file which will be in the public repository too ?
#- This pull request proposes to insert the two font files and the cat image, do you agree ? Depend of amazon seems really bad for me.
Diffstat (limited to 'public')
| -rw-r--r-- | public/404.css | 52 | ||||
| -rw-r--r-- | public/404.html | 93 |
2 files changed, 63 insertions, 82 deletions
diff --git a/public/404.css b/public/404.css new file mode 100644 index 000000000..b0d7864ad --- /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 f2d8f6910..f329c6708 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> |