← 목록으로 돌아가기

[Github Blog] 본문 영역 및 글자 크기

minimal-mistakes 기반 GitHub Blog에서 본문 영역 너비, 글자 크기, 하이퍼링크 밑줄 스타일을 조정하는 방법을 정리합니다.

(minimal mistakes 제작자 Michael Rose Sample Post)


minimal mistakes를 사용하기 전에 제일 머뭇거렸던 이유가 콘텐츠 영역의 너비가 너무 좁다는 것이였습니다.
minimal mistakes 자체에서 wide page를 지원해줍니다.

  • minimal mistakes의 공식 홈페이지 가이드 Wide-Page에서 직접 확인하실 수 있습니다.

하지만 이러한 경우 toc가 상단에 고정되게 됩니다.
포스팅을 보는 중에 원하는 곳으로 언제든 이동할 수 있다는 것이 toc의 가장 큰 장점인데…🤦🏻‍♀️
따라서 이 영역을 코드로 직접적으로 코드를 수정해야합니다.
오늘은 이에 대해서 정리해보도록 하겠습니다.

WIDTH 조절하기

_variables.scss 수정

  • 수정 파일 : github.io 폴더 > _sass 폴더 > _minimal-mistakes 폴더 > _variables.scss
/*
   Grid
   ========================================================================== */

$right-sidebar-width-narrow: 100px !default;    // default 200px
$right-sidebar-width: 200px !default;           // default 300px
$right-sidebar-width-wide: 250px !default;      // default 400px

현재의 코드는 _variables.scss 중에서도 거의 최하단에 있습니다.
찾으실 때 무수한 코드를 다 내리지마시고, 제일 아래의 스크롤로 내리세요.
본문에 너비를 직접적으로 넓히는게 아니라, 양쪽에 sidebar를 조절하는 방식입니다.
각 기본 값은 200, 300, 400px이였지만 100, 200, 250px로 조절했습니다.
혹시라도 돌려놓고 싶을까봐 주석으로 남겨두었습니다!

로컬 서버로 적용하는 범위를 확인해보시고, 원하시는 값으로 조정해보세요!

BLOG FONT 조절하기

글자 크기 : _reset.scss 수정

  • 수정 파일 : github.io 폴더 > _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: 16px;                    // Default 16px;

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

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

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

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

원 코드의 상단부(7번줄)에 있는 코드이기에 금방 찾으실 수 있으실 껍니다.
전체적인 폰트의 기준은 없습니다!
로컬 서버에서 직접 등록해보시면서, 원하시는 크키로 조정하시면 됩니다.

밑줄 제거 : _base.scss 수정

image

처음 블로그를 세팅하면 각 포스터가 하이퍼링크로 처리된걸 확인하실 수가 있습니다.
이가 계속 눈에 보이더라구요. 이미 많은 분들이 minimal mistakes에서 이를 많이 적용하셨더라구요.
하이퍼링크는 a라는 태그값을 갖고있습니다.

  • 수정 파일 : github.io 폴더 > _sass 폴더 > _minimal-mistakes 폴더 > _base.scss
a {
  text-decoration: none;                // 추가된 코드입니다.

  &:focus {
    @extend %tab-focus;
  }

  &:visited {
    color: $link-color-visited;
  }

  &:hover {
    color: $link-color-hover;
    outline: 0;
  }
}

base 파일의 중반부(127번줄)에 있습니다.
찾기 힘드실 때는 Ctrl + F를 통해 a{ 를 검색하셔서 확인해보세요!
이후 하이퍼링크 처리와 관련된 decoration을 해지해야하니 이를 전체에 적용될 수 있도록 추가해주시면 되겠습니다!