지금 블로그에는 리스트 형식을 마개조 (…) 했는데, 기존의 리스트가 식상하다면 한번쯤은 써볼만한 oopy 스타일 코드를 공유하고자 한다.
// 컨텐츠 너비
.css-1a17bdb,
.css-crjivy {
max-width: 1000px !important;
margin: 0 auto;
}
.css-vv2nxk {
gap: 8px;
}
// 리스트 블럭
.css-1b04wf3 {
height: unset !important;
border-bottom: none !important;
}
//
.css-1jtqoil {
flex-direction: column !important;
align-items: flex-start !important;
padding: 5px;
margin: 0 !important;
}
// 썸네일 아이콘 숨기기
.css-1jtqoil > div:first-child > div:first-child {
display: none !important;
}
// 리스트 블럭 제목
.css-1jtqoil > div:first-child > div:nth-child(2) > div {
border-bottom: none !important;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700 !important;
white-space: unset !important;
text-overflow: unset !important;
overflow: unset !important;
}
// 속성 wrapper
.css-c3un4l {
flex-direction: column;
align-items: flex-start !important;
padding-left: 0 !important;
gap: 4px;
}
// 속성 컨텐츠
.css-w4al9b {
height: unset !important;
margin: 0 !important;
font-size: 1rem !important;
}
// 속성 컨텐츠 wrapper
.css-w4al9b > div {
max-width: 100% !important;
}
// 속성 텍스트
.css-w4al9b > div,
.css-w4al9b > div > span
{
white-space: unset !important;
text-overflow: unset !important;
overflow: unset !important;
word-break: keep-all;
}
CSS
으악 노션이 버전을 올리니까 다시 작업해야한다는 문제점이 있다.