탐색기 가독성 개선 (색상 띠 + 간격)
All checks were successful
Publish ParaWiki / build-and-deploy (push) Successful in 32s

긴 한국어 제목 구분성 향상을 위해 각 항목에 좌측 색상 띠와 점선 구분선 추가.
빌드 시 quartz-custom/custom.scss가 Quartz 기본 custom.scss를 덮어씀.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
minsung
2026-04-14 12:02:40 +09:00
parent 5aaf63eff5
commit b011197401
2 changed files with 45 additions and 0 deletions

View File

@@ -48,6 +48,12 @@ jobs:
cp -r parawiki/wiki/. quartz/content/
rm -f quartz/content/CLAUDE.md
- name: Apply custom styles
run: |
if [ -f parawiki/quartz-custom/custom.scss ]; then
cp parawiki/quartz-custom/custom.scss quartz/quartz/styles/custom.scss
fi
- name: Build site
working-directory: quartz
run: npx quartz build

39
quartz-custom/custom.scss Normal file
View File

@@ -0,0 +1,39 @@
@use "./base.scss";
// Explorer (left sidebar) — 긴 한국어 제목 구분성 개선
#explorer-content {
& > ul.overflow > li {
margin: 0.15rem 0;
}
a[data-for],
.folder-container > div > span {
display: block;
padding: 0.45em 0.65em;
border-left: 4px solid transparent;
border-radius: 0 4px 4px 0;
line-height: 1.35;
transition: background 0.12s ease, border-color 0.12s ease;
}
// Cycling accent colors per item for quick visual distinction
& > ul.overflow > li:nth-child(8n+1) a[data-for] { border-left-color: #e03131; }
& > ul.overflow > li:nth-child(8n+2) a[data-for] { border-left-color: #f76707; }
& > ul.overflow > li:nth-child(8n+3) a[data-for] { border-left-color: #f59f00; }
& > ul.overflow > li:nth-child(8n+4) a[data-for] { border-left-color: #2f9e44; }
& > ul.overflow > li:nth-child(8n+5) a[data-for] { border-left-color: #099268; }
& > ul.overflow > li:nth-child(8n+6) a[data-for] { border-left-color: #1971c2; }
& > ul.overflow > li:nth-child(8n+7) a[data-for] { border-left-color: #7048e8; }
& > ul.overflow > li:nth-child(8n+8) a[data-for] { border-left-color: #c2255c; }
a[data-for]:hover {
background: var(--lightgray);
border-left-width: 6px;
}
}
// Subtle dotted separator between items
#explorer-content > ul.overflow > li + li {
border-top: 1px dotted var(--lightgray);
padding-top: 0.1rem;
}