search

zutrinken / bleak

Ghost Theme
https://bleak.peteramende.de
MIT License
535 stars 130 forks source link

Code Fonts - local tweaks #57

Closed jaguart closed 6 years ago

jaguart commented 6 years ago

Hi,

Inline / Code-blocks - Inconsolata at 0.874em does not render well for me.

Using code-injection, I have tweaked to Roboto+Mono from Google, and change the font-size to 0.80em, which all looks good for in-line comments.

Codeblock font at 1.0em is too large in proportion to the rest of the page - I want to tweak this to 0.90em.

I have naively tried: 

    .post-content pre code, .post-content pre tt, .post-content pre.codeblock .lines {
       font-size: 0.90em;      
    }

but the pre.codeblock dark background appears as an uneven heavy border, I think because the child div.lines and code.hljs have differing non-obvious box-models - the div.lines is 1-2px higher than the code.hljs - so the numbering doesn't quite align.

Here's a pic: bleak-codeblock-issue

I've reached the limit of my CSS tweaking - I would love it if it were easier to scale inline and codeblock and div.lines to a different font-style and font-size.

P.S. Love the theme - one of the best there is!

jaguart commented 6 years ago

Oh - so I've found that reducing the font-size to 0.900em means that the negative margins on the code.hljs block need increasing - the top by 1.00 - 0.90 = 0.1 the bottom/left by twice the diff.

 .post-content pre.codeblock code    {
     margin-top: -1.100em;
     margin-bottom: -1.200em;
     margin-right: -1.200em;
  }

I think the issue is resolved - unless you want to change div.lines to make it easier to keep the two in step.