isopod.cool^v4

tech specs

This site is composed of a combination of handwritten HTML/CSS and server-side rendering done in PHP, also handwritten. None of that static site generator nonsense here, baby. No Javascript either. That shit's cringe.

For hosting, I use Caddy on Ubuntu Server, on an OVHCloud dedicated box you can read more about here. To be clear, you don't need anywhere near that kind of horsepower to host a basic PHP site like this — the cheapest VPS Hetzner or whoever will sell you will be more than plenty for that. I'm just crazy and do a lot of other stuff on there.

This site supports .well-known/button, if you're one of the two people on earth to build something that uses it. If you link your website in a post on my guestbook and it supports that standard, your button will show up there!

Accessibility

I've made an effort to make this website as responsive and accessible as I reasonably can. At present, this entails:

• Alt text everywhere and a best-effort attempt at semantic HTML and keyboard navigability
• Default colours that (mostly) meet the WCAG contrast guideline of 4.5:1
• Extensive use of CSS media queries for:
  • Light theme
  • High-contrast color theme that defers to system-provided colors
  • Making sure stuff doesn't look broken in forced colours mode
  • Adapting to smaller displays and high zoom levels
  • Disabling of animated effects

That's all well and good, but there are some other points I want to address:

While the colour contrast meets WCAG standards in most places, the one major exception is links in areas with highlighted backgrounds, which have a contrast ratio of a bit over 3.5. I'm treating this as acceptable because it's still decently readable for most, and the high-contrast theme renders this a non-issue by removing those backgrounds.

You may notice that I've omitted any kind of direct toggle for themes, fonts, animations, etc. I've opted to use media queries for those purposes instead in order to automatically respect the viewer's system settings. My thinking is that most people who need those features will probably have them enabled at the browser or OS level anyway, so forcing them to set them using a Javascript-based toggle for my site in particular would be unnecessary extra work for both of us.

On the subject of media queries, there's a media query that allows the user to indicate a preference for lower contrast, but I've yet to find any way to trigger it or any information on how I'm supposed to respond to it. My stopgap solution for now is to apply a lowered-contrast filter to the whole page when that setting is active. I'm not confident this is the way to go here.

Finally, the hamburger menu that materializes on small displays works using the CSS "checkbox hack". This is not keyboard friendly, but I've compensated for it by using the shiny new :has selector to open the nav menu automatically when you focus something in it with the keyboard. I'm aware this probably isn't great, but I'm hoping it won't pose much of a problem because being affected by this would require you to be using keyboard navigation, and be on a relatively small screen, and actually be reliant on sight to view the page (eg. blind people using screen readers shouldn't even notice the difference). In other words, I'm kind of banking on that overlap being small enough that nobody in it ever stumbles upon this site. If that's you, sorry.

I'd like to eventually devise some sort of hybrid solution that uses accessible Javascript with <button>s and such and falls back to the checkbox hack if you have that disabled, but I've yet to do that as of writing.

Credits

This site uses the font family B612 Mono pretty much everywhere.

<-- As of now, all of these little portraits were drawn by me, as well as the isopod in the site header. You can tell because they use my trademark "style" of thick, scribbly lines and the Krita default brush.

The main dark mode background image is a screenshot I took myself of Subnautica: Below Zero, a game that I've played for less than an hour since it left early access. All other backgrounds were taken from Duckduckgo image searches.

Some resources I've found helpful:

MDN Web Docs

Comprehensive documentation on HTML, CSS, and Javascript

PHP Manual

Comprehensive documentation for PHP

LandChad.net

A good, if opinionated, resource on self-hosting that was instrumental to getting me started doing this

Accessible Net Directory Guidelines

Great resource on web accessibility information. This is the source of most of the checklist I was trying to hit with this latest major revision.