Style the background colored box for inline code

[masakudamatsu]

Currently, the background color is the same as the focused link text.

It's difficult for keyboard users to find the link text, consequently.

We should follow what GitHub does:

background-color: rgba(27,31,35,.05);
border-radius: 6px;
font-size: 85%;
padding: .2em .4em;

Medium.com

background-color: rgb(242, 242, 242);
font-size: 75%;
padding: 2px 4px;

[masakudamatsu]

Roman Komarov (Sep 8 2016) suggests the use of italic for inline code: https://www.kizu.ru/styling-inline-code/

But this is not standard, potentially puzzling the reader.

[masakudamatsu]

We've decided to go with the following:

  border: 1px solid hsl(0, 0%, 40%); /* same color as focused link background */
  font-size: 85%; 
  letter-spacing: -0.04em;
  padding: 2px 4px 1px;

• Use border instead of background-color to make it stand out less and to differentiate it from the focused/hovered link text.
• Use font-size: 85% because Medium.com effectively reduces x-height by 15% by changing the font-family:
• Keep the negative letter-spacing; otherwise inline code blocks occupy too much space.
• The top/bottom padding is adjusted so the x-height stripe appears vertically centered within the box.