-
Notifications
You must be signed in to change notification settings - Fork 178
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
Modernize visual appearance of grids #742
base: main
Are you sure you want to change the base?
Conversation
@swift-ci test |
For my part, it lowers the reading contrast in those grey-blocked sections a bit too much. No qualms about the added visual structure blocking things out, but I'd at least toss in a request for a darker font/weighting to get the contrast back up. |
For both dark and light mode or just one specifically? |
Ah, sorry - really just the light mode. The difference in the dark mode didn't my eyes as hard - it's a little reduced, but not to a level that makes reading more difficult for me. I'll never complain about a bit more contrast though ;-) |
Since the existing style is very high contrast, we should consider preserving it as a |
I find the use of the orange color for call outs, for example the "Get Involved" section of the package page to draw far too much attention to that element. Getting involved is important, which is why it is in a call out box, but it is not the most important thing on the page. I find the orange color draws the eye too much for these kind of call outs. Changing the link text and underline from blue to orange also make the link / call to action in the call out much less visible. Scanning the original, it is clear the box wants people to get involved with the main way of getting involved as 'Nominate packages'. Using the orange color for the call to action about the migration guide on the home page is meant to draw the eye, especially on a home page where the content is largely static, and where directing visitors to the migration guide is an important and transient announcement. |
@dempseyatgithub I pulled the banner changes out into #749, could you take a look there? |
Large +1 from me, this is a big improvement. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rauhul Can we merge the other PRs and rebase before final review?
That aside, we need to increase the contrast in light mode even further by toning down the background gray, otherwise it would be a regression in accessibility for many.
@rauhul Happy to review this once rebased. Thanks! |
Updates all grids except for package grids to take a more layered appearance matching that of the tabs. Adds support for "prefers-contrast: more" to use the previous higher contrast style. Removes the many grid css styles and replaces them with a common grid style in the elements folder than can be reused between pages.
43b00e3
to
8a32d22
Compare
anything blocking this? |
@swift-ci test |
Updates all grids except for package grids to take a more layered
appearance matching that of the tabs.
Adds support for "prefers-contrast: more" to use the previous higher
contrast style.
Removes the many grid css styles and replaces them with a common grid
style in the elements folder than can be reused between pages.
Builds on top of #743, #749, and #751