diff --git a/404.html b/404.html index fdace4ab14..00c81b5e1f 100644 --- a/404.html +++ b/404.html @@ -2,156 +2,58 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Page Not Found :(</title> + <title>Page Not Found</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> <style> - ::-moz-selection { - background: #b3d4fc; - text-shadow: none; - } - ::selection { - background: #b3d4fc; - text-shadow: none; + * { + margin: 0; + line-height: 1.5; } html { - padding: 30px 10px; - font-size: 20px; - line-height: 1.4; - color: #737373; - background: #f0f0f0; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - } - - html, - input { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #888; + font-family: sans-serif; + text-align: center; } body { - max-width: 500px; - _width: 500px; - padding: 30px 20px 50px; - border: 1px solid #b3b3b3; - border-radius: 4px; - margin: 0 auto; - box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; - background: #fcfcfc; + left: 50%; + margin: -43px 0 0 -150px; + position: absolute; + top: 50%; + width: 300px; } h1 { - margin: 0 10px; - font-size: 50px; - text-align: center; - } - - h1 span { - color: #bbb; - } - - h3 { - margin: 1.5em 0 0.5em; + color: #555; + font-size: 2em; + font-weight: 400; } p { - margin: 1em 0; + line-height: 1.2; } - ul { - padding: 0 0 0 40px; - margin: 1em 0; - } + @media only screen and (max-width: 270px) { - .container { - max-width: 380px; - _width: 380px; - margin: 0 auto; - } + body { + margin: 10px auto; + position: static; + width: 95%; + } - /* google search */ + h1 { + font-size: 1.5em; + } - #goog-fixurl ul { - list-style: none; - padding: 0; - margin: 0; } - #goog-fixurl form { - margin: 0; - } - - #goog-wm-qt, - #goog-wm-sb { - border: 1px solid #bbb; - font-size: 16px; - line-height: normal; - vertical-align: top; - color: #444; - border-radius: 2px; - } - - #goog-wm-qt { - width: 220px; - height: 20px; - padding: 5px; - margin: 5px 10px 0 0; - box-shadow: inset 0 1px 1px #ccc; - } - - #goog-wm-sb { - display: inline-block; - height: 32px; - padding: 0 10px; - margin: 5px 0 0; - white-space: nowrap; - cursor: pointer; - background-color: #f5f5f5; - background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1); - background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1); - background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1); - background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - *overflow: visible; - *display: inline; - *zoom: 1; - } - - #goog-wm-sb:hover, - #goog-wm-sb:focus { - border-color: #aaa; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - background-color: #f8f8f8; - } - - #goog-wm-qt:hover, - #goog-wm-qt:focus { - border-color: #105cb6; - outline: 0; - color: #222; - } - - input::-moz-focus-inner { - padding: 0; - border: 0; - } </style> </head> <body> - <div class="container"> - <h1>Not found <span>:(</span></h1> - <p>Sorry, but the page you were trying to view does not exist.</p> - <p>It looks like this was the result of either:</p> - <ul> - <li>a mistyped address</li> - <li>an out-of-date link</li> - </ul> - <script> - var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host; - </script> - <script src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script> - </div> + <h1>Page Not Found</h1> + <p>Sorry, but the page you were trying to view does not exist.</p> </body> </html> +<!-- IE requires 512+ bytes: http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml --> diff --git a/CHANGELOG.md b/CHANGELOG.md index 96b1945535..e9489bb2c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### HEAD +* Redesign 404 page ([#1443](https://github.com/h5bp/html5-boilerplate/pull/1443)). * Remove IE 6/7 hacks from `main.css`. * Update to Normalize.css 2.1.3. * Remove IE conditional classes ([#1290](https://github.com/h5bp/html5-boilerplate/issues/1290), [#1187](https://github.com/h5bp/html5-boilerplate/issues/1187])).