Improve style of code block

[koke]

There's not a lot of difference with the paragraph block, except for the monospace font, and some wrong margins:

The web version for comparison:

[iamthomasbishop]

The simplest fix is probably to just apply a different font-family to the code text – although depending on which font we use, we might have to adjust the font-size as well.

If we use Menlo, which IIRC is what we're using on Aztec, it'd look like this at 14pt, same 24pt line-height:

Focused

Static

The margins should be taken care of by some clean-up of the global styling/margins of the blocks (which I believe @mzorz is working on separately).

[iamthomasbishop]

I'm coming back to this, and wondering if we should make the styling of the code block (and inline code) more distinct. Something like this:

Thoughts, @koke ?

[koke]

It is definitely clearer that it is code than the previous version 😁
I don’t want to take much time with this one, since it’s low priority, but one thing that looks odd to me is the lack of padding inside the background.

[iamthomasbishop]

Good catch. The inline code basically matches Core's padding (2px left/right), but the main Code block should have more padding. I need to update the Sketch library to have 2 variations :)

[iamthomasbishop]

Here are some updated examples, based on the applied paddings (which are the same as the outer block (12 left/right, 16 top/bottom):

The inline code variation has 2 padding left/right.