홈: Categories 좌측 액센트를 border-left로 변경 (v0.2.6)

Made-with: Cursor
This commit is contained in:
2026-04-17 10:24:16 +09:00
parent 64944d97c3
commit 2a72bb29f9
9 changed files with 21 additions and 7 deletions

File diff suppressed because one or more lines are too long

View File

@@ -329,4 +329,9 @@
text-overflow: ellipsis;
white-space: nowrap;
}
/* 홈 Categories 행: 태그 --color-accent 왼쪽 세로 막대(border, ::before 미사용) */
.home-categories__row {
border-left: 3px solid var(--color-accent);
}
}

View File

@@ -1,7 +1,7 @@
# 배포 가이드
## 현재 버전
- `v0.2.5`
- `v0.2.6`
## Git 기본 설정
- 저장소 작성자 정보는 아래 값으로 통일한다.

View File

@@ -1,5 +1,8 @@
# 의사결정 이력
## 2026-04-17 v0.2.6
Thred 참고 마크업은 `before:` 가상 요소로 세로 막대를 그리지만, Tailwind 조합만 쓰면 `content`가 비어 있어 `::before` 박스가 생성되지 않아 배경색이 보이지 않는 경우가 있다. 동일한 시각은 `border-left: solid var(--color-accent)`로 더 단순하고 태그 디렉터리 카드와도 맞추기 쉬워서, 홈 Categories 행은 `.home-categories__row` 컴포넌트 규칙으로 왼쪽 테두리만 사용하도록 바꿨다.
## 2026-04-17 v0.2.5
홈 Categories 행에서 `flex`+`basis-full` 제목 배치 때문에 좌·우 열 폭이 태그마다 달라 보였고, 설명이 없을 때 게시물 수로 채우면 원본 Thred와 다른 정보가 들어갔다. 그래서 데스크톱 기준 2:3 그리드로 좌측(제목·선택 설명·View all)과 우측(글 5개) 폭을 고정했고, 설명 미입력 시에는 문구를 생략했다. 좌측 세로 바는 Ghost 태그 `accent_color``--color-accent`에 넣어 `before:bg-accent`로 표시하며, 미설정 태그는 동일 두께의 중립색 막대로 통일했다.

View File

@@ -1,7 +1,7 @@
# 파일-화면 매핑 가이드
## 현재 버전
- `v0.2.5`
- `v0.2.6`
## 공통 레이아웃
- [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드

View File

@@ -1,7 +1,7 @@
# 기술 명세
## 현재 버전
- `v0.2.5`
- `v0.2.6`
## 테마 개요
- Ghost `v5` 대응 커스텀 테마
@@ -29,7 +29,7 @@
- `tags-index.hbs`는 Ghost `routes.yaml` 커스텀 라우트로 `/tags/`에 연결됨
- 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함
- 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함
- 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 최대 5개를 번호 링크로만 표시함. 세로 액센트는 태그 `accent_color``--color-accent`로 반영하고(미설정 시 중립색), 설명이 없으면 빈 칸으로 두며, 좌·우 열은 `minmax(0,2fr)`/`minmax(0,3fr)` 그리드로 고정한다
- 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 최대 5개를 번호 링크로만 표시함. 세로 액센트는 태그 `accent_color``--color-accent`에 넣고 `assets/styles/tailwind.css``.home-categories__row`에서 `border-left: 3px solid var(--color-accent)`로 표시한다(미설정 시 중립색). 설명이 없으면 빈 칸으로 두며, 좌·우 열은 `minmax(0,2fr)`/`minmax(0,3fr)` 그리드로 고정한다
- 태그·작성자 아카이브(`tag.hbs`, `author.hbs`)는 홈과 동일한 `post-feed`를 쓰지 않고, `post-feed-archive`로 글 목록과 페이지네이션만 노출함
- 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함
- 포스트 상세 우측 `Read next``primary_tag` 기준 관련 글을 우선 노출하고, 관련 글이 없으면 최신 글(현재 글 제외)로 대체함

View File

@@ -1,5 +1,11 @@
# 업데이트 로그
## v0.2.6 - 2026-04-17
- `package.json` 버전을 `0.2.6`으로 증가.
- 홈 Categories 좌측 색 막대: `::before`+`before:bg-accent` 제거, `tailwind.css``.home-categories__row``border-left: 3px solid var(--color-accent)` 적용(가상 요소 `content` 누락으로 색이 안 보이던 문제 해소).
- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.6`으로 동기화.
- `docs/history.md`에 Categories 액센트 표현 변경(`v0.2.6`) 기록.
## v0.2.5 - 2026-04-17
- `package.json` 버전을 `0.2.5`로 증가.
- `partials/lists/home-categories.hbs` 수정: 좌측 액센트 바는 태그 `accent_color`(없으면 중립 회색)로 `--color-accent` 고정, 설명 없을 때는 문구 없음, 2열 그리드(2fr/3fr)로 좌우 간격 통일, 태그별 글은 `get posts` `limit="5"` 유지.

View File

@@ -1,6 +1,6 @@
{
"name": "ghost-theme-thred-clone",
"version": "0.2.5",
"version": "0.2.6",
"private": true,
"description": "A Ghost theme inspired by the Thred reference layout.",
"keywords": [

View File

@@ -15,7 +15,7 @@
{{#foreach tags}}
{{#if count.posts}}
<li
class="home-categories__row relative grid grid-cols-1 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-6 gap-y-3 md:gap-y-2 md:items-start border-b border-b-brd p-4 sm:p-5 pl-5 sm:pl-6 before:absolute before:left-0 before:top-0 before:h-full before:w-0.75 before:bg-accent"
class="home-categories__row grid grid-cols-1 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-6 gap-y-3 md:gap-y-2 md:items-start border-b border-b-brd p-4 sm:p-5 pl-4 sm:pl-5"
data-category-priority-item
data-category-slug="{{slug}}"
style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}#94a3b8{{/if}};"