Skip to content

docs(sidebar): improve readability and contrast at 910px #4534

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.

Sign up for GitHub

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

Open
shhreya13 wants to merge 1 commit into
base: master
Choose a base branch
from
+21 −0
Open

docs(sidebar): improve readability and contrast at 910px #4534

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions docs/src/Style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,27 @@ style.menu = {
// prevents a white background when items are filtered out by search
background: '#1B1C1D',
overflowX: 'hidden',

// --- START OF READABILITY FIX ---
// Targets the medium screen width (~910px) identified in the issue
'@media only screen and (min-width: 768px) and (max-width: 910px)': {
'& .ui.vertical.menu .item': {
fontSize: '14px !important', // Increased from 12px for legibility
lineHeight: '1.6 !important', // Added breathing room between lines
paddingTop: '0.9em !important', // Increased vertical hit area
paddingBottom: '0.9em !important',
},
'& .ui.vertical.menu .header': {
fontSize: '1.1em !important', // Improved visual hierarchy for section titles
color: '#fff !important', // High contrast for headers
marginBottom: '0.5em !important',
},
'& .ui.vertical.menu .menu .item': {
color: 'rgba(255, 255, 255, 0.8) !important', // Increased text contrast (WCAG AA)
fontSize: '13px !important',
},
},
// --- END OF READABILITY FIX ---
}

style.sidebarMain = {
Expand Down