feat: make sidebar menu medium font weight #1853
Conversation
WalkthroughThe pull request introduces targeted CSS modifications for VitePress sidebar items. The changes focus on setting specific font weights for sidebar items at different hierarchy levels and defining a color style for active sidebar items. These adjustments enhance the visual presentation and readability of the sidebar navigation by ensuring consistent font styling and highlighting the currently selected item. Changes
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.vitepress/theme/style.css (1)
162-166: Consider alternative to !important if possibleWhile
!importantworks here, it's generally better to avoid it if possible. Consider increasing selector specificity instead:-.VPSidebarItem.level-1 .text, -.VPSidebarItem.level-2 .text, -.VPSidebarItem.level-3 .text { - font-weight: 500 !important; +.vp-doc .VPSidebarItem.level-1 .text, +.vp-doc .VPSidebarItem.level-2 .text, +.vp-doc .VPSidebarItem.level-3 .text { + font-weight: 500; }However, if this doesn't override the framework styles, keeping
!importantis acceptable for theme customization.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.vitepress/theme/style.css(1 hunks)
🔇 Additional comments (1)
.vitepress/theme/style.css (1)
168-170: LGTM! Good use of CSS variablesThe implementation correctly uses the brand color variable for active sidebar items, maintaining consistency with the theme's color system.
.vitepress/theme/style.css
Outdated
| .VPSidebarItem.level-1 .text, | ||
| .VPSidebarItem.level-2 .text, | ||
| .VPSidebarItem.level-3 .text { | ||
| font-weight: normal !important; | ||
| } |
There was a problem hiding this comment.
Align implementation with PR objective: use medium font weight
The PR objective states "make sidebar menu medium font weight", but the implementation sets it to normal. Since the Untitled-Sans font is available in medium weight (500), we should use that instead.
Apply this diff to align with the PR objective:
.VPSidebarItem.level-1 .text,
.VPSidebarItem.level-2 .text,
.VPSidebarItem.level-3 .text {
- font-weight: normal !important;
+ font-weight: 500 !important;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .VPSidebarItem.level-1 .text, | |
| .VPSidebarItem.level-2 .text, | |
| .VPSidebarItem.level-3 .text { | |
| font-weight: normal !important; | |
| } | |
| .VPSidebarItem.level-1 .text, | |
| .VPSidebarItem.level-2 .text, | |
| .VPSidebarItem.level-3 .text { | |
| font-weight: 500 !important; | |
| } |
|
While reviewing with Luke and looking at another example, it looks like the thing that was off with this was the font not being the same throughout the sidebar. |
Overview
Modifies the font weight on sidebar, making it look less bold.
Update:
Original:
Summary by CodeRabbit