Darken splash and cover backgrounds to lower contrast and improve readability #310
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Swiftb0y
approved these changes
Jan 16, 2024
ronso0
reviewed
Jan 16, 2024
| @@ -1,9 +1,9 @@ | |||
| #hardware.cover-bg { | |||
| background-image: url('/theme/images/cover/hardware-bg.jpg'); | |||
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/theme/images/cover/hardware-bg.jpg'); | |||
There was a problem hiding this comment.
yeah, this being slightly darker than the library gradient works because the image has higher contrast.
ronso0
approved these changes
Jan 16, 2024
|
The related Zulip discussion https://mixxx.zulipchat.com/#narrow/stream/247619-UI-.26-UX-design/topic/Splash.20banner.20on.20website Do we have a consensus to merge this @mixxxdj/developers ? |
|
I follow the majority |
Holzhaus
approved these changes
Jan 16, 2024
|
Thanks @fwcd for taking care! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have noticed that the current splash background is a bit high in contrast, making the headline hard to read. Also, the logo and the social media icons just blend in too much with the background:
Adding a small gradient alleviates this issue and makes the website simultaneously appear a bit more polished:
The nice thing about modeling this in CSS is that we can freely swap the image without changing the gradient.
In addition to the banner, I've also added some, slightly lower, gradients to backgrounds on the feature page, where the contrast is IMO a bit high too, though the specific opacities are of course up for debate:
Thoughts?