[Blog] minmal-mistakes 블로그 커스텀

Updated:

블로그 스킨 변경

Hyeonjiwon.github.io > _sass > minimal-mistakes > skins 경로로 들어가면 여러 minimal_mistakes_skin 파일들이 있습니다. 저만의 블로그 스킨을 만들고 싶어서 custom.scss 파일을 생성한 후,

24-4

색상 값들을 새로 정의해 주었습니다.

24-5

다 만들고 난 후, _config.yml 파일에 들어가 minimal_mistakes_skin의 값을 custom으로 변경해주면 됩니다.ㅎㅎ

17d9c7a를 참고하시면 됩니다.

Before

24-1

After

24-9

블로그 목차 커스텀

글을 작성하면 글의 오른쪽에 나오는 목차의 상단 부분(On this page 이 부분)의 색깔을 변경하는 방법입니다.

_sass > minimal-mistakes > _navigation.scss 의 경로로 들어가서 .toc 클래스의 background 값을 변경해 주면됩니다.

24-10

위 사진에서 .toc 클래스의 background 기존 값은 스킨에서 정의된 $primary-color 값으로 정의되어 있습니다. 저는 primary-color와는 다른 색으로 변경 해 주었습니다. ㅎㅎ

55dc786를 참고하시면 됩니다.

Before

24-3

After

24-11

블로그 부제목 크기 변경

Recent Posts글자의 크기를 키우는 방법입니다. 저는 글 제목보다 너무 작아보여서 키우고 싶더라구요 ….ㅎ.

_sass > minimal-mistakes > _archive.scss 경로로 들어가서 .archive__subtitle 클래스의 font-size 값을 변경해주면 됩니다.

$type-size-n에 대한 정의는 _variables.scss에서 확인할 수 있습니다. ㅎㅎ 숫자가 작을수록 글자가 커집니다.

자세한 내용은 90eb07d를 참고하시면 됩니다.

Before

24-6

After

24-8

Leave a comment