이번에 매우 많은 변화가 있었다.
* 땀똔님께서 "Lovely Skin"이라는 이름을 주셨다.
1. 인덱스 페이지 및 헤더
- 스크롤 바
webkit 기반이 아닌 브라우저들은 스크롤 바가 그대로 표시가 되기 때문에 일단은 표시되도록 했다. 스크립트를 쓸지 말지 고민 중이다.
- 내비게이션 링크
검색창이 사이드 바로 옮겨가며 지속해서 헤더에 표시되도록 하였고, 예전엔 해당 페이지에선 해당 페이지로 가는 링크가 사라지도록 했는데, 이번엔 다른 색으로 표시되도록 해서 어느 페이지에 있는지 확실하게 전달되도록 했다.
- 배경 이미지
별 큰 변경은 없이 주석 처리해놨던걸 해제했다.
- 인덱스 비디오
날도 더운데 후드 집업 쓴 영상보다는 여름 영상이 낫지 않을까
- 로고 및 관리자 메뉴
로고엔 별도의 폰트를 적용하고, 클릭 시 드랍다운으로 관리자 메뉴가 나타나도록 하였다.
2. 메인 페이지
- 2단형
원래는 화면을 좀 시원하게 보고 싶다는 생각에 1단형을 고집했으나, 너무 오래 써오기도 했고, 전문적인 사진들을 다루는 블로그도 아니기에 2단형으로 변화를 꾀했다.
당연하지만 원래보다 훨씬 더 많은 정보를 더욱 깔끔하게 담을 수 있게 되었다.
- 달력
위 사진과 비교를 해보면 알겠지만, 시계만 표시되다 마우스를 올리면 달력이 펼쳐지도록 하였다.
1 2 3 4 5 6 7 8 9 10 | .tistory_calendar { margin-top: 10px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } .calendar_append:hover .tistory_calendar { max-height: 300px; } | cs |
height: 0에서 height: auto로 변경되도록 하면 transition을 사용할 수 없다.
max-height을 적절하게 이용해주면 css만으로도 부드럽게 메뉴를 펼칠 수 있다.
3. 댓글 디자인
댓글 리스트와 입력창의 위치를 바꿨다.
예전에 나타나던 무지개 테두리는, 입력창에 마우스를 올리거나 글을 입력할 때만 표시되도록 변경했다.
사진엔 표시되지 않았지만, line-height도 본문과 똑같은 수준으로 변경해서 가독성을 높였다.
4. 기타 변경점
- 각종 애니메이션
페이지 하단에 인스타그램 등이 들어있는 바와 인덱스/카테고리 등의 페이지에서 글 목록이 예전엔 페이드인/아웃만 되도록 해놨는데,이젠 아래에서 위로 올라오며 짙어지는 애니메이션으로 변경했다.
- a 태그, 기타 등등...
