FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust layout and apply text suggestions

This commit is contained in:
Andreas Nedbal 2022-01-01 18:00:58 +01:00 committed by Andreas Nedbal
parent 247d84415a
commit eed2640326
3 changed files with 146 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
public/404.html
View File

@ -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) {

92
public/422.html
View File

@ -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) {

92
public/500.html
View File

@ -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) {