Main page layout with tabbed menu and mobile-friendly

A long time ago we talked about changing the look of the main page tvincent/ddtp!24 (merged) but I objected that the JavaScript library was too big; now the same layout can be done with only CSS.

What I like of this layout (see the screenshots below) is that I can see more easily if there is a new message and that the various states of the descriptions are more separated. In my previous JavaScript version I also sorted the descriptions based on the numbers of reviews so that those needed the initial review were seen more easily, but I created 3 columns side by side which doesn't work well on small screens, but I think that something could be done with CSS in a future merge request.

What do you think about this layout?

This merge request modifies only the main page:

• replaces the HTML table with div's so that the contents adapts more easily to smaller window sizes (no visible changes if the window is "wide enough")
• moves the "Messages for you" at the top of the page to give them more visibility (on smaller window sizes they would be too far from the beginning of the page) and to group all the messages in the same area
• changes the look of the page adding a tabbed menu at the top that shows only one section at a time to reduce the need to scroll up and down; this menu is visible only if the page is at least 600 pixels wide, for narrower widths all the contents are shown top to bottom
• adds some "badges" to show counts, including a sum of done by the current user
• creates more partial templates because adding the tabs to the existing main.html.tt was more difficult and because the new parts may find other uses in future

I tested these modifications with the local docker image with a PC, a tablet and a phone; the HTML validates successfully on https://validator.w3.org/

On a wide window the page looks like this:

On a narrow window (>= 600px) the page looks like this:

On a narrow window (< 600px) the page looks like this: