grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>%sveltekit.error.message% — teal</title>
7 <link
8 href="https://fonts.googleapis.com/css2?family=Syne:wght@800&family=Plus+Jakarta+Sans:wght@500;600&display=block"
9 rel="stylesheet"
10 />
11 <style>
12 * {
13 box-sizing: border-box;
14 margin: 0;
15 padding: 0;
16 }
17 body {
18 font-family:
19 "Plus Jakarta Sans",
20 -apple-system,
21 sans-serif;
22 background: #080b12;
23 color: #e2e8f0;
24 min-height: 100vh;
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 }
29 .error-page {
30 display: flex;
31 flex-direction: column;
32 align-items: center;
33 text-align: center;
34 gap: 8px;
35 padding: 24px;
36 }
37 .error-code {
38 font-family: "Syne", sans-serif;
39 font-size: 72px;
40 font-weight: 800;
41 color: #14b8a6;
42 line-height: 1;
43 }
44 .error-title {
45 font-family: "Syne", sans-serif;
46 font-size: 24px;
47 font-weight: 800;
48 }
49 .error-message {
50 font-size: 15px;
51 color: #64748b;
52 }
53 .error-link {
54 margin-top: 16px;
55 padding: 10px 24px;
56 background: #14b8a6;
57 color: #000;
58 border-radius: 20px;
59 font-weight: 600;
60 font-size: 14px;
61 text-decoration: none;
62 }
63 .error-link:hover {
64 opacity: 0.85;
65 }
66 </style>
67 </head>
68 <body>
69 <div class="error-page">
70 <span class="error-code">%sveltekit.status%</span>
71 <h1 class="error-title">%sveltekit.error.message%</h1>
72 <p class="error-message">Something unexpected happened.</p>
73 <a href="/" class="error-link">Back to home</a>
74 </div>
75 </body>
76</html>