스킨 수정

관련 커밋: 링크

스킨 추가

전체적인 분위기를 바꾸기 위해 우선 _sass/minimal-mistakes/skins에 들어있는 스킨들을 살펴보고, 이를 비슷하게 따라해서 새로 스킨 _custom.scss를 추가해줬다. 이후 _config.yml의

minimal_mistakes_skin    : "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

부분을

minimal_mistakes_skin    : "custom" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

으로 바꾸어 주었다. 이전과 마찬가지로 _config.yml을 수정했으면 서버를 내렸다가 다시 열어야 수정사항이 반영된다.

디자인 수정

어쨌든 이를 통해 바꾼 결과물도 썩 마음에 들지 않았다. 가장 큰 문제는 페이지 맨 윗부분 (masthead라 부른다) 색상이 primary-color와 다르다는 것이었다. 이는 _masthead.scss와 _navigation.scss를 수정해주면 된다.

우선 _masthead.scss에서, 맨 위

.masthead {
  position: relative;
  border-bottom: 1px solid $border-color;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  z-index: 20;
  ...

를 찾아 마지막 줄에 다음과 같이 배경색상을 지정해준다.

.masthead {
  position: relative;
  border-bottom: 1px solid $border-color;
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  z-index: 20;
  background-color: $footer-background-color;
  ...

나는 $footer-background-color로 수정하였지만, 스킨에서 지정한 어떤 색상으로 바꿔도 무방하고, 혹은 직접 색상코드를 입력해도 무방하다. _masthead.scss만 수정할 경우 위쪽 부분이 좀 이상한데, 이는 masthead에 _navigation.scss에서 조절되는 부분이 들어있기 때문이다. _navigation.scss에서 다음의 코드

.greedy-nav {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: $nav-height;
  background: $background-color;
  ...

를 찾아 마지막 줄의 background를

.greedy-nav {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: $nav-height;
  background: $footer-background-color;

으로 바꿔줬다. 개인적으로는 위에서 지정한 색상과 방금 지정한 색상이 다르면 어떻게 해도 이상할 듯 싶다.

마지막으로 다른 링크와의 일관성을 위해 검색 버튼 또한 기본 색상은 $masthead-link-color, 마우스를 가져다 대면 $masthead-link-color-hover를 따르도록 _search.scss 파일을 다음과 같이 수정했다.

.search__toggle {
  margin-left: 1rem;
  margin-right: 1rem;
   height: $nav-toggle-height;
   border: 0;
   outline: none;
   color: $masthead-link-color;
   background-color: transparent;
   cursor: pointer;
   -webkit-transition: 0.2s;
   transition: 0.2s;

   &:hover {
     color: $masthead-link-color-hover;
   }
 }

코드블럭 수정

원래는 블로그에서 코드를 사용할 일이 없어 코드블럭은 별 신경을 쓰지 않았지만, 블로그 개발일지를 적으며 코드블럭을 생각보다 자주 사용하게 되었다. 따라서 코드블럭 또한 마음에 들도록 수정했다.

Jekyll은 rouge를 통해 코드 하이라이트를 지원한다. 그러나 이것이 내 컴퓨터에 rouge가 설치되어 있다는 뜻은 아니다. 우선 터미널에서

gem install rouge

명령어를 통해 rouge를 설치한다. rouge에는 다양한 테마가 있는데, 링크에서 어떠한 테마를 택할지 대략 살펴볼 수 있다. 나는 base16.solarized.dark를 사용하기로 했다.

이후 사이트가 저장된 로컬 저장소에서 터미널을 실행한 후,

rougify style base16.solarized.dark > assets/css/syntax.css

를 입력하면 base16.solarized.dark에 대한 css 규칙이 위의 경로에 생성된다. 나는 이 파일을 열어서 배경색상 또한 블로그 테마에 맞도록 약간 수정했다.

이렇게 코드 하이라이트를 담은 css파일을 만들었으면 html 파일 아무데에나 다음의 코드

<link rel="stylesheet" href="/assets/css/syntax.css">

를 입력하면 된다. 나는 이 커밋에서 _includes/head.html을 수정할 일이 있어 겸사겸사 이 파일에 넣어줬다.

사이트 테마 색상 설정

마지막으로 _includes/head.html 파일의 맨 윗 줄에

<meta name="theme-color" content="#071734">

를 추가해주었다. 이 코드는 사이트의 테마 색상을 지정해줘서, 지원하는 브라우저의 경우 탭 색상이 내 블로그의 테마 색상으로 변하게 된다.

---

참고자료

코드블럭 색상 수정의 경우, 이 글을 참조하였다.

---