hexo 의 icarus theme 수정하기

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

1. bulma.io
   • https://bulma.io/
2. inferno
   • https://github.com/ppoffice/hexo-component-inferno

layout 관련

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

• Bulma sizes: https://bulma.io/documentation/columns/sizes/
• https://www.geeksforgeeks.org/bulma-different-column-sizes-per-breakpoint/?ref=ml_lbp

컬럼 수에 따른 조절…

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

<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.

+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 아래 추가할 스타일 파일을 만들어 사용한다.

hexo ROOT/
    |----- themes
            |
            |----- icarus/
                        source/css/my_bg.styl

배경이미지 적용

1. themes/icarus/source/css/style.styl 파일에 다음을 적용

// my custums
@import '../../include/style/my_bg'

2. 배경 이미지는 hexo/source/images/ 아래에 저장했다.

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

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%;
}