Styles should probably use `em` instead of `rem`

[Stvad]

I'm using this for https://bsky.app/profile/vlad.sitalo.org/post/3ldk6uush5k2p and when this css is embedded on different pages - it's affected by the root-page's font-size, and because it's defined in terms of rem it doesn't seem possible to override it?

I think using em would make more sense in this case, defining the sizes in terms of the parent element, and allowing me to change them in my use-case.

[LuckySharma014]

We have created CSS variables for various properties related to posts, including distinct variables for font sizes in different parts of the post. For example, changing the value of --post-body-font-size will adjust the font size of the post body, while modifying --post-header-font-size will change the font size of the post header. Similarly, updating the --post-quoted-body-font-size variable will affect the font size of the quoted body. The complete list of font-size variables includes:

• --post-header-font-size
• --post-body-font-size
• --post-quoted-body-font-size
• --post-info-font-size
• --post-actions-font-size
• --post-replies-font-size

[Stvad]

This impacts not only the sizing of fonts but other elements, if you look at e.g. https://github.com/rhinobase/react-bluesky/blob/main/packages/core/src/components/Embed/embed.module.css rem is used extensively to define sizes for everything and in majority of cases it's not done though css variables.

Even if everything was routed through CSS variables, this would imply the need to override all of them to ensure things are not affected by a different root element font size from what you expect, while using em would just allow you to plop this into a parent element with a font size that make sense and for things to "just work"