[Docs]: Improve documentation layout

[debMan]

Problem

The docs layout needs to be optimized for people with low vision capabilities. The design at a lower zoom level works fine, but the header fills a large part of the screen when zoomed in for larger text. I'll figure in some images.

Lower zoom level

Higher zoom level

Additional information

According to the above screenshots for higher zoom level, the header occupies around 50% of the screen's height.
Also, the left-side TOC navigation panel occupies too much space, which may lead to less focus on readability. I usually open the inspect element panel on the browser and add a CSS style display: none; to the header element to enhance readibility.

Suggestion

Here are some suggestions that I can mention:

1. Decrease the header height
2. Moving the Strimzi logo to the right or left side of the header instead of placing it above the header links
3. Reduce the size or remove the orange arrow at the bottom of the selected link. The selected link is orange, and I think that's enough. There is no need for the arrow. Even in lower zoom levels, it's redundant.
   • Or maybe it's a good idea to place an orange border around the current link instead of an arrow
4. The header can be hidden when scrolling down, but it remains fixed in its position currently.
5. In higher zoom levels, the left-side TOC navigation can be hidden automatically and appears on pointer hover to the left
6. Adding a dark theme may be a nice-to-have feature

[scholzj]

FYI: There is also the standalone documentation that is not built into the website ... maybe that would be more readable? You can find it here:

• https://strimzi.io/docs/operators/latest/full/overview
• https://strimzi.io/docs/operators/latest/full/deploying
• https://strimzi.io/docs/operators/latest/full/configuring

[debMan]

FYI: There is also the standalone documentation that is not built into the website ... maybe that would be more readable? You can find it here:

• https://strimzi.io/docs/operators/latest/full/overview

• https://strimzi.io/docs/operators/latest/full/deploying

• https://strimzi.io/docs/operators/latest/full/configuring

That's great. Thanks.

[im-konge]

Triaged on 31.10.2024: This should be fixed in our documentation/website.

[im-konge]

@debMan thanks for the suggestions, I will have a look on fixing the sizes and arrangement of the things. About the TOC -> in case that you don't want to see it, you can just use the slider on the header. But I will check the possibility to having the TOC automatically showing on hovering on the left side. Thanks once more :)