Adjust layout and apply text suggestions
This commit is contained in:
parent
247d84415a
commit
eed2640326
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Page not found!</title>
|
<title>Page not found</title>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
|
@ -82,7 +82,11 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
.error-text-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
body {
|
body {
|
||||||
padding: 3rem 1rem 1rem 1rem;
|
padding: 3rem 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
@ -92,43 +96,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 992px) {
|
||||||
body {
|
body {
|
||||||
padding: 5rem 1rem 3rem 1rem;
|
padding: 5rem 1rem 3rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-artwork-container picture {
|
.error {
|
||||||
width: 768px;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text-container {
|
||||||
|
align-self: center;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="error-artwork-container">
|
<div class="error">
|
||||||
<picture>
|
<div class="error-artwork-container">
|
||||||
<source
|
<picture>
|
||||||
srcset="/images/errors/small/404.png 576w,
|
<source
|
||||||
/images/errors/medium/404.png 768w,
|
srcset="/images/errors/small/404.png 576w,
|
||||||
/images/errors/original/404.png 1200w">
|
/images/errors/medium/404.png 768w,
|
||||||
<img src="/images/errors/small/404.png"/>
|
/images/errors/original/404.png 1200w">
|
||||||
</picture>
|
<img src="/images/errors/small/404.png"/>
|
||||||
</div>
|
</picture>
|
||||||
<div class="text-center">
|
</div>
|
||||||
<h1>
|
<div class="error-text-container">
|
||||||
<span class="text-primary font-weight-bold">404</span>
|
<h1>
|
||||||
<small class="text-muted">Page not found</small>
|
<span class="text-primary font-weight-bold">404</span>
|
||||||
</h1>
|
<small class="text-muted">Page not found</small>
|
||||||
<p>
|
</h1>
|
||||||
Whatever you might have been searching for, it's not here!
|
<p>
|
||||||
</p>
|
Whatever you might have been looking for, it's not here.
|
||||||
<ul class="links">
|
</p>
|
||||||
<li class="d-none js-back-link">
|
<ul class="links">
|
||||||
<a href="javascript:history.back()">Back</a>
|
<li class="d-none js-back-link">
|
||||||
</li>
|
<a href="javascript:history.back()">Back</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="/">Home</a>
|
<li>
|
||||||
</li>
|
<a href="/">Home</a>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
if (window.history.length > 0) {
|
if (window.history.length > 0) {
|
||||||
|
|
|
@ -82,7 +82,11 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
.error-text-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
body {
|
body {
|
||||||
padding: 3rem 1rem 1rem 1rem;
|
padding: 3rem 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
@ -92,54 +96,62 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 992px) {
|
||||||
body {
|
body {
|
||||||
padding: 5rem 1rem 3rem 1rem;
|
padding: 5rem 1rem 3rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-artwork-container picture {
|
.error {
|
||||||
width: 768px;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text-container {
|
||||||
|
align-self: center;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="error-artwork-container">
|
<div class="error">
|
||||||
<picture>
|
<div class="error-artwork-container">
|
||||||
<source
|
<picture>
|
||||||
srcset="/images/errors/small/404.png 576w,
|
<source
|
||||||
/images/errors/medium/404.png 768w,
|
srcset="/images/errors/small/404.png 576w,
|
||||||
/images/errors/original/404.png 1200w">
|
/images/errors/medium/404.png 768w,
|
||||||
<img src="/images/errors/small/404.png"/>
|
/images/errors/original/404.png 1200w">
|
||||||
</picture>
|
<img src="/images/errors/small/404.png"/>
|
||||||
</div>
|
</picture>
|
||||||
<div class="text-center">
|
</div>
|
||||||
<h1>
|
<div class="error-text-container">
|
||||||
<span class="text-primary font-weight-bold">422</span>
|
<h1>
|
||||||
<small class="text-muted">Unprocessable Entity</small>
|
<span class="text-primary font-weight-bold">422</span>
|
||||||
</h1>
|
<small class="text-muted">Unprocessable Entity</small>
|
||||||
<p>
|
</h1>
|
||||||
Whatever your browser tried to send us, it was not right!
|
<p>
|
||||||
</p>
|
Whatever your browser tried to send us, it was not right.
|
||||||
<p class="mb-0">
|
</p>
|
||||||
<i>Please retry what you initially tried, and if the problem persists, don't hesitate to contact us!</i>
|
<p class="mb-0">
|
||||||
</p>
|
<i>Please retry what you just did. If the problem persists, don't hesitate to contact us:</i>
|
||||||
<ul class="links mt-0">
|
</p>
|
||||||
<li>
|
<ul class="links mt-0">
|
||||||
<a href="https://twitter.com/retrospring">Twitter</a>
|
<li>
|
||||||
</li>
|
<a href="https://twitter.com/Retrospring">Twitter: @Retrospring</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="https://github.com/retrospring/retrospring">GitHub</a>
|
<li>
|
||||||
</li>
|
<a href="https://github.com/Retrospring/retrospring">GitHub</a>
|
||||||
</ul>
|
</li>
|
||||||
<ul class="links">
|
</ul>
|
||||||
<li class="d-none js-back-link">
|
<ul class="links">
|
||||||
<a href="javascript:history.back()">Back</a>
|
<li class="d-none js-back-link">
|
||||||
</li>
|
<a href="javascript:history.back()">Back</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="/">Home</a>
|
<li>
|
||||||
</li>
|
<a href="/">Home</a>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
if (window.history.length > 0) {
|
if (window.history.length > 0) {
|
||||||
|
|
|
@ -82,7 +82,11 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
.error-text-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
body {
|
body {
|
||||||
padding: 3rem 1rem 1rem 1rem;
|
padding: 3rem 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
@ -92,54 +96,62 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 992px) {
|
||||||
body {
|
body {
|
||||||
padding: 5rem 1rem 3rem 1rem;
|
padding: 5rem 1rem 3rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-artwork-container picture {
|
.error {
|
||||||
width: 768px;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text-container {
|
||||||
|
align-self: center;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="error-artwork-container">
|
<div class="error">
|
||||||
<picture>
|
<div class="error-artwork-container">
|
||||||
<source
|
<picture>
|
||||||
srcset="/images/errors/small/500.png 576w,
|
<source
|
||||||
/images/errors/medium/500.png 768w,
|
srcset="/images/errors/small/500.png 576w,
|
||||||
/images/errors/original/500.png 1200w">
|
/images/errors/medium/500.png 768w,
|
||||||
<img src="/images/errors/small/500.png"/>
|
/images/errors/original/500.png 1200w">
|
||||||
</picture>
|
<img src="/images/errors/small/500.png"/>
|
||||||
</div>
|
</picture>
|
||||||
<div class="text-center">
|
</div>
|
||||||
<h1>
|
<div class="error-text-container">
|
||||||
<span class="text-primary font-weight-bold">500</span>
|
<h1>
|
||||||
<small class="text-muted">Internal Server Error</small>
|
<span class="text-primary font-weight-bold">500</span>
|
||||||
</h1>
|
<small class="text-muted">Internal Server Error</small>
|
||||||
<p>
|
</h1>
|
||||||
If this page shows up, something went wrong and we already sent out our army of raccoons to fix it!
|
<p>
|
||||||
</p>
|
If this page shows up, something went wrong. We dispatched our army of raccoons to fix it.
|
||||||
<p class="mb-0">
|
</p>
|
||||||
<i>We get notified about issues, but feel free to contact us:</i>
|
<p class="mb-0">
|
||||||
</p>
|
<i>We get notified about issues, but feel free to contact us:</i>
|
||||||
<ul class="links mt-0">
|
</p>
|
||||||
<li>
|
<ul class="links mt-0">
|
||||||
<a href="https://twitter.com/retrospring">Twitter</a>
|
<li>
|
||||||
</li>
|
<a href="https://twitter.com/Retrospring">Twitter: @Retrospring</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="https://github.com/retrospring/retrospring">GitHub</a>
|
<li>
|
||||||
</li>
|
<a href="https://github.com/Retrospring/retrospring">GitHub</a>
|
||||||
</ul>
|
</li>
|
||||||
<ul class="links">
|
</ul>
|
||||||
<li class="d-none js-back-link">
|
<ul class="links">
|
||||||
<a href="javascript:history.back()">Back</a>
|
<li class="d-none js-back-link">
|
||||||
</li>
|
<a href="javascript:history.back()">Back</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="/">Home</a>
|
<li>
|
||||||
</li>
|
<a href="/">Home</a>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
if (window.history.length > 0) {
|
if (window.history.length > 0) {
|
||||||
|
|
Loading…
Reference in New Issue