Use Responsive Font Sizes

[vanillajonathan]

Change headers to use Responsive Font Sizes (RFS) from Bootstrap.

[Ionaru]

Why is this needed? The editor already scales its text and icons with font sizes.

[vanillajonathan]

The Bootstrap documentation has more information:

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport.

https://getbootstrap.com/docs/5.2/getting-started/rfs/

The headers are defined to have the same font-size as Bootstrap which makes it play nice with websites using Bootstrap.

[Ionaru]

Can you explain what is different with RFS vs without it? How it affects the editor in different conditions and the benefits of it?

(Screenshots help)

[vanillajonathan]

The advantages listed in the README for RFS is:

• No need to rescale paddings or margins anymore.
• Text won't be chopped off in smaller viewports when RFS is applied to font sizes.
• RFS will prevent the font size from rescaling too small, so readability can be assured.
• The font sizes of all text elements will always remain in relation with each other.

https://github.com/twbs/rfs

The README also includes a animated GIF.

But my personal motivation is just to have the header sizes be consistent with Bootstrap since that is what I use.

[Ionaru]

How does it affect the editor? What noticeable differences will there be in the context of the editor for users before and after the change?

[vanillajonathan]

It doesn't affect the editor, the sizes of the headers will be slightly different, but users are not likely to notice.

Before (now):

After: