Github 블로그 마우스 커서 설정

소개

티스토리 블로그는 정보가 많지만 Github 블로그는 없길래 삽질해보다 성공한 후기

과정

먼저 커서 부터 바꿔보자

아래 사이트에서 원하는 커서를 찾아보자
여기를 클릭!
난 내가 좋아하는 펭귄 테마를 선택했다.

아래로 내려보면 이런 소스 코드가 보인다.
cursor : 부터 style 태그 닫히는 곳까지만 복사해준다.

보통 jekyll 테마의 assets 폴더 아래에 위치한 style.css 에 붙여넣기 해준다.

저장만 하면 성공!

커서 애니메이션도 설정해보자

1. 아래 코드를 style.scss에 붙여넣는다.
   

    .click-box {
    position: absolute;
    z-index: 9999;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(5, 175, 248);
    pointer-events: fill;
    }
   
    @keyframes click {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
    }
   

2. 아래 코드를 애니메이션을 원하는 페이지 js 파일에 붙여넣기
   보통 파일 위치는 assets/js/dist 아래에 있다

    var clickX = 0, clickY = 0;
    $(document).on('click', function(e){
    clickX = e.pageX;
    clickY = e.pageY;
    var box = $('<div class="click-box"></div>').appendTo('body');
    box.css({
        'left': clickX - 4,
        'top': clickY - 4,
        'opacity': '0.4',
        'animation': 'click 0.6s ease-out'
    });
    setTimeout(function(){
        box.remove();
    }, 600);
    });
   

   모드에 따른 애니메이션을 설정해보자

   밝은 모드에서는 잘 보이던 색상이 어두운 모드에선 안보이는 경우가 있다.
   따라서 모드에 따라 색상을 다르게 설정해볼것이다.
   이번에 수정할 파일은 chirpy기준 _sass/addon/commons.scss파일인데 다른 테마의 경우 visual studio 검색기능을 활용해 dark를 검색해보면 수정해야하는 파일이 보일것이다.
   아까 설정한 style.scss 파일의 css는 삭제해주고 commons.scss에 붙여넣은 뒤 모드에 따라 색상을 다르게 설정해주면된다.

   @media (prefers-color-scheme: light) {
    &:not([data-mode]),
    &[data-mode="light"] {
        @include light-scheme;
        .click-box {
        position: absolute;
        z-index: 9999;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgb(1, 1, 79);
        pointer-events: fill;
        }
    }
   
    &[data-mode="dark"] {
        @include dark-scheme;
        .click-box {
        position: absolute;
        z-index: 9999;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: white;
        pointer-events: fill;
        }
    }
    }
   

마치며

뭔가 블로그 꾸며나가는게 재밌다! 다음엔 뭘 해볼까