Update docs css to point to shared location #3205

[stichbury]

NOTE: Kedro datasets are moving from kedro.extras.datasets to a separate kedro-datasets package in
kedro-plugins repository. Any changes to the dataset implementations
should be done by opening a pull request in that repository.

Description

Mirrors changes in Viz docs

Development notes

Removed CSS files and pointed to S3 location. Added code for meganav

Developer Certificate of Origin

We need all contributions to comply with the Developer Certificate of Origin (DCO). All commits must be signed off by including a Signed-off-by line in the commit message. See our wiki for guidance.

If your PR is blocked due to unsigned commits, then you must follow the instructions under "Rebase the branch" on the GitHub Checks page for your PR. This will retroactively add the sign-off to all unsigned commits and allow the DCO check to pass.

Checklist

• Read the contributing guidelines
• Signed off each commit with a Developer Certificate of Origin (DCO)
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added a description of this change in the RELEASE.md file
• Added tests to cover my changes
• Checked if this change will affect Kedro-Viz, and if so, communicated that with the Viz team

[stichbury]

Preview is here: https://kedro--3206.org.readthedocs.build/en/3206/

[stephkaiser]

This is currently what the documentation looks like on desktop and mobile:

The desktop version is fine (just need to make sure the nav is consistent when the user clicks on a navigation item). The mobile version needs more work, as you can see above the mobile menu interaction is a little strange.

I've created a quick design mockup below to illustrate expectations for mobile. Designs here.

Changes proposed for mobile:

• update logo and menu icon
• check font sizes and weights
• include breadcrumb
• fix mobile menu
  • menu icon location, close button icon
  • menu full width
  • logo position
  • navigation items in menu (Kedro, Kedro-Viz, Kedro-Datasets)

---

Additional changes for desktop (only if easy to change as further docs redesign will come later):

• reduce logo size
• navigation items positioning
• navigation items active-state cell size
• navigation items active-state cell colour (change orange to black)
• navigation items hover-state cell colour
• reduce size of breadcrumb

If changing the active-state colour from orange to black is too much effort, here is the orange version below. Please make sure the colour is the same across mobile as well.

[stichbury]

This is great, thank you!

@vladimir-mck This is feedback for you and feel free to work on this branch.

[stichbury]

I'm not massively happy about adding a Kedro logo SVG file to the docs/source folder. If it isn't already, it should be on the https://github.com/kedro-org/kedro-brand-identity repo and referenced from there so it can be reused across the docs subprojects as needed.

[stephkaiser]

thank you for this @vladimir-mck! its looking really great - some design QA comments below:

1. Navigation items font weight - doesn't look like Semi-Bold, it looks like Regular at the moment or Light (same on mobile)

2. Mobile menu scrolling - menu items and search bar should not be fixed for this version, enable full scrolling please.
3. Kedro, Kedro-Viz, and Kedro-Datasets cells have more side padding compared to desktop version (compare with above screenshot), can we make them the same please?

4. Are we able to show breadcrumb on mobile as well?

5. Are we able to reduce size of breadcrumb on desktop?

6. Close menu icon is too thin, please use the icon from designs. I've attached it below and can also send it via Slack.
   PNG -
   SVG -

7. Left contents panel scrollbar - can we move it so it's aligned next to the divider line?

[stichbury]

Closing this as it's done and merged in a separate PR