Skip to content

Added 404 page #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bereketAlemu-git wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added 404 page #23

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1decc2f
created 404.astro
bereketAlemu-git Jul 15, 2026
3495352
style done
bereketAlemu-git Jul 15, 2026
db825e6
updated the style
bereketAlemu-git Jul 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
import Base from '../layouts/Base.astro';
---

<Base title="Page not found · CCSS Showcase">
<style>

@AJaccP AJaccP Jul 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

section {
text-align: center;
font: var(--font-sans);
font-size: var(--text-2xl);
color: var(--color-muted);
}
#error {
font-size: calc(var(--text-3xl) * 3.5);
margin-bottom: 0;
}
h1 {
margin-bottom: calc(var(--spacing) * 2);
}
p {
margin-bottom: calc(var(--spacing) * 9);
}
a {
background-color: var(--color-accent);
color: var(--color-surface);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
border-radius: var(--radius-card);
font-size: var(--text-3xl);
}
a:hover {
background-color: var(--color-ink);
}
</style>
<section>
<p id="error">404</p>

@AJaccP AJaccP Jul 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<h1>Page not found</h1>
<p>That page doesn't exist (or moved). Try the project gallery.</p>
<a href="/projects">Back to projects</a>
</section>
</Base>
Loading