45c1f93562
While people using screen readers already have keyboard shortcuts to jump to the <main> tag, there are people who navigate the page with the keyboard using just the tab key, and for them, this link provides a way to save time and start reading the main content instead of having to manually go through all the navigation links every time a new page is loaded. Note that we had to add an additional `width: 0` rule because Foundation's `element-invisible` would apply `1px` and the test checking for `visible: :hidden` would faile.
42 lines
710 B
HTML
42 lines
710 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Error 422 | The change you wanted was rejected</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
body {
|
|
background: #065687 url('/errors_bg.jpg');
|
|
color: #2E2F30;
|
|
font-family: arial, sans-serif;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
font-size: 160px;
|
|
line-height: 160px;
|
|
margin: 0;
|
|
}
|
|
|
|
h2 {
|
|
color: white;
|
|
}
|
|
|
|
div.error {
|
|
margin-top: -144px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main id="main" class="error">
|
|
<h1>422</h1>
|
|
<h2>The change you wanted was rejected.</h2>
|
|
</main>
|
|
</body>
|
|
</html>
|