bevyengine
Make code blocks more readable
Why
Folks found that the inline code blocks looked weird and lacked contrast making them hard or annoying to read.
What
Fixes #2175
Uses darker colors for darkmode code block background and lighter on light mode (also made light mode background darker to let the contrast show through; this probably needs more work in a proper lightmode redesign PR). Also decreases the empty space next in the blocks so that it doesn't look like there is a space character when their isn't, especially when there is punctuation next to a code block. Also lowered the border radius and made it relative so that it isn't cutting into the letters in an ugly way.
How
Changed color variables (and linked the two separate code background colors that were the same), changed paddings and margins of content lists, and changed the global border radius variable.
Try
- Switch into your bevy website directory
1.opt Add my repository for the site if you haven't before:
git remote add trialdragon [email protected]:TrialDragon/bevy-website.git - Fetch my repository for the site:
git fetch trialdragon - Switch into the branch for this PR:
git switch trialdragon/2175_improve_readability_of_code_blocks - Run the site:
zola serve --open4.opt If you need to install Zola, see https://www.getzola.org/documentation/getting-started/installation/ - Explore the site, use it, see how you feel about the styling changes.
@cart do you want to bikeshed this before I merge? I think that this is a clear improvement personally, especially in light mode.
I like the light mode changes, but I object to how dark the dark mode background is. Significant vibe shift, and imo stands out too much from the other colors in the scheme.
Feel free to merge the light mode changes as-is. But I'd block on the current dark mode colors. I'd like something closer to the current color scheme for dark mode. Ping me again if theres another iteration (or create a new pr for the dark mode proposal).
Actually I object to the light mode changes too. Its trading the default text contrast for the code contrast, which feels wrong.
I object to how dark the dark mode background is
The problem is that without this change, there's just not enough contrast. The inline code sections don't stand out against the page background, they are nearly invisible. And you can't make them lighter, since then you would have a hard time reading the text, unless you plan to lighten the text too.
@cart, how does this look?
Light Mode
Before
After
Dark Mode
Before
After
The inline code sections don't stand out against the page background, they are nearly invisible
This was actually the point. The difference between a "code section" and a "text section" isn't so important that it needs to yell "I AM A CODE SECTION". There is enough of a distinction to indicate that something is different, while still occupying roughly the same amount of mental space (and color scheme) as the background.
@TrialDragon the new changes in dark mode still feel too "loud" to me / go against the idea in my previous message.
The inline code sections don't stand out against the page background, they are nearly invisible
This was actually the point. The difference between a "code section" and a "text section" isn't so important that it needs to yell "I AM A CODE SECTION". There is enough of a distinction to indicate that something is different, while still occupying roughly the same amount of mental space (and color scheme) as the background.
I'm not sure what you are advocating here. Are you saying that things are fine as is, and we don't need to change anything? Look at the screenshot I posted in https://github.com/bevyengine/bevy-website/issues/2175 - the distinction between code and text is so subtle as to be nearly invisible, even to someone with reasonably good eyesight.
This complaint is mainly about inline code sections, not block code sections. The block sections are large enough that the distinction, even though subtle, can be seen relatively easily. But the inline code sections, which use the same color scheme, are really hard to see. If I turn my head and look for a moment at a bright light or window, I can't make them out at all until I give my eyes time to adjust.
I do agree that inline code blocks could use a legibility boost. I'd like to explore solutions that don't throw out the current "character" of the larger code blocks.
I do agree that inline code blocks could use a legibility boost. I'd like to explore solutions that don't throw out the current "character" of the larger code blocks.
So try to split up the color definitions so that larger code blocks have the old / current color and inline code blocks have a newer more contrasting color?
Definitely one path worth exploring. Some other potential paths:
- Increase the size of the surrounding block to make it more prominent
- Tweak the text color inside of the block slightly to make it pop more
- Keep the colors tied together, but just slightly adjust the contrast rather than a more drastic change.
For future comparison images, compare against main rather than the current contents of the PR.
- Increase the size of the surrounding block to make it more prominent
Please don't do this - there's already too much padding in inline code blocks, look at any code followed by punctuation, it looks weird and disconcerting.
Please don't do this - there's already too much padding in inline code blocks, look at any code followed by punctuation, it looks weird and disconcerting.
I do agree that there isn't really much room to grow, ~~at least~~ especially in the horizontal direction.