Skip to content

Commit 9521316

Browse files
sdavidssdavids
committed
refactor: improve error pages
Signed-off-by: Sebastian Davids <[email protected]>
1 parent d87618a commit 9521316

File tree

3 files changed

+51
-315
lines changed

3 files changed

+51
-315
lines changed

‎hp/src/e/403.html

+17-104
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,21 @@
33
SPDX-FileCopyrightText: © 2023 Sebastian Davids <[email protected]>
44
SPDX-License-Identifier: Apache-2.0
55
-->
6-
<html lang="en" dir="ltr">
6+
<html lang="en">
77
<head>
88
<meta charset="utf-8" />
9-
<meta name="description" content="you may not access the requested page" />
109
<title>Forbidden</title>
10+
<meta name="viewport" content="width=device-width,initial-scale=1" />
11+
<meta name="color-scheme" content="light dark" />
1112
<style>
1213
html {
1314
-webkit-text-size-adjust: 100%;
1415
-webkit-tap-highlight-color: transparent;
1516
font-family: ui-sans-serif, system-ui, sans-serif;
16-
line-height: 1.5;
1717
}
1818

1919
body {
20-
text-align: center;
2120
background-color: #e5e7eb;
22-
flex-direction: column;
23-
min-height: 100vh;
24-
margin: 0;
25-
display: flex;
26-
}
27-
28-
main {
29-
flex-grow: 1;
30-
place-items: center;
31-
display: grid;
32-
}
33-
34-
footer {
35-
padding: 3rem;
3621
}
3722

3823
a {
@@ -41,104 +26,32 @@
4126
text-decoration: inherit;
4227
}
4328

44-
h1 {
45-
letter-spacing: -0.025em;
46-
margin: 1rem 0 0;
47-
font-size: 1.875rem;
48-
font-weight: 700;
49-
line-height: 2.25rem;
50-
}
51-
52-
p {
53-
margin: 0;
54-
padding: 0 1rem;
55-
}
56-
57-
.mt-10 {
58-
margin-top: 2.5rem;
59-
}
60-
61-
.mt-6 {
62-
margin-top: 1.5rem;
63-
}
64-
65-
.text-sm {
66-
font-size: 0.875rem;
67-
line-height: 1.25rem;
68-
}
69-
70-
.font-semibold {
71-
font-weight: 600;
72-
}
73-
74-
.text-gray-700 {
75-
color: #374151;
76-
}
77-
78-
@media (min-width: 640px) {
79-
h1 {
80-
font-size: 3rem;
81-
line-height: 1;
82-
}
83-
84-
.sm\:text-base {
85-
font-size: 1rem;
86-
line-height: 1.5rem;
87-
}
88-
}
89-
9029
@media (prefers-color-scheme: dark) {
9130
body {
92-
background-color: #000;
93-
}
94-
95-
.dark\:text-gray-300 {
9631
color: #d1d5db;
32+
background-color: #000;
9733
}
9834
}
9935
</style>
100-
<meta name="viewport" content="width=device-width,initial-scale=1" />
101-
<meta name="color-scheme" content="light dark" />
102-
<meta
103-
name="theme-color"
104-
media="(prefers-color-scheme: light)"
105-
content="#fff"
106-
/>
107-
<meta
108-
name="theme-color"
109-
media="(prefers-color-scheme: dark)"
110-
content="#000"
111-
/>
112-
<meta name="referrer" content="strict-origin-when-cross-origin" />
113-
<meta name="robots" content="noindex" />
114-
<link rel="icon" href="../favicon.ico" sizes="any" />
115-
<link rel="icon" href="../favicon.svg" type="image/svg+xml" />
116-
<link
117-
rel="apple-touch-icon"
118-
href="../apple-touch-icon.png"
119-
sizes="180x180"
120-
/>
121-
<meta name="rating" content="general" />
12236
</head>
123-
<body>
124-
<main>
37+
<body
38+
style="
39+
display: flex;
40+
flex-direction: column;
41+
min-height: 100vh;
42+
text-align: center;
43+
"
44+
>
45+
<main style="flex-grow: 1; place-items: center; display: grid">
12546
<div>
126-
<p class="font-semibold">403</p>
12747
<h1>Forbidden</h1>
128-
<p class="mt-6 text-gray-700 dark:text-gray-300">
129-
Sorry, you may not access the requested page.
48+
<p style="margin-top: 2.5rem">
49+
<a href="/"><span aria-hidden="true">← </span>Back to home</a>
13050
</p>
131-
<div class="mt-10">
132-
<a href="https://sdavids.de" class="text-sm font-semibold"
133-
><span aria-hidden="true">←</span> Back to home</a
134-
>
135-
</div>
13651
</div>
13752
</main>
138-
<footer>
139-
<p class="text-sm sm:text-base">
140-
©&nbsp;2022-2025 Sebastian&nbsp;Davids
141-
</p>
53+
<footer style="padding: 3rem">
54+
<p>©&nbsp;2022-2025 Sebastian&nbsp;Davids</p>
14255
</footer>
14356
</body>
14457
</html>

