Github.io 게시글 밑줄 제거, 본문 글자 크기 수정

큰 기능은 아닌, 두 가지 작은 기능을 수정해 보려고 한다.

두 기능은 아래와 같다.

1. 게시글 제목, 링크 하단 밑 줄 제거
2. 본문 글자 크기 변경

이 두 가지를 수정하는 방법에 대해 간단히 알아보자!

시작하기 전, 이 글은 minimal-mistakes를 기준으로 작성되었다.

☝ 게시글 링크 하단 밑줄 제거하기

전(왼쪽) / 후(오른쪽)

` _sass/minimal-mistakes/로 이동하여, _base.scss` 파일을 열자.

그 후, 파일 내 links를 검색하여 &:focus {와 같은 depth에 text-decoration: none;을 새로 추가해주자.

내 경우는 아래와 같이 파일이 수정되었다.

...
/* links */

a {
  text-decoration: none;
  &:focus {
    @extend %tab-focus;
  }
...

이 커밋에서 자세한 수정 내용을 확인할 수 있다.

🤞 본문 글자 크기 수정하기

전(왼쪽) / 후(오른쪽)

위와 마찬가지로 _sass/minimal-mistakes/로 이동해서, _reset.scss 파일을 수정하자.

각각 타입별 폰트 사이즈가 적혀있는데, 나는 일괄로 2pt씩 키워줬다.

...
/* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  /* font-size: 14px; */
  font-size: 16px;

  @include breakpoint($medium) {
    /* font-size: 16px; */
    font-size: 18px;
  }

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

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

  -webkit-text-size-adjust: 100%;
...

이 커밋에서 자세한 수정 내용을 확인할 수 있다.

🍀 마치며

오랜만에 블로그를 조금 수정해봤다.

다시 보니 글자가 작아 가독성도 떨어지는 것 같고, 맘에 안드는 부분이 몇 가지 있어서 간단히 수정해줬다.

다음에는 목차가 계속해서 스크롤을 따라다니도록 수정해보고 싶다.

그래도 오늘은 이만 끝!