cayman icon indicating copy to clipboard operation
cayman copied to clipboard

Inline code/fixed-width looks a little small

Open apjanke opened this issue 4 years ago • 2 comments

Hi, Cayman folks!

I'm using Cayman for some of my sites on GitHub Pages.

When I use backticks to format text as inline code, it looks like the resulting fixed-width text is a bit smaller than the surrounding proportional-width text.

Here's an example from my Dispstr site, viewed in Chrome 89.0.4389.82 on macOS 10.14.6:

image

See how the fixed-width bits are shorter vertically, especially when comparing the ascent of lower-case characters, like "e" and "s"?

It seems especially pronounced in section headings:

image

image

Minor aesthetic and readability problem, I think.

Can anything be done to fix this, either in the Cayman theme itself, or something I can do in a GitHub-Pages-compatible customization in my Jekyll site?

apjanke avatar Mar 15 '21 00:03 apjanke

I'm having the same problem:

jekyll code bock size in header

I posted a question in Stack Overflow seeking guidance to changing just a portion of the .main_content scss:

  code {
    padding: 2px 4px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    // font-size: 0.9rem;     // h1 was getting shrunk to .9rem
    color: $code-text-color;
    background-color: $code-bg-color;
    border-radius: 0.3rem;
  }

I created a file _sass/code.scss in my website with the above changes but it has no effect. Note I would rather not copy all the code across and miss out on future upgrades to Cayman Theme.

Thanks,

pippim avatar Nov 14 '21 18:11 pippim

@apjanke

As shown below I've fixed the problem:

jekyll code block size in header 92%

I made the fix by first copying the entire file https://github.com/pages-themes/cayman/blob/master/_sass/jekyll-theme-cayman.scss to my repo's _sass/ subdirectory.

Then I changed font-size: 0.9rem line below to font-size: 92%;:

  code {
    padding: 2px 4px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 92%;  // Change 0.9rem to 92% for proper size in headings
    color: $code-text-color;
    background-color: $code-bg-color;
    border-radius: 0.3rem;
  }

Drawbacks

I don't like the fact if the Cayman Theme repo makes changes to this file I will not gain them as 398 lines of this file are now permanently in my own repo.

That said, I can live with this solution for now. If I improve it I will come back and update this answer.

pippim avatar Nov 14 '21 22:11 pippim