CB-448: Implemented new footer design

[phw]

Dipping my toes into the CB code :)

This implements the new footer as designed by @Aerozol in CB-448. The implementation was mostly directly taken from Picard's website as implemented in metabrainz/picard-website#264 and adapted to the code and content of CB.

Here are some screenshots:

Front page, full width:

SM size:

XS size:

[Aerozol]

Screenshots look great!

[MonkeyDo]

Thanks a lot for dipping your toes :D

As we discussed IRL, here's a couple of modifications we thought about:

1. adding a bit of padding at the bottom of the top part of the footer:
   Before:

After:

2. Remove the Cover Art Archive in the fellow projects links

3. we talked about rethinking the bottom three elements ("OSS geek", MeB logo, "Found an issue") to use a flexbox layout, which would allow us to center content and reflow the elements a bit more precisely (including reordering the elements depending on screen size, instead of hiding them on small sizes)

[phw]

@MonkeyDo I finally sat down and worked on this again. The line now provides now an equal gap top and bottom and I have used a flexbox for the links below the lines. This is how it looks like at the breakpoint sizes:

@screen-lg:

@screen-md:

@screen-sm:

@screen-xs:

[MonkeyDo]

Looks great now, thanks @phw for implementing the better footer !

[MonkeyDo]

Sorry I frogot about this PR 😅