56 lines
1.2 KiB
Svelte
56 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { page } from '$app/state';
|
||
|
|
|
||
|
|
const status = $derived(page.status);
|
||
|
|
const is404 = $derived(status === 404);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:head>
|
||
|
|
<title>{status} — {is404 ? 'Paj la rivé périyòd…' : 'Erreur'} · ORGANISATION KA INTERNATIONALE</title>
|
||
|
|
<meta name="robots" content="noindex" />
|
||
|
|
</svelte:head>
|
||
|
|
|
||
|
|
<section class="error-page container">
|
||
|
|
<svg class="icon error-icon" aria-hidden="true"><use href="/icons.svg#ka" /></svg>
|
||
|
|
<h1>{status}</h1>
|
||
|
|
{#if is404}
|
||
|
|
<p class="ka" lang="gcf">« Paj la rivé périyòd… »</p>
|
||
|
|
<p class="fr">La page que vous cherchez n'existe pas ou a été déplacée. La route continue ailleurs.</p>
|
||
|
|
{:else}
|
||
|
|
<p class="fr">{page.error?.message ?? 'Une erreur est survenue.'}</p>
|
||
|
|
{/if}
|
||
|
|
<a class="btn" href="/">Retour à l'accueil</a>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.error-page {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
gap: var(--space-3);
|
||
|
|
padding: var(--space-5) var(--space-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-icon {
|
||
|
|
width: 6rem;
|
||
|
|
height: 6rem;
|
||
|
|
color: var(--or-oki);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: clamp(4rem, 15vw, 8rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ka {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
color: var(--or-oki);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr {
|
||
|
|
max-width: 52ch;
|
||
|
|
color: var(--muted);
|
||
|
|
}
|
||
|
|
</style>
|