[Frontend HTML Markup] Add specific body classes to different frontend pages

[jeherve]

Is your feature request related to a problem ?

The custom CSS feature is very useful, and could be improved with additional CSS classes to allow more specific style adjustments, depending on the page.

Describe the solution you'd like.

The current frontend of GoToSocial is built with a single page class added to the body:

It would be nice if extra CSS classes were added when visiting different pages:

• When viewing a profile's home page, we could add a profile class.
• When viewing a single thread, an additional single class could be added.
• When looking at the About page, an about class could be added.

Describe alternatives you've considered.

I've been relying on the :has() pseudo-class, but I find it a bit more complex than it could be:

/* Hide the header on the home page */
.page header.page-header {
   display: none;
}

/* Display it when looking at single threads */
head:has(meta[property="og:title"][content*="Post by"]) + .page header.page-header {
  display: block;
}

Ideally, I'd want to do this instead:

.profile header.page-header {
   display: none;
}

Additional context.

No response

[tsmethurst]

This is a very reasonable request!