feat: redesign 404 page with error image and fix GitHub Pages routing by lenderom · Pull Request #810 · fipguide/fipguide.github.io

lenderom · 2026-04-05T12:24:42Z

Summary

Redesign the 404 error page with a centered error illustration (error.webp) and improved layout using float-image and intersector shortcodes across all three languages (en, de, fr)
Add homepage links to the "go to homepage" bullet point in all languages
Fix GitHub Pages 404 routing: replace the Hugo alias-based 404.html (which incorrectly landed under /en/404.html due to defaultContentLanguageInSubdir: true) with a static/404.html that reliably serves from the site root
Add center position support for float-image in SCSS

Fixes #717
Fixes #136

…ting Add error illustration and visual improvements to all three language versions of the 404 page. Replace the Hugo alias-based 404.html (which landed under /en/404.html due to defaultContentLanguageInSubdir) with a static/404.html that reliably serves from the root on GitHub Pages. Fixes #717 Fixes #136

github-actions · 2026-04-05T12:24:51Z

Hi there! 👋

Thank you for your contribution to the FIP Guide! 🚀
We appreciate your effort in making rail staff travel information more accessible. 🚄

Checklist before merging:

Added a description to the Pull Request
Checked the License of new pictures (non-commercial use without attribution)
Modified content in English
Modified content in German
Modified content in French

netlify · 2026-04-05T12:29:53Z

✅ Deploy Preview for fipguide ready!

Name	Link
🔨 Latest commit	`c6f0ecb`
🔍 Latest deploy log	https://app.netlify.com/projects/fipguide/deploys/69e4abcaeba77c0008f06cdb
😎 Deploy Preview	https://deploy-preview-810--fipguide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

MoritzWeber0 · 2026-04-10T14:51:24Z

The contrast of the image in dark mode is pretty bad.

Feel free to change the image :)

What do you think of the new one (source https://www.pexels.com/de-de/foto/30503335/)

therobrob · 2026-04-19T14:13:16Z

+      <div class="o-error__divider">
+        {{ partial "intersector" }}
+      </div>


I’d not show it overall, because it doesn’t divide two paragraphs.

therobrob · 2026-04-19T14:15:50Z

@@ -0,0 +1,23 @@
+{{ define "main" }}
+  <article class="o-error" data-pagefind-ignore="all">


I’d prefer this one:
<article class="o-single o-single--error" data-pagefind-ignore="all">

Not sure about it, the error case is pretty specific and isolated, we won't use it in another file. So I'd keep it in a separate SCSS file and not mix it in the content SCSS file. Another idea is to rename it to o-404 or something like it.

I didn’t talked about scss at all. The syntax and the file-system are two different things in my opinion. In BEM this is a special case for o-single, so we should treat it like that :)

I always prefer a clear logic to find out in which SCSS file a CSS rule is stored and the prefix is the easiest one to remember. But we don't do that consistently, so yeah, we can also call it o-single--error.
However, we should then also update the other elements as well, for example o-error__body--error and so on.

if we do so, we should update the other elements as well, yes 👍🏼 I agree with you to have a clear logic – let’s discuss the scss file structure in another issue :) #879

Sounds good 👍

MoritzWeber0 · 2026-04-19T15:26:23Z

We can get rid of the file now, right?

MoritzWeber0 · 2026-04-21T20:04:40Z

- **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.


Suggested change

- **Vérifiez l'URL :** Assurez-vous qu'il n'y a pas de faute de frappe dans l'adresse.

- **Vérifiez l’URL :** Assurez-vous qu'il n'y a pas de faute de frappe dans l'adresse.

You probably used a Anthropic model. They have the bug that they replace ’ with '. It's a bit annoying. Can you change it back for all occurrences in the file?

MoritzWeber0 · 2026-04-21T20:09:12Z

@@ -0,0 +1,23 @@
+{{ define "main" }}
+  <article class="o-error" data-pagefind-ignore="all">


Not sure about it, the error case is pretty specific and isolated, we won't use it in another file. So I'd keep it in a separate SCSS file and not mix it in the content SCSS file. Another idea is to rename it to o-404 or something like it.

lenderom requested review from MoritzWeber0 and therobrob and removed request for therobrob April 5, 2026 12:25

therobrob reviewed Apr 5, 2026

View reviewed changes

Comment thread assets/sass/floatImage.scss Outdated

Comment thread content/404/index.de.md Outdated

MoritzWeber0 reviewed Apr 10, 2026

View reviewed changes

Comment thread static/404.html

MoritzWeber0 reviewed Apr 10, 2026

View reviewed changes

Comment thread static/404.html

MoritzWeber0 reviewed Apr 10, 2026

View reviewed changes

MoritzWeber0 and others added 5 commits April 12, 2026 20:43

Merge branch 'main' into feat/404-page

da30879

Merge branch 'main' into feat/404-page

519b808

fix: improve 404 page

d0eea8f

fix: remove float

67eb077

Merge remote-tracking branch 'origin/main' into feat/404-page

c6f0ecb

lenderom requested review from MoritzWeber0 and therobrob April 19, 2026 10:20

therobrob reviewed Apr 19, 2026

View reviewed changes

MoritzWeber0 reviewed Apr 21, 2026

View reviewed changes

therobrob mentioned this pull request Apr 23, 2026

SCSS file structure, revisited #879

Open

		@@ -0,0 +1,23 @@
		{{ define "main" }}
		<article class="o-error" data-pagefind-ignore="all">

	- Vérifiez l'URL : Assurez-vous qu'il n'y a pas de faute de frappe dans l'adresse.
	- Vérifiez l’URL : Assurez-vous qu'il n'y a pas de faute de frappe dans l'adresse.

Uh oh!

Conversation

lenderom commented Apr 5, 2026

Summary

Uh oh!

github-actions Bot commented Apr 5, 2026

Checklist before merging:

Uh oh!

netlify Bot commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fipguide ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Apr 5, 2026 •

edited

Loading