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 기본 설정 ## 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 ## 2026-04-14 v0.1.26
포스트 카드 영역은 원본 구조를 닮게 보이도록 CSS로 따로 해석하는 방식보다, 사용자가 준 Tailwind 마크업 흐름을 직접 반영하는 편이 맞다고 다시 정리했다. 그래서 카드 관련 커스텀 구조를 최소화하고, 부족한 유틸리티만 Tailwind 입력 파일에 보강하는 방향으로 수정했다. 포스트 카드 영역은 원본 구조를 닮게 보이도록 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열 셸과 공통 자산 로드 - [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` 대응 커스텀 테마 - Ghost `v5` 대응 커스텀 테마
@@ -24,6 +24,7 @@
- `tags-index.hbs`, `authors-index.hbs``routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능 - `tags-index.hbs`, `authors-index.hbs``routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
- 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성 - 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
- 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용 - 리스트형 `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 ## v0.1.26 - 2026-04-14
- 리스트형 `post-card`를 Tailwind 기준 마크업으로 재구성. - 리스트형 `post-card`를 Tailwind 기준 마크업으로 재구성.
- 썸네일 비율을 `aspect-square sm:aspect-video` 기준으로 수정. - 썸네일 비율을 `aspect-square sm:aspect-video` 기준으로 수정.

4
package-lock.json generated
View File

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

View File

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

View File

@@ -1,6 +1,6 @@
<div class="post-list home-post-list"> <div class="post-list home-post-list">
{{#foreach posts}} {{#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"> <a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16">
{{#if feature_image}} {{#if feature_image}}
<figure class="block rounded-theme overflow-hidden" role="none"> <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> <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}} {{/if}}
</a> </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> <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"> <a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
{{#if featured}} {{#if featured}}