docs: style integration

[MaxLardenois]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

closes #472

Description

Integration of the style made by the design team

Motivation & Context

As we can only add a css, we cannot import OUDS Web.

Types of change

• New feature (non-breaking change which adds functionality)

Previews

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices

Design

• My change respects the design guidelines of Orange Unified Design System

Development

• My change follows the developer guide
• I have added unit tests to cover my changes (optional)

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• Manually test (dark mode, RTL, landscape display, tablet)
• Documentation has been updated if relevant
• Design review
• A11y review
• Internal files have been updated if relevant (THIRD_PARTY, NOTICE)
• changelog.md has been updated respecting keep a changelog rules and referencing the issue

[MaxLardenois]

A note on the homepage

In order to add the hero image and introductory text we have to select on the actual text in the page which is not optimal. We could lose the style (and hero image) if the text changes or we could wrongly add it on another page if we have the same text. This is not a big issue but to keep in mind if that happens.

[MaxLardenois]

TOC sidebar styling

• It is not possible to put the hover zone on the whole links, the chevron and the link itself are different elements.
• It is not possible easily to change the background color of the mobile sidebar, it is tied to the dark mode and the navbar in the DOM. I kept it black.

[MaxLardenois]

Max-width question
In OUDS we have a max-with on text elements (paragraphs for example), which I added also here.
The margins on the main are different than the design because if we want to have these margins they will apply to the code examples as well, which might not be optimal.

Without max-width on the main container:

With max-width:

Please let me know what solution you prefer

[MaxLardenois]

Cards as subpages
The design uses cards for links sub-pages ("All modules", "Packages" lists). This is hardly feasible with Dokka DOM and would have many side-effects in the rest of the documentation.

[github-actions]

🟢 Netlify deploy for commit 3843408 succeeded

Deploy preview: null
Deploy log: https://app.netlify.com/projects/ouds-android/deploys/686552fce75a9aa8072bb643

[MaxLardenois]

Header/Navbar on mobile/tablet
It was not possible to have the same result on the navigation header as we have in OUDS because of the DOM generated by Dokka. The buttons cannot be in the same line as the icon nor can it be pushed to the Menu dropdown.
This is the best I could do

[louismaximepiton]

Link hover in dark mode seems broken.

Some small issues with some colors, but the rendering looks good already.

[louismaximepiton]

Just taking notes of the presentation:

• The menu on mobile looks bugged a bit once a page is selected
• The run-button (play button) should be removed
• Something about the title

[paulinea]

@MaxLardenois When I take a look at the Netlify preview I see several problems:

• menu hover color is a dark grey
• the homepage banner is not displayed