Skip to content

Commit

Permalink
style: root error page
Browse files Browse the repository at this point in the history
  • Loading branch information
deansallinen committed Mar 6, 2025
1 parent 334d636 commit 1e8e7c1
Showing 1 changed file with 124 additions and 11 deletions.
135 changes: 124 additions & 11 deletions src/error.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,126 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>%sveltekit.error.message%</title>
</head>

<body>
<h1>Error in root layout</h1>
<p>Status: %sveltekit.status%</p>
<p>Message: %sveltekit.error.message%</p>
</body>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
<meta name="color-scheme" content="dark" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Unicove" />
<style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter/web-latin/Inter-Regular-subset.woff2?v=4.0') format('woff2');
}

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/inter/web-latin/Inter-Medium-subset.woff2?v=4.0') format('woff2');
}

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/inter/web-latin/Inter-Bold-subset.woff2?v=4.0') format('woff2');
}

:root {
--bg-color: #1B1F24;
--text-color: #A1A1AA;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#status {
-webkit-text-stroke: 2px var(--text-color);
color: var(--bg-color);
font-size: 15rem;
font-weight: bold;
margin-top: 13vh;
}

#message {
color: white;
font-weight: bold;
margin-block: 0;
}

#description {
max-width: 60ch;
text-wrap: balance;
margin-block: 1.5rem;
line-height: 1.5rem;
display: none;
}

#button {
text-decoration: none;
color: #04314D;
background-color: #00B5FF;
font-weight: 500;
padding-block: 1rem;
padding-inline: 3rem;
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
margin-top: 1.5rem;
}

.lucide-arrow-left {
width: 1rem;
height: 1rem;
}
</style>
<title>%sveltekit.error.message%</title>
</head>


<body>
<span id='status'>%sveltekit.status%</span>
<h1 id='message'>%sveltekit.error.message%</h1>
<p id='description'></p>
<a id='button' href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left">
<path d="m12 19-7-7 7-7" />
<path d="M19 12H5" />
</svg>
<span>
Back to Unicove
</span>
</a>
</body>

<script>
const description = document.getElementById('description');
const status = document.getElementById('status');

if (status.innerText === '404') {
description.style.display = 'block';
description.innerText =
"Sorry, we couldn't find the page you're looking for. The page might have been moved, deleted, or never existed in the first place."
}
</script>

</html>

0 comments on commit 1e8e7c1

Please sign in to comment.