Fix: Refactor the CSS

[Dedelweiss]

I noticed that this CSS file was not imported and that this prevented the image of a blog author from having a max size for example.
Some CSS lines are not necessary and others may need to be added.

Before:

After:

As you can see, the title anchors are visible, the warning colour has disappeared or the images are still not corrected. So some modifications are necessary on this CSS file.
That's why I deleted the content of the custom file dottydoc.css to put it in the files of the folder dotty_res/styles/themes/layout which are generalized to all generated documentations. This is to start from a cleaner base and add to dottydoc.css as we go along.
Also, I found interesting to improve the design of Dotty's blog which is very little used (last post in 2021). For that, I modified the layout by putting the author's image at the top, in order to gather the information in a same place and make it more modern. If a separate PR is needed, I can change that.

After the modifications in the CSS file:

Fixes: #16991

[ckipp01]

Hey @Dedelweiss thanks for the PR. I don't know a ton about what CSS files should or shouldn't be included. I was told that @Florian3k is the goto Scaladoc guru at the moment, so let's wait for some input from him.

[Florian3k]

There are quite a few styles in this file, I'm not sure if we want to include them all. I will look into it.

[Dedelweiss]

Hello, So, I just made some changes to the dottydoc.css file to correct some issues related to this PR.
If a second PR is needed for this, I can fix that.
Also, I noticed that most of the CSS came from the dotty_res/styles/themes/layout folder and more specifically from the content.css file (for the page content) and banners.css file (for the page warning). So we can have problems of confrontation between banners.css and dottydocs.css when I import it for example. Do you know what is the difference between the files in this folder and the files in docs/_assets/css such as dottydocs.css?

[Florian3k]

Do you know what is the difference between the files in this folder and the files in docs/_assets/css such as dottydocs.css?

Unfortunately I don't know the answer to that 😅

Regarding styles in dottydoc.css, it looks like some of the styles are obsolete and are either not used anywhere or they are not needed. I suggest we move relevant styles (.site-container img and .blog-author img#author-img) to other file and remove this file altogether. What do you think?

[Dedelweiss]

What do you think?

Indeed, I think it would be interesting to start from a base on this file and delete what is useless before getting lost and having lots of files that confront each other.
But I think this is not the only file with a lot of "dead" CSS at the moment. It will be interesting to test or find a way to search and delete all the useless CSS.

[Dedelweiss]

Ho okay, I understand the difference between these two folders. The first one dotty_res/styles/themes/layout contains the CSS called in any scaladoc generated site. The docs/_assets/css folder contains custom CSS files for each project. So the CSS of dottydoc.css of the Dotty project, will not be present in the scaladoc documentations of other users.

[Florian3k]

Thanks, looks good overall 👍 I left a few minor comments.

[Dedelweiss]

Thank you very much for your feedback @Florian3k.