Even smaller screen support

[GeopJr]

Follow-up from #1

To avoid overflow on smaller screens, this PR changes the following on width < 480px:

• Makes the navbar scrollable
• Makes the logo "responsive" while keeping its aspect ratio (on mainpage.css)
• Changes the grid a bit so it doesn't have min width
• Makes tiles take as much height as they need (the "Read more" anchor would float outside of them) (on mainpage.css)
• Attempts to add some x axis padding on most elements under #container (on mainpage.css)

It also sets initial-scale back to 1.

mainpage:

https://user-images.githubusercontent.com/18014039/169591975-934d65f5-efd5-40ab-8f9c-8998ff5e58a3.mp4

(ALT text: A screenrecording of Firefox Devtools' responsive design mode, showcasing https://chimera-linux.org/ on different screen widths. When the size reaches width < 480px, we notice that there's no more overflow on the x axis and the navbar is now scrollable.)

post:

https://user-images.githubusercontent.com/18014039/169592271-dfbb7763-f38f-4c16-9e2f-25b3154b4d03.mp4

(ALT text: A screenrecording of Firefox Devtools' responsive design mode, showcasing https://chimera-linux.org/downloads/ on different screen widths. When the size reaches width < 480px, we notice that there's no more overflow on the x axis and the navbar is now scrollable.)

Let me know if I should change anything, that was the quickest solution I could come up with without replacing grid!

[q66]

scrolling navbar as opposed to whole page is a pretty good idea, I'd ideally like it not to scroll at all on most mobile devices though

maybe the menu should not be horizontal at all in narrow mode... and maybe the 480px adjustment should be dropped... I'll think about it a bit

[q66]

we could probably do a roll-out menu for mobile layout, but I've avoided the need for JS in this site so far and I'd ideally like to keep it that way

[dumblob]

Multiline menu is also an option IMHO - if structured/aligned properly, it even looks good :wink:.

[GeopJr]

There are css-only ways to do a "dropdown" menu eg. https://codepen.io/Dimmi/pen/dpEKpP

However, I don't know if there are plans to add more items on the navbar, but since the amount is not huge right now, wrapping them doesn't look that bad:

About the other changes, grid and the logo are also responsible for the whole page overflow. I don't know if replacing grid with flexbox might be better solution than changing grid templates based on screen width.

[q66]

i find grid much easier to manipulate and read/inspect, so let's keep grid

[q66]

let's merge this for now, i'll figure out the menu separately