Post styling improvement ideas

[FireIsGood]

Just a quick once over on the current styles, here's what I found:

• Blog names break out if they're max width. Mostly an issue if you have a thin phone and someone thinks it would be fun to max out their width.
  • Consider overflow-wrap: anywhere; on like, the body or something.
• Images are very cursed.
  • They are currently an absolutely positioned thing with a—what I presume to be calculated—padding bottom on a container div element. If I had to bet, I would assume this is you fighting with the implicit img element style of display: inline causing like 2-4px bottom margins that cannot be erased. Otherwise I have no idea why you would do this.
  • Please just make it display: block;. Please.
• There's a 4px gap between things which could more effectively be done with just margins and line height.
• A lot of your sizes are pixel based. Generally this is a bad idea.
  • Text elements have 15 pixel bottom margins when the default for that is 1em which is 16px by default.
    • This makes text below images very upset.
  • The general solution is to remember the semantic that rem units are for things you want to change when the user modifies their browser settings for larger text and that 1rem is equal to 16 pixels.
  • Text elements also have a letter spacing reduced a little. This breaks ligatures and has weird workarounds if you still wanted it.

Some freebies:

.interaction-buttons a {
  aspect-ratio: 1 / 1;
  display: flex;
  width: 1.5rem;
  justify-content: center;
  align-items: center;
}

.image-container img { /* though tbh just make it for all images by default*/
  display: block;
}

Good luck on this! I'm currently not able to contribute so I can't really do much for you other than this.

[syeopite]

The images are actually just replicating what Tumblr does in order to:

1. Prevent layout shifts when the images are loaded

2. Ensure that images follow a very specific aspect ratio that depends on how they are arranged within a photoset row and what size the smallest member of a row is.

It is very much cursed but I don't believe there is much else I can do in order to ensure that both of the two criterias are met.

I'll have to see if the the modern aspect-ratio property can fully replicate Tumblr's current behavior

[FireIsGood]

Dang that sucks...