v0.1.27 포스트 카드 경계선 보정

This commit is contained in:
2026-04-14 11:33:04 +09:00
parent 36245ae37e
commit 669f20f14a
8 changed files with 17 additions and 8 deletions

View File

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

View File

@@ -1,5 +1,8 @@
# 의사결정 이력
## 2026-04-14 v0.1.27
포스트 카드의 큰 구조를 Tailwind 기준으로 되돌린 뒤에도, 실제 사용 화면에서는 구분선과 콘텐츠 폭 제약처럼 아주 기본적인 레이아웃 안정화가 먼저 필요했다. 그래서 이번 단계에서는 새 해석을 추가하지 않고, 사용자가 준 구조를 유지한 채 `border-b`, `min-w-0`, `items-start`처럼 레이아웃 안정성에 직접 연결되는 속성만 최소 보정했다.
## 2026-04-14 v0.1.26
포스트 카드 영역은 원본 구조를 닮게 보이도록 CSS로 따로 해석하는 방식보다, 사용자가 준 Tailwind 마크업 흐름을 직접 반영하는 편이 맞다고 다시 정리했다. 그래서 카드 관련 커스텀 구조를 최소화하고, 부족한 유틸리티만 Tailwind 입력 파일에 보강하는 방향으로 수정했다.

View File

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

View File

@@ -1,7 +1,7 @@
# 기술 명세
## 현재 버전
- `v0.1.26`
- `v0.1.27`
## 테마 개요
- Ghost `v5` 대응 커스텀 테마
@@ -24,6 +24,7 @@
- `tags-index.hbs`, `authors-index.hbs``routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
- 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
- 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용
- 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
## 주요 스타일 방향
- 밝은 크림톤 배경 + 오렌지 포인트

View File

@@ -1,5 +1,10 @@
# 업데이트 로그
## v0.1.27 - 2026-04-14
- 리스트형 `post-card` 항목 구분선 복구.
- 카드 콘텐츠 영역 `min-w-0` 적용으로 제목/본문 줄바꿈 폭 보정.
- 카드 정렬을 `items-start` 기준으로 재정리.
## v0.1.26 - 2026-04-14
- 리스트형 `post-card`를 Tailwind 기준 마크업으로 재구성.
- 썸네일 비율을 `aspect-square sm:aspect-video` 기준으로 수정.

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "ghost-theme-thred-clone",
"version": "0.1.26",
"version": "0.1.27",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ghost-theme-thred-clone",
"version": "0.1.26",
"version": "0.1.27",
"devDependencies": {
"alpinejs": "^3.14.9",
"tailwindcss": "^3.4.17"

View File

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

View File

@@ -1,6 +1,6 @@
<div class="post-list home-post-list">
{{#foreach posts}}
<article class="post {{post_class}} relative flex flex-row gap-3 text-typ py-4 group overflow-hidden" data-post-card{{#if featured}} data-featured{{/if}}>
<article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden border-b border-brd" data-post-card{{#if featured}} data-featured{{/if}}>
<a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16">
{{#if feature_image}}
<figure class="block rounded-theme overflow-hidden" role="none">
@@ -10,7 +10,7 @@
<span class="block w-full aspect-square sm:aspect-video rounded-theme bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
{{/if}}
</a>
<div class="relative flex-[3] md:flex-[4] flex flex-col gap-1.5 justify-between" data-post-card-content>
<div class="relative min-w-0 flex-[3] md:flex-[4] flex flex-col gap-1.5 justify-between" data-post-card-content>
<h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
<a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
{{#if featured}}