Make code blocks more readable

[TrialDragon]

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

1. 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
2. Fetch my repository for the site: git fetch trialdragon
3. Switch into the branch for this PR: git switch trialdragon/2175_improve_readability_of_code_blocks
4. Run the site: zola serve --open
   4.opt If you need to install Zola, see https://www.getzola.org/documentation/getting-started/installation/
5. Explore the site, use it, see how you feel about the styling changes.

[BD103]

Here's some before and after screenshots, for other reviewers:

[BD103]

Overall I like the changes!

As a side note--the color for links doesn't seem to have enough contrast with the background when in light mode:

I'm going to open a follow-up issue for that.

[alice-i-cecile]

@cart do you want to bikeshed this before I merge? I think that this is a clear improvement personally, especially in light mode.

[cart]

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).

[cart]

Actually I object to the light mode changes too. Its trading the default text contrast for the code contrast, which feels wrong.

[viridia]

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.

[TrialDragon]

@cart, how does this look?

Light Mode

Before

After

Dark Mode

Before

After

[cart]

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.

[cart]

@TrialDragon the new changes in dark mode still feel too "loud" to me / go against the idea in my previous message.

[viridia]

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 #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.