Added 404 page

[bereketAlemu-git]

No description provided.

[AJaccP]

Content is present and structured as intended, thanks! But please use in line tailwind styling instead of this separate <style> block for consistency with the rest of the site. I'd recommend looking at some other pages to see how styling is done there.

Note: Also merge recent changes from main into your current branch so you get dark mode and other changes. Some feedback relies on having dark mode present.

Most of it should translate one-to-one, for example:

text-align: center -> text-center
font-size: var(--text-2xl) -> text-2-xl
color: var(--color-muted) -> text-muted
margin-bottom: calc(var(--spacing) * 2) -> mb-2
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) -> px-3 py-2
border-radius: var(--radius-card) -> rounded-card

So <p id="error"> becomes something like <p class="text-8xl font-bold">, and the id isn't needed anymore once the styles live on the element.

A few other things to fix while making the changes:

• font: var(--font-sans) can be deleted. The site already sets the font globally, so this line isn't doing anything.
• The link needs inline-block. Links are inline elements by default, which means top and bottom padding doesn't actually push the button's edges outward, it just overlaps whatever is around it. Adding inline-block makes the padding behave like you'd expect.
• Use text-accent-contrast for the button's text colour, not color-surface. accent-contrast is the token (from global.css ) meant specifically for text sitting on a red background. It stays white in dark mode, whereas surface becomes dark grey and the label gets hard to read on the red button.
• The hover colour has the same problem. var(--color-ink) is near-black in light mode but near-white in dark mode, so the button flips to a white block. hover:bg-accent/85 (a slightly transparent red) works in both. Add transition-colors too, so it fades like the other links on the site.

[AJaccP]

I think some appearance changes can be made here, mainly for stronger hierarchy. Kind of adding to what I mentioned when you checked in about the design on Discord, just since it's easier to play around with potential changes in the PR before requesting updates. (Some code snippets below might need adjustments if something looks off)

• Centre the content vertically: Right now there's a large gap between the 404 content and footer. Put these on the <section> so it claims some height and centres its contents in the space between the header and footer:

  flex min-h-[60vh] flex-col items-center justify-center text-center 
  

• Make the 404 bigger and also red so it stands out more, since it's the main indicator of what the page is for. Example:

  text-accent text-6xl leading-none font-bold tracking-tight
  

  The leading-none removes some invisible whitespace the element would otherwise have.
• Make "Page not found" stand out more as well. Right now since it's the same font color/size as the sentence below it, they blend together. Example:

  mt-6 text-3xl font-bold tracking-tight
  

• The sentence under it can remain muted and smaller than the "page not found" text

  text-muted mt-3
  

  This should create a proper visual hierarchy between the 3 elements.

After making changes, make sure to run pnpm format before committing since it may re-order some classes and check formatting.