(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 수정

처음 블로그를 세팅하면 각 포스터가 하이퍼링크로 처리된걸 확인하실 수가 있습니다.
이가 계속 눈에 보이더라구요. 이미 많은 분들이 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을 해지해야하니 이를 전체에 적용될 수 있도록 추가해주시면 되겠습니다!