diff --git a/assets/built/screen.css b/assets/built/screen.css index 01ae5c9..3c106a6 100644 --- a/assets/built/screen.css +++ b/assets/built/screen.css @@ -979,21 +979,40 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { } .post-card { - display: grid; - grid-template-columns: 112px minmax(0, 1fr); - gap: 18px; + position: relative; + display: flex; + gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--border); - align-items: start; + align-items: stretch; + overflow: hidden; +} + +.post-card__media { + flex: 1 1 34%; + min-width: 84px; + max-width: 168px; +} + +.post-card__figure { + display: block; + margin: 0; + overflow: hidden; + border-radius: 14px; } .post-card__media img, .post-card__media-fallback { - width: 112px; - height: 112px; + width: 100%; + aspect-ratio: 1 / 1; object-fit: cover; - border-radius: 14px; background: var(--surface-muted); + border-radius: inherit; + transition: opacity 0.22s ease; +} + +.post-card__media:hover img { + opacity: 0.9; } .post-card__media-fallback { @@ -1005,11 +1024,22 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { text-align: center; } +.post-card__content { + position: relative; + flex: 1 1 0%; + min-width: 0; + display: flex; + flex-direction: column; + gap: 6px; + justify-content: space-between; +} + .post-card__content h2 { margin: 0 0 6px; font-size: 15px; line-height: 1.32; letter-spacing: -0.015em; + max-width: calc(100% - 28px); } .post-card__content h2 a { @@ -1018,6 +1048,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { gap: 6px; } +.post-card__content h2 a:hover { + opacity: 0.75; +} + .post-card__featured-icon { width: 14px; height: 14px; @@ -1030,6 +1064,11 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { color: var(--text-soft); font-size: 13px; line-height: 1.45; + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + flex: 1 1 auto; } .post-card__meta { @@ -1062,6 +1101,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { gap: 4px; } +.meta-item:hover { + color: var(--text); +} + .meta-divider { color: var(--border-strong); font-size: 12px; @@ -1074,10 +1117,44 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { color: var(--text-dim); } +.meta-item__icon--image { + width: 14px; + height: 14px; + flex: 0 0 auto; + opacity: 0.8; +} + .meta-item--access { font-weight: 600; } +.post-card__share { + position: absolute; + top: 0; + right: 0; + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + padding: 0; + border: 0; + background: transparent; + cursor: pointer; + opacity: 0.72; + transition: opacity 0.22s ease; +} + +.post-card__share:hover { + opacity: 1; +} + +.post-card__share-icon { + width: 16px; + height: 16px; + display: block; +} + .category-overview { display: grid; } @@ -1712,13 +1789,18 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close { } .post-card { - grid-template-columns: 1fr; + flex-direction: column; } .post-card__media img, .post-card__media-fallback { width: 100%; height: 180px; + aspect-ratio: auto; + } + + .post-card__media { + max-width: none; } .post-navigation { diff --git a/assets/icons/chat_bubble.svg b/assets/icons/chat_bubble.svg new file mode 100644 index 0000000..5e0e4be --- /dev/null +++ b/assets/icons/chat_bubble.svg @@ -0,0 +1 @@ + diff --git a/docs/deploy.md b/docs/deploy.md index 4603717..6633e63 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -1,7 +1,7 @@ # 배포 가이드 ## 현재 버전 -- `v0.1.23` +- `v0.1.25` ## Git 기본 설정 - 저장소 작성자 정보는 아래 값으로 통일한다. diff --git a/docs/history.md b/docs/history.md index db9694b..7cf13b6 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,8 @@ # 의사결정 이력 +## 2026-04-14 v0.1.25 +포스트 리스트 카드는 이전 단계에서 간격과 밀도만 먼저 끌어올렸지만, 사용자가 원하는 기준은 구조 자체가 원본에 더 가까운 형태였다. 그래서 이번에는 `post-items` 템플릿을 기준 삼아 마크업 레벨에서 `media / content / meta / share action` 흐름을 다시 맞추고, 댓글과 우측 액션 아이콘도 지정된 로컬 SVG 자산으로 통일했다. + ## 2026-04-14 v0.1.24 홈 메인 영역은 기존 단순 카드 레이아웃에서 벗어나 원본의 정보 밀도와 간격을 더 직접적으로 따르기로 했다. 다만 좌측 네비게이션과 마찬가지로 즉시 전환보다 현재 선호하는 부드러운 동작과 기존 Ghost 헬퍼 호환성을 유지해야 했기 때문에, 전체 구조를 새로 갈아엎기보다 `hero`, `tabbed-feed`, `post-items` partial 단위로 시각 표현만 단계적으로 끌어올리는 방향을 선택했다. diff --git a/docs/map.md b/docs/map.md index 505c4de..e4bf0a5 100644 --- a/docs/map.md +++ b/docs/map.md @@ -1,7 +1,7 @@ # 파일-화면 매핑 가이드 ## 현재 버전 -- `v0.1.24` +- `v0.1.25` ## 공통 레이아웃 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸과 공통 자산 로드 @@ -18,7 +18,7 @@ - [index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/index.hbs): 기본 목록 진입 - [partials/home/hero.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/hero.hbs): 홈 히어로 영역 - [partials/home/tabbed-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/tabbed-feed.hbs): Latest/Featured/Updated/Categories 탭과 카테고리 개요 행 -- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): 리스트형 포스트 카드, 메타 정보, 멤버 전용 표시 +- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): 리스트형 포스트 카드, 댓글 아이콘, 우측 공유 액션, 메타 정보 ## 상세 및 아카이브 - [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세 diff --git a/docs/spec.md b/docs/spec.md index 3cc36f9..df9fdd4 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -1,7 +1,7 @@ # 기술 명세 ## 현재 버전 -- `v0.1.24` +- `v0.1.25` ## 테마 개요 - Ghost `v5` 대응 커스텀 테마 @@ -23,6 +23,7 @@ - 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준 - `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능 - 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성 +- 리스트형 `post-card`는 썸네일, 본문 메타, 댓글 아이콘, 우측 액션 아이콘을 원본 카드 구조에 가깝게 재구성 ## 주요 스타일 방향 - 밝은 크림톤 배경 + 오렌지 포인트 diff --git a/docs/update.md b/docs/update.md index 9573225..fc74550 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,11 @@ # 업데이트 로그 +## v0.1.25 - 2026-04-14 +- 리스트형 `post-card` 마크업을 원본 구조 기준으로 재정리. +- 댓글 아이콘을 `chat_bubble.svg`로 교체. +- 우측 액션 아이콘을 `arrow_outward.svg`로 교체. +- 포스트 카드 썸네일/메타/공유 버튼 스타일 수정. + ## v0.1.24 - 2026-04-14 - 좌측 네비게이션 마커 hover 형태를 카테고리 마커와 동일하게 수정. - 홈 히어로 문구 강조 및 구독 폼 레이아웃 재정리. diff --git a/package.json b/package.json index 5bf7a77..a7c8db9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ghost-theme-thred-clone", - "version": "0.1.24", + "version": "0.1.25", "private": true, "description": "A Ghost theme inspired by the Thred reference layout.", "keywords": [ diff --git a/partials/lists/post-items.hbs b/partials/lists/post-items.hbs index a5f27ae..5c001a1 100644 --- a/partials/lists/post-items.hbs +++ b/partials/lists/post-items.hbs @@ -3,7 +3,9 @@
{{#if feature_image}} - {{title}} +
+ {{title}} +
{{else}} {{title}} {{/if}} @@ -22,7 +24,7 @@ {{#primary_author}} / - {{name}} + {{name}} {{/primary_author}} {{#primary_tag}} / @@ -33,11 +35,14 @@ Members {{/unless}} / - - ◌ + + {{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}} - + +
{{/foreach}}