Search code examples
githubsvgjekyllgraphical-logo

Changing logo.svg file on Jekyll GitHub (reducing pixel size does not appear to make change)


I am recently familiarizing myself with templates using Jekyll on GitHub. I have so far been successful for everything - except one item. It is a spaceship-like logo in the top-left corner of each page. An example is here.

A different logo was originally in place and I managed to change it to the spaceship-like logo by changing the files in:

1) https://github.com/testMDRS/testMDRS.github.io/tree/master/assets/logos
2) https://github.com/testMDRS/testMDRS.github.io/tree/master/_site/assets/logos

I believe the logo in the top-left corner of the pages is coming from the "logo.svg" file in one of the two directories above. It may be that I am not used to working with .svg files, but I was unable to determine its pixel dimensions and resize its pixel dimensions on my Mac. Instead, I used an online program to reduce the pixel sizes. But even if I do so and push the changes to the GitHub repository, the logo in the top-left corner appears the same size.

Any advice on how to determine the source of the logo and reduce its size would be so greatly appreciated.


Solution

  • The size of the displayed logo can be adjusted by changing max-height attribute in the

    _sass/_theme.scss

    .logo {
      display: inline-block;
      line-height: 0;
      max-height: 4rem;
      @include flexbox;
      @include align-items(center);
      img {
        max-height: 5rem;
      }
    }
    

    When max-height is changed, the width will follow automatically to keep the w/h ratio.