feat: Tuleap docs rebranding (#1726)

part of story #45211: Tuleap 17.0 new theme

How to test:
- Rebuild the CSS with the following command:
$ npm i && npm run build
- Rebuild the HTML with the following command:
$ make watch-html-tuleap-org
- Inspect the docs
- How-to guides & User guides use the new orange theme color (links and
header have this color)
- The logo image on the top-left is updated.
- The favicon is updated (you can check the various versions with the
"Favicon Detector" extension for Firefox).
- The illustrations on the front page use the new logo.
- The font is updated to "Public Sans Variable".

Why?
We do not have a satisfactory way to cache-bust assets like CSS and JS.
I used manual renaming ("style" -> "style-2") to avoid cache issues, but
I know it's a broken process. It's nonetheless better than nothing.

I did not bother with webmanifest images, the favicons should be
sufficient.

Only "woff2" format is included for Public Sans font. woff2 is
considered Baseline since about 2018, it was only IE11 that kept us
using TTF and woff format.

I used SVG files for front page illustrations so they can be cached. The
only exception was the developer guide image, because it uses a CSS
class to change the gradient colors, so it must be inline. We could also
"hardcode" the color directly to the SVG "stop-color" attributes and
make it an external file, I guess the CSS class is more maintainable.

Co-authored-by: Nicolas Terray <nicolas.terray@enalean.com>

Author: Hyzual

languages/en/_themes/tuleap_org/header.html

@@ -1,7 +1,7 @@
 <header>
   <div class="header-content">
     <a class="header-logo" href="https://www.tuleap.org">
-      <img class="header-logo-image-orange-black" src="{{ pathto('_static/img/logo-tuleap-flat-orange-black.svg', 1) }}" alt="Tuleap">
+      <img class="header-logo-image-orange-black" src="{{ pathto('_static/img/logo-tuleap.svg', 1) }}" alt="Tuleap">
     </a>
 
     <i class="fas fa-bars header-burger"></i>

languages/en/_themes/tuleap_org/index.html

@@ -15,9 +15,11 @@
   <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
   {% endblock %}
 
-  <link rel="icon" type="image/x-icon" href="{{ pathto('_static/img/favicon.png', 1) }}">
+  <link rel="icon" type="image/x-icon" sizes="48x48" href="{{ pathto('_static/img/favicon/favicon.ico', 1) }}">
+  <link rel="icon" type="image/png" sizes="96x96" href="{{ pathto('_static/img/favicon/favicon-96x96.png', 1) }}">
+  <link rel="icon" type="image/svg+xml" sizes="any" href="{{ pathto('_static/img/favicon/favicon.svg', 1) }}">
 
-  <link rel="stylesheet" href="{{ pathto('_static/assets/style.css', 1) }}" type="text/css">
+  <link rel="stylesheet" href="{{ pathto('_static/assets/style-2.css', 1) }}" type="text/css">
   <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css">
 
   {% if not embedded %}