Skip to content

Commit 32720ac

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

File tree

3 files changed

+103
-370
lines changed

3 files changed

+103
-370
lines changed

‎hp/src/e/403.html

+5-93
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,24 @@
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 {
2020
text-align: center;
2121
background-color: #e5e7eb;
2222
flex-direction: column;
2323
min-height: 100vh;
24-
margin: 0;
2524
display: flex;
2625
}
2726

@@ -31,114 +30,27 @@
3130
display: grid;
3231
}
3332

34-
footer {
35-
padding: 3rem;
36-
}
37-
3833
a {
3934
color: inherit;
4035
-webkit-text-decoration: inherit;
4136
text-decoration: inherit;
4237
}
4338

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-
9039
@media (prefers-color-scheme: dark) {
9140
body {
9241
background-color: #000;
9342
}
94-
95-
.dark\:text-gray-300 {
96-
color: #d1d5db;
97-
}
9843
}
9944
</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" />
12245
</head>
12346
<body>
12447
<main>
12548
<div>
126-
<p class="font-semibold">403</p>
12749
<h1>Forbidden</h1>
128-
<p class="mt-6 text-gray-700 dark:text-gray-300">
129-
Sorry, you may not access the requested page.
50+
<p>
51+
<a href="/"><span aria-hidden="true">← </span>Back to home</a>
13052
</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>
13653
</div>
13754
</main>
138-
<footer>
139-
<p class="text-sm sm:text-base">
140-
©&nbsp;2022-2025 Sebastian&nbsp;Davids
141-
</p>
142-
</footer>
14355
</body>
14456
</html>

‎hp/src/e/404.html

+49-140
Original file line numberDiff line numberDiff line change
@@ -3,145 +3,54 @@
33
SPDX-FileCopyrightText: © 2023 Sebastian Davids <[email protected]>
44
SPDX-License-Identifier: Apache-2.0
55
-->
6-
<html lang="en" dir="ltr">
7-
<head>
8-
<meta charset="utf-8" />
9-
<meta
10-
name="description"
11-
content="we could not find the page you’re looking for"
12-
/>
13-
<title>Page not found</title>
14-
<style>
15-
html {
16-
-webkit-text-size-adjust: 100%;
17-
-webkit-tap-highlight-color: transparent;
18-
font-family: ui-sans-serif, system-ui, sans-serif;
19-
line-height: 1.5;
20-
}
21-
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<title>Page Not Found</title>
10+
<meta name="viewport" content="width=device-width,initial-scale=1" />
11+
<meta name="color-scheme" content="light dark" />
12+
<style>
13+
html {
14+
-webkit-text-size-adjust: 100%;
15+
-webkit-tap-highlight-color: transparent;
16+
font-family: ui-sans-serif, system-ui, sans-serif;
17+
}
18+
19+
body {
20+
text-align: center;
21+
background-color: #e5e7eb;
22+
flex-direction: column;
23+
min-height: 100vh;
24+
display: flex;
25+
}
26+
27+
main {
28+
flex-grow: 1;
29+
place-items: center;
30+
display: grid;
31+
}
32+
33+
a {
34+
color: inherit;
35+
-webkit-text-decoration: inherit;
36+
text-decoration: inherit;
37+
}
38+
39+
@media (prefers-color-scheme: dark) {
2240
body {
23-
text-align: center;
24-
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;
39-
}
40-
41-
a {
42-
color: inherit;
43-
-webkit-text-decoration: inherit;
44-
text-decoration: inherit;
45-
}
46-
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-
93-
@media (prefers-color-scheme: dark) {
94-
body {
95-
background-color: #000;
96-
}
97-
98-
.dark\:text-gray-300 {
99-
color: #d1d5db;
100-
}
101-
}
102-
</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" />
125-
</head>
126-
<body>
127-
<main>
128-
<div>
129-
<p class="font-semibold">404</p>
130-
<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.
133-
</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>
139-
</div>
140-
</main>
141-
<footer>
142-
<p class="text-sm sm:text-base">
143-
©&nbsp;2022-2025 Sebastian&nbsp;Davids
144-
</p>
145-
</footer>
146-
</body>
41+
background-color: #000;
42+
}
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<main>
48+
<div>
49+
<h1>Page Not Found</h1>
50+
<p>
51+
<a href="/"><span aria-hidden="true">← </span>Back to home</a>
52+
</p>
53+
</div>
54+
</main>
55+
</body>
14756
</html>

0 commit comments

Comments
 (0)