2018/2/1 스킨 제작 일지

새벽에 포스팅을 해와서 사실 작업은 한참 전에 끝냈지만, '다른걸 하다보면 아이디어가 떠오를 수도 있지 않을까' 하며 결국 이 시간까지 기다렸다.

index 페이지를 조금 변경했다.

예전엔 가로로 정보들이 나열되다 보니 한 페이지 안에 낭비되는 공간이 많았는데,

정보들을 세로로 나열되게 하여 공간의 낭비를 줄였다.

.article_wrapper{
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

s_index_article_rep 밖에서 article로 감싸도 계속 article이 반복돼서 그걸 해결하려다가 도무지 안돼서

마음 편하게 s_article_rep 전체를 감싸고 s_permalink_article_rep에 따로 display 값을 줘서 해결했다.

추가로, hover시 div가 커지던 걸 이미지만 커지도록 변경하였고, 

이미지를 div로 감싸 이미지 크기가 커지는 게 아니라 확대가 조금 되는 것처럼 보이게 변경했다.

.index_article:hover img{
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075);
}

.index_thumbnail img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

hover를 하면 컴퓨터에선 이미지 위에 글 제목 등이 뜨게 할까 생각 중이어서, %보단 px를 이용하여 크기를 만들었다.

RSS 버튼을 간단한 포토샵으로 만들어서 추가하고, 하단에 스크롤 바를 추가했다.

RSS 버튼은 조금 더 작게 수정할 필요가 있어 보인다.

메일도 처음에 인스타그램보다 과하게 커서 다시 줄였는데, 그냥 그때 인스타그램을 늘일 걸 그랬다.

.Progress_bar_wrapper {
    left: 0;
    width: 100%;
    height: 0.4em;
    margin-bottom: 0px;
    position: fixed;
    bottom: 0px;
    overflow: hidden;
    background-color: #ececec;
    content: "";
    display: table;
    table-layout: fixed;
    z-index: 10;
}
.Progress_bar {
    width: 0%;
    float: left;
    height: 100%;
    max-width: 100%;
    background-color: black;
    -webkit-transition: width .6s ease;
    -moz-transition: width .6s ease;
    transition: width .6s ease;
    z-index: 11;
}

$(window).load(function () {
    $(window).scroll(function () {
        var wintop = $(window).scrollTop(),
            docheight = $('body').height(),
            winheight = $(window).height();
        console.log(wintop);
        var totalScroll = (wintop / (docheight - winheight)) * 100;
        console.log("total scroll" + totalScroll);
        $(".Progress_bar").css("width", totalScroll + "%");
    });
});
 

원래 이런 실질적으로 도움이 되지 않는 요소들은 넣지 않으려고 하는 편인데,

이미지와 함께 긴 글을 읽을 때, 진행 상황을 보기 위해 굳이 오른쪽으로 시선을 안 옮기고 아래만 봐도 진행 상황을 알 수 있게 하려고 추가했다.

.selected에 color:transparent를 줘서 디자인을 조금 더 깔끔하게 변경하고, hover 색상을 변경해 전체적인 색들 간 조화를 맞췄다.

#header {
    -moz-animation: reveal-header 0.5s ease;
    -webkit-animation: reveal-header 0.5s ease;
    -ms-animation: reveal-header 0.5s ease;
    animation: reveal-header 0.5s ease;
}

header가 부드럽게 나타나도록 변경했다.

이제 꼭 필요한 기능들은 다 갖춰졌기에, 어떤 기능들이 더 필요할지, 어디를 더 디자인 해야 할지 고민 중이다.

글이 중요한 공간이다 보니 최대한 가독성을 해치지 않는 범위 내에서 꾸준히 수정할 계획이다.