‎hp/src/e/404.html

+17-107
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,21 @@
33
SPDX-FileCopyrightText: © 2023 Sebastian Davids <[email protected]>
44
SPDX-License-Identifier: Apache-2.0
55
-->
6-
<html lang="en" dir="ltr">
6+
<html lang="en">
77
<head>
88
<meta charset="utf-8" />
9-
<meta
10-
name="description"
11-
content="we could not find the page you’re looking for"
12-
/>
139
<title>Page not found</title>
10+
<meta name="viewport" content="width=device-width,initial-scale=1" />
11+
<meta name="color-scheme" content="light dark" />
1412
<style>
1513
html {
1614
-webkit-text-size-adjust: 100%;
1715
-webkit-tap-highlight-color: transparent;
1816
font-family: ui-sans-serif, system-ui, sans-serif;
19-
line-height: 1.5;
2017
}
2118

2219
body {
23-
text-align: center;
2420
background-color: #e5e7eb;
25-
flex-direction: column;
26-
min-height: 100vh;
27-
margin: 0;
28-
display: flex;
29-
}
30-
31-
main {
32-
flex-grow: 1;
33-
place-items: center;
34-
display: grid;
35-
}
36-
37-
footer {
38-
padding: 3rem;
3921
}
4022

4123
a {
@@ -44,104 +26,32 @@
4426
text-decoration: inherit;
4527
}
4628

47-
h1 {
48-
letter-spacing: -0.025em;
49-
margin: 1rem 0 0;
50-
font-size: 1.875rem;
51-
font-weight: 700;
52-
line-height: 2.25rem;
53-
}
54-
55-
p {
56-
margin: 0;
57-
padding: 0 1rem;
58-
}
59-
60-
.mt-10 {
61-
margin-top: 2.5rem;
62-
}
63-
64-
.mt-6 {
65-
margin-top: 1.5rem;
66-
}
67-
68-
.text-sm {
69-
font-size: 0.875rem;
70-
line-height: 1.25rem;
71-
}
72-
73-
.font-semibold {
74-
font-weight: 600;
75-
}
76-
77-
.text-gray-700 {
78-
color: #374151;
79-
}
80-
81-
@media (min-width: 640px) {
82-
h1 {
83-
font-size: 3rem;
84-
line-height: 1;
85-
}
86-
87-
.sm\:text-base {
88-
font-size: 1rem;
89-
line-height: 1.5rem;
90-
}
91-
}
92-
9329
@media (prefers-color-scheme: dark) {
9430
body {
95-
background-color: #000;
96-
}
97-
98-
.dark\:text-gray-300 {
9931
color: #d1d5db;
32+
background-color: #000;
10033
}
10134
}
10235
</style>
103-
<meta name="viewport" content="width=device-width,initial-scale=1" />
104-
<meta name="color-scheme" content="light dark" />
105-
<meta
106-
name="theme-color"
107-
media="(prefers-color-scheme: light)"
108-
content="#fff"
109-
/>
110-
<meta
111-
name="theme-color"
112-
media="(prefers-color-scheme: dark)"
113-
content="#000"
114-
/>
115-
<meta name="referrer" content="strict-origin-when-cross-origin" />
116-
<meta name="robots" content="noindex" />
117-
<link rel="icon" href="../favicon.ico" sizes="any" />
118-
<link rel="icon" href="../favicon.svg" type="image/svg+xml" />
119-
<link
120-
rel="apple-touch-icon"
121-
href="../apple-touch-icon.png"
122-
sizes="180x180"
123-
/>
124-
<meta name="rating" content="general" />
12536
</head>
126-
<body>
127-
<main>
37+
<body
38+
style="
39+
display: flex;
40+
flex-direction: column;
41+
min-height: 100vh;
42+
text-align: center;
43+
"
44+
>
45+
<main style="flex-grow: 1; place-items: center; display: grid">
12846
<div>
129-
<p class="font-semibold">404</p>
13047
<h1>Page not found</h1>
131-
<p class="mt-6 text-gray-700 dark:text-gray-300">
132-
Sorry, we could not find the page you’re looking for.
48+
<p style="margin-top: 2.5rem">
49+
<a href="/"><span aria-hidden="true">← </span>Back to home</a>
13350
</p>
134-
<div class="mt-10">
135-
<a href="https://sdavids.de" class="text-sm font-semibold"
136-
><span aria-hidden="true">←</span> Back to home</a
137-
>
138-
</div>
13951
</div>
14052
</main>
141-
<footer>
142-
<p class="text-sm sm:text-base">
143-
©&nbsp;2022-2025 Sebastian&nbsp;Davids
144-
</p>
53+
<footer style="padding: 3rem">
54+
<p>©&nbsp;2022-2025 Sebastian&nbsp;Davids</p>
14555
</footer>
14656
</body>
14757
</html>

0 commit comments

Comments
 (0)