github.com/angrybunnyman.com

Portrait of the Man as a...

Portrait of a Egg

Post Nutrition Label

  • Content Type: Text
  • Read Time: 10 min
  • Topics: HTML, CSS, JS, Easter Eggs
  • Mood: Devious

The Bear does not permit you to speak on the 404 page.
But you may whisper.

I had a plan: when readers stumbled into the abyss — a mistyped link, a dead page, a void too deep to catalog — I wanted the 404 to respond. A tendril. A whisper. A pulsing clue. Something to say:

“Yes, we see you.
And something sees you back.”

But Bear Blog, stoic and secure in its ways, does not load custom HTML or JavaScript on its default 404 page. I tried, of course — MutationObserver, DOMContentLoaded, ritual sacrifice — nothing. It ignores scripts like the Old Ones ignore prayers.

But it does load CSS.

And that, my friend, is enough.

Stitching the Monster with CSS

I used body.not-found to target the 404 page, and from there, I did what the ancients always do when denied access to the DOM:
I hid what I could not kill, and rewrote reality with pseudo-elements.

body.not-found main > div {
  display: none;
}

body.not-found main::before {
  content: "";
  background: url('/tentacle_404_cropped.png') center/contain no-repeat;
  animation: wriggle 4s infinite ease-in-out;
  /* ... */
}

body.not-found main::after {
  content: "What you seek is not here... only tendrils reaching from the void. Return to the waking world";
  white-space: pre-line;
  text-align: center;
}

The result:
A tentacle.
A whisper.

Accessible? Mostly.
Compliant? Dubiously.
Satisfying? Deeply.

Limitations of the Form

You can't inject real links. You can't pipe in sound from beyond the veil. You can't attach event listeners. You get styles, and styles alone. But with enough creativity — and maybe some creeping font — you can tell a story even from the wreckage of a 404.

Or at least make it twitch.

Remember:

If you cannot write the page,
become the style.

Thrust yourself into the void

Reply on Bluesky ⤤ Reply by Email (or just say hi!) Reply on Mastodon ⤤

Footnotes

#egg