Refactor monospace font sizes to use CSS variables for consistency

[hichemfantar]

Replace hardcoded font sizes with CSS variables to ensure consistency across the application. Introduce a new variable for small text size.

I've also noticed monospace text became too small in some places when @josevalim tried to compensate for the larger system monospace font rendering in 70acb0d#diff-ff486ec25148e539aaaedfe186ecf1c05b629ff7fe07e5c26040a65eb4193bc0 so this brings the font sizes back to a normal level consistent with the rest of the website, going below 14px is bad for legibility

0.875rem is equivalent to 14px https://v3.tailwindcss.com/docs/font-size

result

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12935597239/artifacts/2476418925

[josevalim]

Which OS are you using? It turns out Inconsolata was smaller than usual (or the one for macOS is larger than usual), so I picked the font sizes that precisely matched the previous font, by comparing the texts side by side.

In any case, I compared your screenshot with https://hexdocs.pm/ex_doc and it is clear that it is increasing the text in most places. I am also almost sure that GitHub uses 12px for inline code, so I don't think it is a general agreement that it has to be at least 14px.

[hichemfantar]

Github uses a larger size in markdown code snippets than it does in code files.
also don't compare screenshots, open both pages side by side because screenshots are enlarged and zoomed in on gh and make things look bigger than they really are

[hichemfantar]

introduced a font size xs variant if you wish to use it

[josevalim]

also don't compare screenshots, open both pages side by side because screenshots are enlarged and zoomed in on gh and make things look bigger than they really are

I compared screenshot because I don't know what is your OS. But locally I compared the builds and I also confirmed the sizes are considerably bigger.

Github uses a larger size in markdown code snippets than it does in code files.

If you inspect this piece of code, it shows as 12px for me.

[hichemfantar]

I use windows, macos, and ubuntu btw. screenshot is from macos

[josevalim]

Given the above, the goal is to keep those changes as is for now. Thank you.

[hichemfantar]

If you inspect this piece of code, it shows as 12px for me.

that's because gh uses 14px for regular comment text while we use 16px

@josevalim i believe you've missed this, so the correct size for code is 14px in our case

[hichemfantar]

same case here https://v3.tailwindcss.com/docs/font-size#setting-the-line-height

[josevalim]

We are using 13px for inline code which looks good with 16px, no further changes planned on this. Thanks.