[오딧세이스킨] 목록 수정하기

티스토리 오딧세이 스킨을 사용중이며, 너무 작아 가독서이 떨어지는 듯하여 리스트의 제목과, 요약, 썸네일 등을 수정하여 좀 더 보기 편하게 해보겠습니다.

오딧세이 스킨 목록

 

[목차]

 

오딧세이스킨 목록 수정하기

 

1. 아래공백, 라인삽입

article-type-common 수정

.article-type-common {
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
  
}

아래 공백을 20px를 주고 1px의 선을 주어 아래리스트와 구분하도록 했습니다.

 

2. 제목 title 크기변경

.article-type- .title,
.article-type-thumbnail .title {
  margin-bottom: 5px;
  font-size: 1.25em;
  color:#07d;
  font-weight: 500;
  line-height: 1.67;
}

.article-type- .summary,
.article-type-thumbnail .summary {
  max-width: 620px;
  max-height: 50px;
  margin-bottom: 5px;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.53;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

제목 글씨크기를 1.25배로 사이즈를 조정하고 #07d의 색을 넣었습니다.

요약의 글씨크기를 1.1배로 사이즈를 조정하고, 글씨 아래자리가 부족하여 max-height를 50px로 늘려 줬습니다.

 

3. 적용

목록 제목 크기 색 변경

완성 후 입니다.

 

성공하시길 기원합니다.