[Docs] Fix inconsistent section highlight on /cloud and /kanvas#1139
[Docs] Fix inconsistent section highlight on /cloud and /kanvas#1139yohaidajurno wants to merge 3 commits into
Conversation
The glow-swap effect relied on the CSS sibling selector (~), which only works forward, so it silently broke when the highlighted box came first. Made the rule order-independent with :has() and listed the current product first on both pages. Fixes layer5io#1138 Signed-off-by: Yohai Dejorno <dejornoyohai@outlook.com>
|
Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Layer5 Community Welcome Guide and sure to join the community Slack. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request reorders the ecosystem boxes on the Kanvas index page and adds a CSS rule to both _content_project.scss and _navbar_project.scss to remove the glow effect on .highlight-box when a subsequent .hidden-highlight-box is hovered or focused. Feedback points out significant code duplication between the two SCSS files and suggests moving the shared $ecosystem-box-glow variable to a shared variables file and removing the duplicate classes from _navbar_project.scss.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-1139/
|
leecalcote
left a comment
leecalcote
left a comment
There was a problem hiding this comment.
Thanks for working on this, @yohaidajurno 👍
The glow variable was copy-pasted in both the content and navbar scss files, and the navbar also had a full copy of the ecosystem box classes that nothing there uses. I moved the variable to _variables_project.scss so both files share it, and deleted the dead navbar copy. Requested in review. Signed-off-by: Yohai Dejorno <dejornoyohai@outlook.com>
|
Before this PR, both pages listed the boxes in the same order — Cloud first, then Kanvas. As part of the fix I made the order intentional: each page now lists its own product first (with the glow), and the other product second. So /cloud shows 1. Cloud (glow) 2. Kanvas, and /kanvas shows 1. Kanvas (glow) 2. Cloud. I think leading with the product the page is about reads better visually. Happy to revert to a fixed order if you prefer the original. @leecalcote |
Signed-off-by: Yohai Dejorno <dejornoyohai@outlook.com>
2 participants
fixed.mov
The glow-swap effect relied on the CSS sibling selector (~), which only works forward, so it silently broke when the highlighted box came first. Made the rule order-independent with :has() and listed the current product first on both pages.
Fixes #1138
Notes for Reviewers
This PR fixes #
Signed commits