theme: 태그 카드 보더 및 호버 색상 정렬
태그 카드의 좌측 보더와 호버 배경이 각 태그의 accent_color를 항상 기준으로 표현되도록 수정했다. 원본 Thred 태그 목록과 동일한 시각 동작을 맞추기 위해 관련 작업 이력을 문서에 반영했다. Made-with: Cursor
This commit is contained in:
@@ -1,5 +1,41 @@
|
||||
# 업데이트 로그
|
||||
|
||||
## v0.1.39 - 2026-04-16
|
||||
- `tags-index.hbs` 태그 카드 목록 마크업을 원본(Thred) 구조 기준으로 변환 수정.
|
||||
- `tags-index.hbs` 태그 카드 좌측 보더/호버 배경이 각 태그 `accent_color`를 항상 사용하도록 수정.
|
||||
|
||||
## v0.1.38 - 2026-04-14
|
||||
- `npm run zip:version` 압축 스크립트 추가.
|
||||
- 현재 버전 기준 업로드용 zip 생성 흐름 정리.
|
||||
|
||||
## v0.1.37 - 2026-04-14
|
||||
- 목록 페이지네이션을 링크 이동형에서 `Load More` 확장형으로 변경.
|
||||
- 다음 페이지 HTML에서 목록만 파싱해 이어 붙이는 클라이언트 로직 추가.
|
||||
- 다음 페이지가 없을 때 하단 버튼이 노출되지 않도록 수정.
|
||||
|
||||
## v0.1.36 - 2026-04-14
|
||||
- 로컬 Ghost `routes.yaml`에 `/tags/`, `/authors/` 커스텀 라우트 추가.
|
||||
- 좌측 네비게이션 `Tags`, `Authors` 링크가 각각 `tags-index.hbs`, `authors-index.hbs`를 타도록 로컬 환경 정리.
|
||||
- `tag.hbs`는 개별 태그 아카이브, `/tags/`는 태그 목록 인덱스 역할로 구분 정리.
|
||||
|
||||
## v0.1.35 - 2026-04-14
|
||||
- `author.hbs` 작성자 아바타 크기와 fallback 표시 수정.
|
||||
- `tag.hbs`의 불필요한 `{{#tag}}` 블록 제거.
|
||||
- 태그 아카이브 페이지 `pagination` 컨텍스트 오류 수정.
|
||||
|
||||
## v0.1.34 - 2026-04-14
|
||||
- 우측 사이드바 마크업을 훅 클래스 유지형 Tailwind 구조로 다시 정리.
|
||||
- 작성자 소개, 사이트 소개, 추천 목록, 구독 폼, 푸터 영역에 Tailwind 보조 클래스 재적용.
|
||||
|
||||
## v0.1.33 - 2026-04-14
|
||||
- 좌측 사이드바 데스크톱 닫힘 상태를 `display:none` 대신 폭/투명도 전환으로 수정.
|
||||
- 좌측 사이드바 열기·닫기 애니메이션 복구.
|
||||
|
||||
## v0.1.32 - 2026-04-14
|
||||
- 공통 셸 레이아웃 훅 클래스를 유지한 채 Tailwind 보조 클래스 재적용.
|
||||
- 헤더 `1296px` 셸 정렬과 중앙 검색바 배치 복구 방향 정리.
|
||||
- 좌우 사이드바 폭 계산과 토글 동작을 깨지 않는 하이브리드 마크업으로 수정.
|
||||
|
||||
## v0.1.31 - 2026-04-14
|
||||
- `npm run dev:watch` 스크립트 추가.
|
||||
- 로컬 파일 변경 감지 후 자동 `dev:sync` 반영 흐름 추가.
|
||||
|
||||
@@ -1,30 +1,40 @@
|
||||
{{!< default}}
|
||||
|
||||
<main class="content-area">
|
||||
<section class="stack-section">
|
||||
<header class="section-header text-center">
|
||||
<h1 class="section-title">Tags</h1>
|
||||
<p class="section-description">Browse by topic</p>
|
||||
</header>
|
||||
<section class="px-5 sm:px-6" data-page-hero="">
|
||||
<div class="max-w-site py-6 md:py-8 mx-auto flex flex-col gap-6 text-center">
|
||||
<div class="flex-1 max-w-xl flex flex-col gap-2 justify-center mx-auto items-center">
|
||||
<h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-balance leading-[1.125]">Tags</h1>
|
||||
<p class="text-base text-balance text-typ-tone max-w-md leading-snug [&_a]:underline [&_a]:decoration-2 [&_a]:underline-offset-2 [&_a:hover]:text-brand">Browse by topic</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
|
||||
<div class="tag-directory grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{{#foreach tags}}
|
||||
<a class="tag-directory__card group relative flex min-h-[128px] flex-col rounded-[14px] border border-[var(--border)] bg-[var(--surface)] p-4 text-left transition-colors hover:bg-[var(--surface-muted)]" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
|
||||
<span class="tag-directory__accent absolute inset-y-0 left-0 w-[3px] rounded-l-[14px] bg-[var(--tag-accent,var(--accent))]"></span>
|
||||
<span class="flex items-start justify-between gap-3">
|
||||
<strong class="text-[15px] font-semibold tracking-[-0.02em]">{{name}}</strong>
|
||||
<img class="h-4 w-4 shrink-0 opacity-70 transition-opacity group-hover:opacity-100" src="{{asset "icons/arrow_outward.svg"}}" alt="">
|
||||
</span>
|
||||
{{#if description}}
|
||||
<p class="mt-2 line-clamp-3 text-[13px] leading-5 text-[var(--text-soft)]">{{description}}</p>
|
||||
{{else}}
|
||||
<p class="mt-2 line-clamp-3 text-[13px] leading-5 text-[var(--text-soft)]">Posts filed under {{name}}.</p>
|
||||
{{/if}}
|
||||
<span class="mt-auto pt-3 text-[13px] font-medium text-[var(--text-soft)]">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
|
||||
</a>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/get}}
|
||||
<section class="px-5 sm:px-6 mb-8" data-tags="">
|
||||
{{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
|
||||
<ul class="tag-directory max-w-site mx-auto gap-4 sm:gap-5 grid sm:grid-cols-2 lg:grid-cols-3">
|
||||
{{#foreach tags}}
|
||||
<li class="tag-directory__item h-full" data-tag-card="{{slug}}">
|
||||
<a class="tag-directory__card relative h-full flex flex-col gap-2 p-4 border border-brd rounded-theme border-l-[3px] border-l-[var(--color-accent)] rounded-l-none hover:bg-[color-mix(in_srgb,var(--color-accent)_5%,transparent)] hover:border-[color-mix(in_srgb,var(--color-accent)_25%,var(--border))] hover:border-l-[var(--color-accent)]" href="{{url}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{else}} style="--color-accent: var(--accent);"{{/if}}>
|
||||
<h2 class="text-sm font-medium leading-tight flex items-center justify-between gap-1">{{name}}</h2>
|
||||
<i class="icon icon-arrow-up-right size-4 stroke-2 absolute top-4 right-4" role="presentation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M17 7l-10 10"></path>
|
||||
<path d="M8 7l9 0l0 9"></path>
|
||||
</svg>
|
||||
</i>
|
||||
{{#if description}}
|
||||
<p class="flex-1 text-[0.8rem] text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">{{description}}</p>
|
||||
{{else}}
|
||||
<p class="flex-1 text-[0.8rem] text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">Posts filed under {{name}}.</p>
|
||||
{{/if}}
|
||||
<span class="text-[0.8rem] text-typ-tone leading-tight font-medium">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
{{/get}}
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user