Ad

Changing Logo.svg File On Jekyll GitHub (reducing Pixel Size Does Not Appear To Make Change)

- 1 answer

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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad