feat: redesign 404 page with error image and fix GitHub Pages routing

assets/sass/404.scss

@@ -0,0 +1,35 @@
+.o-error {
+  background-color: var(--bg-default);
+  border-radius: var(--border-radius-l);
+  border: var(--border);
+  padding: 2rem;
+
+  &__body {
+    @media (min-width: #{$breakpoint-lg}) {
+      display: flex;
+      align-items: center;
+      gap: 3rem;
+    }
+  }
+
+  &__image {
+    margin-bottom: 2rem;
+
+    @media (min-width: #{$breakpoint-lg}) {
+      margin-bottom: 0;
+      flex: 0 0 40%;
+    }
+  }
+
+  &__divider {
+    @media (min-width: #{$breakpoint-lg}) {
+      display: none;
+    }
+  }
+
+  &__content {
+    @media (min-width: #{$breakpoint-lg}) {
+      flex: 1;
+    }
+  }
+}

assets/sass/main.scss

@@ -25,3 +25,4 @@
 @import "teamMember.scss";
 @import "dialog.scss";
 @import "fip-validity.scss";
+@import "404.scss";

content/404/index.de.md

@@ -9,7 +9,7 @@ Hoppla! Die gesuchte Seite ist nicht verfügbar oder wurde verschoben.
 Probiere folgende Dinge:
 
 - **URL überprüfen:** Stelle sicher, dass die Adresse keine Tippfehler enthält.
-- **Zur Startseite:** Kehre zur Startseite zurück und navigiere von dort aus.
+- **Zur Startseite:** Kehre zur [Startseite](/) zurück und navigiere von dort aus.
 - **Navigation nutzen:** Nutze das Menü oder die Suchfunktion.
 - **Kontaktiere uns:** Bei Fragen oder Problemen kannst du dich gerne an uns wenden: [nextstop@fipguide.org](mailto:nextstop@fipguide.org)
 

content/404/index.en.md

@@ -6,12 +6,12 @@ params:
   pagefind_ignore: true
 ---
 
-Oops! The page you’re looking for is unavailable or has been moved.
+Oops! The page you're looking for is unavailable or has been moved.
 
 Here's what you can do next:
 
 - **Double-check the URL:** Make sure there are no typos in the address.
-- **Go to the homepage:** Return to the home page and navigate from there.
+- **Go to the homepage:** Return to the [homepage](/) and navigate from there.
 - **Use the navigation:** Try browsing via the menu or using the search function.
 - **Contact us:** If you need assistance, feel free to reach out: [nextstop@fipguide.org](mailto:nextstop@fipguide.org)
 

content/404/index.fr.md

@@ -4,13 +4,13 @@ params:
   pagefind_ignore: true
 ---
 
-Oups ! La page que vous recherchez est indisponible ou a été déplacée.
+Oups ! La page que vous recherchez est indisponible ou a été déplacée.
 
-Voici ce que vous pouvez faire ensuite :
+Voici ce que vous pouvez faire ensuite :
 
-- **Vérifiez l’URL :** Assurez-vous qu’il n’y a pas de faute de frappe dans l’adresse.
-- **Accédez à la page d’accueil :** Retournez à la page d’accueil et naviguez à partir de là.
-- **Utilisez la navigation :** Essayez de naviguer via le menu ou d’utiliser la fonction de recherche.
-- **Contactez-nous :** Si vous avez besoin d’aide, n’hésitez pas à nous contacter : [nextstop@fipguide.org](mailto:nextstop@fipguide.org)
+- **Vérifiez l’URL :** Assurez-vous qu’il n’y a pas de faute de frappe dans l’adresse.
+- **Accédez à la page d’accueil :** Retournez à la [page d’accueil](/) et naviguez à partir de là.
+- **Utilisez la navigation :** Essayez de naviguer via le menu ou d’utiliser la fonction de recherche.
+- **Contactez-nous :** Si vous avez besoin d’aide, n’hésitez pas à nous contacter : [nextstop@fipguide.org](mailto:nextstop@fipguide.org)
 
-Nous sommes là pour vous aider !
+Nous sommes là pour vous aider !

layouts/404/single.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+  <article class="o-error" data-pagefind-ignore="all">
+    <h1>{{ .Title }}</h1>
+    <div class="o-error__body">
+      <div class="o-error__image">
+        {{- $image := .Resources.GetMatch "404.webp" -}}
+        {{- partial "image"
+          (dict
+          "image" $image
+          "width" "100%"
+          "Page" .
+          )
+        -}}
+      </div>
+      <div class="o-error__content">
+        {{ .Content }}
+      </div>
+    </div>
+  </article>
+{{ end }}