diff --git a/assets/built/screen.css b/assets/built/screen.css index 6946f72..0503ffc 100644 --- a/assets/built/screen.css +++ b/assets/built/screen.css @@ -353,6 +353,27 @@ body.left-sidebar-collapsed .sidebar--left { line-height: 1; } +.sidebar-card--categories { + padding-top: 0; + border-top: 0; +} + +.sidebar-card--categories .sidebar-card__trigger { + width: 100%; + padding-left: 0; + background: transparent; + border: 0; + color: inherit; +} + +.sidebar-card--categories .sidebar-card__chevron { + transition: transform 0.2s ease; +} + +.sidebar-card--categories .sidebar-card__content--categories { + padding: 0; +} + .category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -427,6 +448,33 @@ body.left-sidebar-collapsed .sidebar--left { border-radius: 999px; } +.sidebar-card--categories .category-chip { + font-size: 12.8px; + font-weight: 500; + letter-spacing: 0; +} + +.sidebar-card--categories .category-chip:hover { + transform: none; +} + +.sidebar-card--categories .category-chip__dot { + position: static; + flex: 0 0 auto; +} + +.sidebar-card--categories .category-chip__dot::before { + content: none; +} + +.sidebar-card--categories .category-chip__label { + font-size: inherit; +} + +.sidebar-card--categories .category-chip__count { + min-width: auto; +} + .author-list { display: grid; gap: 10px; diff --git a/assets/built/tailwind.css b/assets/built/tailwind.css index 4e56824..70c160d 100644 --- a/assets/built/tailwind.css +++ b/assets/built/tailwind.css @@ -1 +1 @@ -.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.-mb-1\.5{margin-bottom:-.375rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-auto{margin-top:auto}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-4{height:1rem}.min-h-\[128px\]{min-height:128px}.w-11{width:2.75rem}.w-4{width:1rem}.w-\[3px\]{width:3px}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-y-0\.5{row-gap:.125rem}.text-ellipsis{text-overflow:ellipsis}.rounded-\[14px\]{border-radius:14px}.rounded-\[15px\]{border-radius:15px}.rounded-\[18px\]{border-radius:18px}.rounded-full{border-radius:9999px}.rounded-l-\[14px\]{border-top-left-radius:14px;border-bottom-left-radius:14px}.border{border-width:1px}.border-\[var\(--border\)\]{border-color:var(--border)}.bg-\[var\(--surface\)\]{background-color:var(--surface)}.bg-\[var\(--surface-muted\)\]{background-color:var(--surface-muted)}.bg-\[var\(--tag-accent\2c var\(--accent\)\)\]{background-color:var(--tag-accent,var(--accent))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-0{padding-left:0}.pr-3{padding-right:.75rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[0\.8rem\]{font-size:.8rem}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.text-\[var\(--text-soft\)\]{color:var(--text-soft)}.opacity-70{opacity:.7}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-\[padding\2c background-color\2c color\]{transition-property:padding,background-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-\[var\(--surface-muted\)\]:hover{background-color:var(--surface-muted)}.hover\:px-3:hover{padding-left:.75rem;padding-right:.75rem}.hover\:px-4:hover{padding-left:1rem;padding-right:1rem}.hover\:opacity-75:hover{opacity:.75}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:pr-3{padding-right:.75rem}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:pl-0{padding-left:0}} \ No newline at end of file +.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.-mb-1\.5{margin-bottom:-.375rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-auto{margin-top:auto}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-4{height:1rem}.min-h-\[128px\]{min-height:128px}.w-1{width:.25rem}.w-11{width:2.75rem}.w-4{width:1rem}.w-\[3px\]{width:3px}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded-\[14px\]{border-radius:14px}.rounded-\[15px\]{border-radius:15px}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.rounded-l-\[14px\]{border-top-left-radius:14px;border-bottom-left-radius:14px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[var\(--border\)\],.border-brd{border-color:var(--border)}.bg-\[var\(--surface\)\]{background-color:var(--surface)}.bg-\[var\(--surface-muted\)\]{background-color:var(--surface-muted)}.bg-\[var\(--tag-accent\2c var\(--accent\)\)\]{background-color:var(--tag-accent,var(--accent))}.bg-accent{background-color:var(--color-accent)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-0{padding-left:0}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[0\.8rem\]{font-size:.8rem}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.text-\[var\(--text-soft\)\],.text-typ-tone{color:var(--text-soft)}.opacity-0{opacity:0}.opacity-70{opacity:.7}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-\[padding\2c background-color\2c color\]{transition-property:padding,background-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[padding\]{transition-property:padding;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}[x-cloak]{display:none!important}.rounded-theme{border-radius:18px}.border-brd{border-color:var(--border)}.text-typ-tone{color:var(--text-soft)}.bg-accent{background:var(--color-accent)}.line-clamp-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hover\:bg-\[var\(--surface-muted\)\]:hover,.hover\:bg-bgr-tone:hover{background-color:var(--surface-muted)}.hover\:px-3:hover{padding-left:.75rem;padding-right:.75rem}.hover\:px-4:hover{padding-left:1rem;padding-right:1rem}.hover\:text-typ:hover{color:var(--text)}.hover\:opacity-75:hover{opacity:.75}.hover\:bg-bgr-tone:hover{background-color:var(--surface-muted)}.hover\:text-typ:hover{color:var(--text)}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:size-2{width:.5rem;height:.5rem}.group:hover .group-hover\:rounded-full{border-radius:9999px}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:pr-3{padding-right:.75rem}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:pl-0{padding-left:0}} \ No newline at end of file diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css index 7c05d4d..77d4b31 100644 --- a/assets/styles/tailwind.css +++ b/assets/styles/tailwind.css @@ -1,2 +1,42 @@ @tailwind components; @tailwind utilities; + +@layer utilities { + [x-cloak] { + display: none !important; + } + + .rounded-theme { + border-radius: 18px; + } + + .border-brd { + border-color: var(--border); + } + + .bg-bgr-tone { + background-color: var(--surface-muted); + } + + .text-typ { + color: var(--text); + } + + .text-typ-tone { + color: var(--text-soft); + } + + .bg-accent { + background: var(--color-accent); + } + + .gap-0\.75 { + gap: 0.1875rem; + } + + .line-clamp-1 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} diff --git a/docs/deploy.md b/docs/deploy.md index 6348d62..f41869e 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -1,7 +1,7 @@ # 배포 가이드 ## 현재 버전 -- `v0.1.20` +- `v0.1.21` ## Git 기본 설정 - 저장소 작성자 정보는 아래 값으로 통일한다. @@ -53,7 +53,7 @@ npm run build:tailwind - `npm run dev`, `npm run dev:ghost:start`, `npm run dev:ghost:restart` 실행 시 Alpine.js와 Tailwind 빌드가 먼저 수행된다. - Alpine 결과물은 `assets/built/alpine.js`에 생성된다. -- Tailwind 결과물은 `assets/built/tailwind.css`에 생성되고, Ghost 테마에서 `screen.css`보다 먼저 로드된다. +- Tailwind 결과물은 `assets/built/tailwind.css`에 생성되고, Ghost 테마에서 `screen.css` 다음에 로드된다. ## 로컬 빌드 검증 ```bash diff --git a/docs/history.md b/docs/history.md index 1b59365..bf97857 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,8 @@ # 의사결정 이력 +## 2026-04-14 v0.1.21 +카테고리 영역은 기존 JS 아코디언 대신 Alpine.js 문법으로 다시 맞췄다. 원본 테마 코드를 더 직접적으로 참조하는 요구가 생겼고, Tailwind 유틸리티와 Alpine 상태 표현을 함께 쓰는 편이 spacing과 hover 동작을 더 가깝게 재현하기 쉬웠기 때문이다. 또한 Ghost 경고에 맞춰 `limit="all"` 대신 `limit="100"`으로 조정했다. + ## 2026-04-14 v0.1.20 앞으로 원본 테마 섹션 코드를 더 직접적으로 참고할 수 있도록 Alpine.js를 로컬 자산으로 포함하기로 했다. 외부 CDN 의존 대신 테마 빌드 단계에서 `assets/built/alpine.js`를 생성해 함께 배포하고, 기존 `theme.js`는 즉시 제거하지 않고 공존시키면서 점진적으로 Alpine 문법을 허용하는 방향으로 정리했다. diff --git a/docs/map.md b/docs/map.md index 813b899..5368c8c 100644 --- a/docs/map.md +++ b/docs/map.md @@ -1,7 +1,7 @@ # 파일-화면 매핑 가이드 ## 현재 버전 -- `v0.1.20` +- `v0.1.21` ## 공통 레이아웃 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸과 공통 자산 로드 diff --git a/docs/spec.md b/docs/spec.md index 00cfc02..6308a17 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -1,7 +1,7 @@ # 기술 명세 ## 현재 버전 -- `v0.1.20` +- `v0.1.21` ## 테마 개요 - Ghost `v5` 대응 커스텀 테마 @@ -15,9 +15,10 @@ - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드 -- 좌측 카테고리 영역은 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘 +- 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용 - `page-tags.hbs`, `page-authors.hbs`는 각각 `slug=tags`, `slug=authors` 페이지에 연결 가능 +- 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준 ## 주요 스타일 방향 - 밝은 크림톤 배경 + 오렌지 포인트 diff --git a/docs/update.md b/docs/update.md index c4a65d6..b8900fe 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,12 @@ # 업데이트 로그 +## v0.1.21 - 2026-04-14 +- 카테고리 영역 Alpine.js 기반으로 재구성. +- 원본 기준 카테고리 패딩 및 hover 표현 재정리. +- Tailwind 커스텀 유틸리티 추가. +- `page-tags.hbs`, `page-authors.hbs` `limit="100"`으로 수정. +- 업로드 zip 제외 패턴 정리. + ## v0.1.20 - 2026-04-14 - `Tags`, `Authors` 좌측 메뉴 직접 링크형으로 변경. - `page-tags.hbs`, `page-authors.hbs` 추가. diff --git a/package.json b/package.json index 4d30362..d089d02 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ghost-theme-thred-clone", - "version": "0.1.20", + "version": "0.1.21", "private": true, "description": "A Ghost theme inspired by the Thred reference layout.", "keywords": [ diff --git a/page-authors.hbs b/page-authors.hbs index 9237da3..44ebbcd 100644 --- a/page-authors.hbs +++ b/page-authors.hbs @@ -12,7 +12,7 @@ {{/if}} - {{#get "authors" limit="all" include="count.posts"}} + {{#get "authors" limit="100" include="count.posts"}}
{{#foreach authors}} diff --git a/page-tags.hbs b/page-tags.hbs index 0f0f428..93576f2 100644 --- a/page-tags.hbs +++ b/page-tags.hbs @@ -12,7 +12,7 @@ {{/if}} - {{#get "tags" limit="all" include="count.posts" order="count.posts desc"}} + {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
{{#foreach tags}} diff --git a/partials/site/sidebar-left.hbs b/partials/site/sidebar-left.hbs index 50f2851..4cfeaf1 100644 --- a/partials/site/sidebar-left.hbs +++ b/partials/site/sidebar-left.hbs @@ -56,23 +56,22 @@ -
- -
-