Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline code/fixed-width looks a little small #121

Open
apjanke opened this issue Mar 15, 2021 · 2 comments
Open

Inline code/fixed-width looks a little small #121

apjanke opened this issue Mar 15, 2021 · 2 comments

Comments

@apjanke
Copy link

apjanke commented Mar 15, 2021

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?

@pippim
Copy link

pippim commented Nov 14, 2021

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
Copy link

pippim commented Nov 14, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants