[Minimal mistakes, Github 블로그] 글씨 크기 변경

블로그를 좀 보다 보니까 글씨 크기가 큰 느낌이더라구요? 큼직큼직한게 보기는 좋은데 오히려 너무 크니까 잘 안읽히는 느낌이 강했습니다. 그래서 글씨 크기를 변경하는 겸 포스팅 하려고 합니다. 생각보다 간단해요~ 그럼 깃허브 블로그 글씨 크기를 변경해봅시다.

📑 _reset.scss 변경

📑_reset.scss에서 변경해주면 간단하게 바뀝니다! 해당 경로는 _sass/minimal-mistakes/_reset.scss입니다.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 17px;

  @include breakpoint($medium) {
    font-size: 17px;
  }

  @include breakpoint($large) {
    font-size: 17px;
  }

  @include breakpoint($x-large) {
    font-size: 18px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

위와 같이 코드가 나오는데요. 기본적으로 minimal mistakes는 웹페이지 크기에 따라 글씨 크기를 변경해줍니다. 하지만 이 또한 본인이 정할 수 있어요. 해당 코드를 보면 medium, large, x-large일 때가 있는데, 저같은 경우 x-large인 경우에만 글씨 크기를 변경해주려고 합니다.

아래와 같이 각각 0.5px 씩 줄여주었습니다!

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16.5px;

  @include breakpoint($medium) {
    font-size: 16.5px;
  }

  @include breakpoint($large) {
    font-size: 16.5px;
  }

  @include breakpoint($x-large) {
    font-size: 17.5px;
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

별거 없죠??

이상 minimal mistakes 글씨 크기 변경이었습니다! ☠️