Relative units for sizes, margins and paddings of the page footer

[auge8472]

I would like to replace many of the current pixel based sizing properties in the CSS with ones with relative units like em or rem. With this change it should later be simpler to make the OpenTTD website responsive. My first proposal affects the page footer. Further pull requests for the page header and the navigation bar will follow within a short time. The pull requests regarding the area for the main content needs more work due to the different structures of the various pages. If the changes of this pull request are approved, the pull requests for the main area will follow.

The main visually change is the font size in the footer. With the current font size of 11px for the footer link list and the copyright notice many visitors, especially older ones, will not be able to cope conveniently. Thatswhy I increased the font size to 86% (0.86em) of the base font size of each visitor's browser. Since this change only affects part of the page layout, I have temporarily set the base font size for the footer itself to 1rem. If and when the entire page has been changed, this font size will be set centrally for the html or body element and removed from the footer again.

Further changes concern margins and paddings as well as the pipe symbols as delimiters between the links in the footer. The pipe symbols were replaced by borders (currently in the font colour).

[PeterN]

IIRC it's better to use rem everywhere instead of em.

I did start on revamping the entire css (using relative sizing like here) to also remove things like like using pre-baked images for borders/headers and things.

These css files are also duplicated for things like bananas, so I think it might be better to have a complete css refresh in one go rather lots of tiny changes?

[LordAro]

Previous: #80, #82 & #84

clearly the "complete css refresh" route doesn't work particularly well either

[auge8472]

IIRC it's better to use rem everywhere instead of em.

In my opinion, that's too rigid. Yes, it's common practice to use rem for the basic setting, but if you want to work with relative sizes throughout, you should continue with em, starting from the basic setting. If a margin is 1rem, what corresponds to 16 pixels in most browsers without base font size changed by the user, it alway will be 16 pixels. If it is 1em instead it grows and shrinks with the actual font size of the element (in example a heading with the font size of 1.4em).

Moving from pixel sizes to sizes in rem is replacing one absolute unit system by another. The only difference is, that rem respects the browsers own font size setting, which may be altered by the user (like me who set the default font size to 18px and set a minimum font size of 12px).

I did start on revamping the entire css (using relative sizing like here) to also remove things like like using pre-baked images for borders/headers and things.

Are there other a "pre-baked" images than the one for the headings? I thought about redoing the heading image without the colour gradient and adding the gradient with a semitransparent CSS colour gradient. This way, the underlying grid image can be tiled if the heading block becomes lower or higher due to different font sizes.

These css files are also duplicated for things like bananas, so I think it might be better to have a complete css refresh in one go rather lots of tiny changes?

Oh, that would be a much greater rework than I thought. The changes for the page header and the main navigation are ready and would have to be commited to this branch instead of to separate branches for separate pull requests. But it's doable.