Update theme css

[simonseres]

With the help of Codex I recreated the css to match the corporate identity, modernize the look and increase readability.

[FaHaGit]

I really like the layout! It has a much more modern look and is better organized than the old one.

A few comments:

• The table of contents could be better organized. The main chapters aren't immediately recognizable as such. Perhaps adding another border around the main chapters and subchapters would make them easier to distinguish visually.

• The footnote numbers in the description are misaligned.

• The clickable Chargebyte logo that appears when you hover over a heading doesn’t really make sense. I would remove the icon and either make the entire heading clickable or remove it entirely.

• Images now appear to be rounded off. The "Intention" logo e.g. is cropped in such a way that it appears rounded and no longer has a transparent area (Safety Notes section). This rounded cropping is also visible on other images.

• Image captions and, in some cases, images are no longer centered but left-aligned. Table captions are centered.

• In the "Peripheral Compatibility List", the tables are displayed with many line breaks because the layout is now narrower.

• In the column heading “Tested by chargebyte,” there are now large gaps between the individual words.

[FaHaGit]

See my comments

[simonseres]

Hi @FaHaGit thanks for the comments:

The table of contents could be better organized. The main chapters aren't immediately recognizable as such. Perhaps adding another border around the main chapters and subchapters would make them easier to distinguish visually.

IMHO the TOC on first page looks very clean.

The footnote numbers in the description are misaligned.

Fixed

The clickable Chargebyte logo that appears when you hover over a heading doesn’t really make sense. I would remove the icon and either make the entire heading clickable or remove it entirely.

The feature is from Sphinx and existed before.
My change simply hides the ¶ and replaces it visually with a chargebyte icon on mouseover. To make the headline text itself link to the section, there are two practical approaches:

1. CSS-only / visual approach: stretch the existing a.headerlink over the full heading area so clicking the heading activates the existing anchor link. This can likely stay in cb_theme.css, but it is a bit fragile because the link is still technically the small generated anchor, just visually expanded.
2. Markup/template approach: change Sphinx output so the heading text itself is wrapped in an anchor. This is semantically cleaner, but it probably requires a Sphinx template/extension or post-processing, not only cb_theme.css.

TBH I like the tweak and would keep it as it is, because expanding the anchor might introduce unwanted problems.

Images now appear to be rounded off. The "Intention" logo e.g. is cropped in such a way that it appears rounded and no longer has a transparent area (Safety Notes section). This rounded cropping is also visible on other images.

Fixed

Image captions and, in some cases, images are no longer centered but left-aligned. Table captions are centered.

Fixed

In the "Peripheral Compatibility List", the tables are displayed with many line breaks because the layout is now narrower. In the column heading “Tested by chargebyte,” there are now large gaps between the individual words.

Applied some tweaks for tables.
Since table contents widely vary in information density, it is impossible to find a global style that perfectly matches every table in the documentation. Therefore my suggestion is to make them horizontally scrollable. I'm not really happy by myself but I spent quite some time finding a valid global approach without (significantly better) success.

[FaHaGit]

Just a few minor changes. But we can do that later.

[barsnick]

This looks much better than the first shot.

I have an issue with the "narrow" layout and the wide tables. To get a horizontal scroll bar, you need to scroll all the way to the bottom of the table... to see the text much further up (and to the right). Notable the large table in section "Expansion (X11)". The only way to make this a little better for desktop viewers is to adapt the page width better to the browser with (but allow this width for smaller viewing devices).

Also, the CSS is horrible for printing, and likely calls for a separate style for that, but that's something to fix later.