hexo 의 icarus theme 수정하기

git 으로 clone 한 icarus theme 를 사용하고 있다. 스타일과 코드를 수정하려면 아래 2개 사이트의 정보가 필요할 것 같다.

  1. bulma.io
  2. inferno

layout 관련

기본 레이아웃은 layout.jsx 이다.과련해서 bulma 의 CSS 정의를 살펴보면 도움이 된다.

컬럼 수에 따른 조절…

icarus/layout/layout.jsx 에서 컬럼수로 폭을 조절하는 것을 상대적으로 정해주니 좀 더 시원해 졌다.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="columns">
<div class={classname({
column: true,
'order-2': true,
'column-main': true,
'is-four-fifths': columnCount === 1,
//'is-12': columnCount === 1,
'is-four-fifths-tablet is-four-fifths-desktop is-four-fifths-widescreen': columnCount === 2,
'is-three-quarters-tablet is-three-quarters-desktop is-three-quarters-widescreen': columnCount === 3
//'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
//'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
})} dangerouslySetInnerHTML={{ __html: body }}></div>

style 관련

responsive.styl

화면 폭 수정

themes/icarus/include/style/responsive.styl

  • Javascript code determines the page width.
1
2
3
4
+fullhd()
.is-2-column .container
max-width: $widescreen - 1 * $gap
width: $widescreen - 1 * $gap

style.styl

전체 스타일 시트는 themes/icarus/source/css/style.styl 에서 외부 .styl 파일을 을 import 해서 적용했다. 변경을 위해서 themes/my_icarus_custom 이란 폴더를 만들어 사용한다.

  • themes/icarus/source/css/style 아래 추가할 스타일 파일을 만들어 사용한다.
1
2
3
4
5
hexo ROOT/
|----- themes
|
|----- icarus/
source/css/my_bg.styl

배경이미지 적용

  1. themes/icarus/source/css/style.styl 파일에 다음을 적용
1
2
// my custums
@import '../../include/style/my_bg'
  1. 배경 이미지는 hexo/source/images/ 아래에 저장했다.

  2. my_icarus_custom/bg.styl 파일에 CSS 스타일 작성

1
2
3
4
5
6
7
body {
background-image: url("/images/vlcsnap-2023-05-16-14h44m58s614.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}