Skip to content

Commit

Permalink
Additional tweaks to 404.
Browse files Browse the repository at this point in the history 
Simplify CSS styling the Google Search inputs. Improve the
appearance of the keyword input. Use `body` as wrapper. Add `lang`
attribute to `html`.

Thanks to @sindresorhus for suggestions and improvements in #941
  • Loading branch information
@necolas
necolas committed Jan 26, 2012
1 parent c04b0b5 commit 0bf9143
Showing 1 changed file with 21 additions and 26 deletions.
47 changes: 21 additions & 26 deletions 404.html
View file
@@ -1,47 +1,42 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Not Found :(</title>
<style>
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, input { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { margin: 0 10px; font-size: 20px; line-height: 1.4; background: #f0f0f0; color: #737373; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

Can we please remove that ugly pink selection color? Better to just use the default one in this case.
a { color: rgb(36, 109, 56); text-decoration: none; }
a:hover, a:focus, a:active { color: rgb(96, 73, 141); text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
h1 { font-size: 50px; text-align: center; margin: 0 10px; }
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%; }

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

@necolas Can I haz some more top padding? padding: 70px 10px 10px 10px

This comment has been minimized.

Sign in to view

Copy link
@necolas

necolas Jan 26, 2012

Author Member

No, because we have to consider mobile devices too and that would take up too much vertical space on smaller screens.

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member 
@media only screen and (min-device-width: 1024px) {
    html {
        padding: 70px 10px 10px 10px;
    }
}
html, input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
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; }
h1 { margin: 0 10px; font-size: 50px; text-align: center; }
h1 span { color: #bbb; }
h3 { margin: 1.5em 0 0.5em; }
p { margin: 1em 0; }
ul { margin: 1em 0; padding: 0 0 0 40px; }
.container { max-width: 500px; _width: 500px; padding: 30px 20px 50px; border: 1px solid #b3b3b3; margin: 40px auto 0; border-radius: 4px; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; background: #fcfcfc; }
.container div { max-width: 380px; margin: 0 auto; }
ul { padding: 0 0 0 40px; margin: 1em 0; }
.container { max-width: 380px; _width: 380px; margin: 0 auto; }
/* google search */
#goog-fixurl ul { list-style: none; padding: 0; margin: 0; }
#goog-fixurl form { margin: 0; }
#goog-fixurl input { font-size: 16px; line-height: normal; vertical-align: top; }
#goog-wm-qt { width: 220px; height: 20px; padding: 5px; border: 1px solid #bbb; margin: 5px 10px 0 0; }
#goog-wm-sb { display: inline-block; height: 32px; margin: 5px 0 0; white-space: nowrap; cursor: pointer; padding: 0 10px; border: 1px solid #bbb; border-radius: 2px; color: #444; background-color: #f5f5f5; background-image: -webkit-linear-gradient(#f5f5f5, #f1f1f1); background-image: -moz-linear-gradient(#f5f5f5, #f1f1f1); background-image: -ms-linear-gradient(#f5f5f5, #f1f1f1); background-image: -o-linear-gradient(#f5f5f5, #f1f1f1); *overflow: visible; *display: inline; *zoom: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#goog-wm-sb:hover, #goog-wm-sb:focus { border-color: #aaa; color: #222; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-color: #f8f8f8; background-image: -webkit-linear-gradient(#f8f8f8, #f1f1f1); background-image: -moz-linear-gradient(#f8f8f8, #f1f1f1); background-image: -ms-linear-gradient(#f8f8f8, #f1f1f1); background-image: -o-linear-gradient(#f8f8f8, #f1f1f1); }
#goog-wm-sb:focus { border-color: #105cb6; outline: 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:focus, #goog-wm-sb:focus { border-color: #105cb6; outline: 0; color: #222; }

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

A box-shadow glow is prettier than a hard darkblue border ;)

This comment has been minimized.

Sign in to view

Copy link
@necolas

necolas Jan 26, 2012

Author Member

That's subjective and I'd prefer to provide a visual cue to browsers that don't support box-shadow

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

That's true, but still, you can have the box-shadow in addition to the border. Something like this box-shadow: 0 0 2px #105CB6;
input::-moz-focus-inner { padding: 0; border: 0; }
</style>
</head>
<body>
<div class="container">

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

Just being picky, but since we only have one container and the styles are specific to this div, it should be an ID.

This comment has been minimized.

Sign in to view

Copy link
@necolas

necolas Jan 26, 2012

Author Member

A class is fine.

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

Not trying to be difficult here, but isn't the whole point of H5BP to show best practices?
You might prefer to use classes, but the right thing here is to use an ID.
If the .container had contained generic properties that could be reused in different divs, it would be right, but in this case the properties are specific to only this div, and therefor an ID should be used.

This comment has been minimized.

Sign in to view

Copy link
@necolas

necolas Jan 26, 2012

Author Member

It's not a best practice to use an ID, just something some people like to do.

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

That's subjective...

Like I said, you might prefer to use a class, but the right thing in this case is to use an ID.

ID == unique

.class == reusable

.container is not reusable and only targets an unique element, and should therefor use an ID.

Not trying to start a CSS war here, I just want it to be as correct as it can be, so not to confuse beginners.

From the spec:
The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree.

This comment has been minimized.

Sign in to view

Copy link
@necolas

necolas Jan 26, 2012

Author Member

It's not correct to say that using an ID is simply "the right thing". The ID attribute is only there to allow you to set a unique identifier on an element - http://dev.w3.org/html5/spec/Overview.html#the-id-attribute - and most modern development practices shy from styling elements based on their ID - http://oli.jp/2011/ids/ ...so it's staying as a class.

This comment has been minimized.

Sign in to view

Copy link
@paulirish

paulirish via email Jan 26, 2012

Member

This comment has been minimized.

Sign in to view

Copy link
@sindresorhus

sindresorhus Jan 26, 2012

Member

@necolas Thanks for the link. Even though I don't fully agree, I do see the argument for using classes ;)

@paulirish You're of course right, but I think it's impossible to discuss style without being subjective.
Just want the 404 page to be pretty and awesome 😃
Will try to hold back on the perfectionism.
<h1>Not found <span data-frown>:(</span></h1>
<div>
<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>
</div>
<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;
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
</script>
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</div>
Expand Down

0 comments on commit 0bf9143

Please sign in to comment.