Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Theme revamp: primary sidebar #41998

Conversation

peytondmurray
Copy link
Contributor

@peytondmurray peytondmurray commented Dec 18, 2023

Why are these changes needed?

This PR implements a number of style changes to the docs to match new designs created by @simran-2797.

Changes

  • Added an ::after pseudo-element that gives a splash of color to the main content of the page
  • Set the max-width of the primary sidebar to 30% for the example gallery; otherwise the primary sidebar grows indefinitely to accommodate the flexbox that holds the tag filter buttons
  • Set background, text-base, text-muted, and heading CSS color variables for dark and light themes
  • Removed the empty space on either side of the main article content, allowing articles to expand to the size of the user's browser. This gives us a HUGE increase in screen real estate!
  • Modify styles of primary sidebar dropdown; highlight the current page in the sidebar
  • Add the Inter font globally
  • Added css to the list of filetypes formatted by the prettier pre-commit hook. Also now that pre-commit is in the repo, the hooks ran on these files, causing a bit of reformatting.

Docs splash page:

image

Related issue number

Closes #41618.

Checks

  • I've signed off every commit(by using the -s flag, i.e., git commit -s) in this PR.
  • I've run scripts/format.sh to lint the changes in this PR.
  • I've included any doc changes needed for https://docs.ray.io/en/master/.
    • I've added any new APIs to the API Reference. For example, if I added a
      method in Tune, I've added it in doc/source/tune/api/ under the
      corresponding .rst file.
  • I've made sure the tests are passing. Note that there might be a few flaky tests, see the recent failures at https://flakey-tests.ray.io/
  • Testing Strategy
    • Unit tests
    • Release tests
    • This PR is not tested :(

@peytondmurray peytondmurray changed the title Docs theme revamp primary sidebar [Docs] Theme revamp: primary sidebar Dec 18, 2023
@peytondmurray peytondmurray force-pushed the docs-theme-revamp-primary-sidebar branch 3 times, most recently from 2203f7d to 40d28d0 Compare December 19, 2023 00:17
@peytondmurray peytondmurray marked this pull request as ready for review December 19, 2023 00:17
@peytondmurray peytondmurray requested a review from a team as a code owner December 19, 2023 00:17
@peytondmurray peytondmurray added P1 Issue that should be fixed within a few weeks docs An issue or change related to documentation labels Dec 19, 2023
@peytondmurray peytondmurray force-pushed the docs-theme-revamp-primary-sidebar branch from 40d28d0 to 7f492d2 Compare December 19, 2023 01:08
@simran-2797
Copy link
Contributor

simran-2797 commented Dec 19, 2023

Thanks @peytondmurray .

  1. When I hover over the sidebar, can we remove the underline?
  2. Can we change --pst-color-border to #2C333A?
  3. On some places, the width of the primary nav exceeds it's original width.
Screenshot 2023-12-19 at 9 53 00 AM 4. Is it possible to increase the spacing between the links in the left nav? Maybe increase the padding to 0.40em (top and bottom)?

@peytondmurray
Copy link
Contributor Author

peytondmurray commented Dec 19, 2023

After a discussion on slack for clarification:

  • Remove link hover underline text decoration for all links sitewide
  • Hovered links should have a different color: light mode #1D7AFC, dark mode #388BFF
  • Set the sidebar to a fixed width of 280px

@peytondmurray peytondmurray force-pushed the docs-theme-revamp-primary-sidebar branch from 7f492d2 to a2680eb Compare December 19, 2023 21:13
@peytondmurray peytondmurray force-pushed the docs-theme-revamp-primary-sidebar branch from a2680eb to 77de818 Compare December 20, 2023 00:58
@peytondmurray
Copy link
Contributor Author

Hmm, the hover link colors are nearly indistinguishable from standard ray blue, so it will be really hard to perceive any kind of hover color change. Let's revisit the color changes in a separate PR.

@simran-2797
Copy link
Contributor

lgtm

@peytondmurray
Copy link
Contributor Author

@maxpumperla If the build looks good to you, would you be able to merge this?

@can-anyscale can-anyscale merged commit a274f8d into ray-project:master Jan 3, 2024
16 of 17 checks passed
@peytondmurray peytondmurray deleted the docs-theme-revamp-primary-sidebar branch January 3, 2024 22:50
vickytsang pushed a commit to ROCm/ray that referenced this pull request Jan 12, 2024
- Added an ::after pseudo-element that gives a splash of color to the main content of the page
- Set the max-width of the primary sidebar to 30% for the example gallery; otherwise the primary sidebar grows indefinitely to accommodate the flexbox that holds the tag filter buttons
- Set background, text-base, text-muted, and heading CSS color variables for dark and light themes
- Removed the empty space on either side of the main article content, allowing articles to expand to the size of the user's browser. This gives us a HUGE increase in screen real estate!
- Modify styles of primary sidebar dropdown; highlight the current page in the sidebar
- Add the Inter font globally
- Added css to the list of filetypes formatted by the prettier pre-commit hook. Also now that pre-commit is in the repo, the hooks ran on these files, causing a bit of reformatting.

Signed-off-by: pdmurray <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs An issue or change related to documentation P1 Issue that should be fixed within a few weeks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Docs] Theme revamp: primary sidebar
3 participants