v0.1.26 포스트 카드 테일윈드 정리

assets/styles/tailwind.css

@@ -34,6 +34,32 @@
         gap: 0.1875rem;
     }
 
+    .flex-2 {
+        flex: 2 1 0%;
+    }
+
+    .flex-3 {
+        flex: 3 1 0%;
+    }
+
+    .flex-4 {
+        flex: 4 1 0%;
+    }
+
+    .size-3\.5 {
+        width: 0.875rem;
+        height: 0.875rem;
+    }
+
+    .size-4 {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .min-w-16 {
+        min-width: 4rem;
+    }
+
     .line-clamp-1 {
         overflow: hidden;
         text-overflow: ellipsis;

docs/deploy.md

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

docs/history.md

@@ -1,5 +1,8 @@
 # 의사결정 이력
 
+## 2026-04-14 v0.1.26
+포스트 카드 영역은 원본 구조를 닮게 보이도록 CSS로 따로 해석하는 방식보다, 사용자가 준 Tailwind 마크업 흐름을 직접 반영하는 편이 맞다고 다시 정리했다. 그래서 카드 관련 커스텀 구조를 최소화하고, 부족한 유틸리티만 Tailwind 입력 파일에 보강하는 방향으로 수정했다.
+
 ## 2026-04-14 v0.1.25
 포스트 리스트 카드는 이전 단계에서 간격과 밀도만 먼저 끌어올렸지만, 사용자가 원하는 기준은 구조 자체가 원본에 더 가까운 형태였다. 그래서 이번에는 `post-items` 템플릿을 기준 삼아 마크업 레벨에서 `media / content / meta / share action` 흐름을 다시 맞추고, 댓글과 우측 액션 아이콘도 지정된 로컬 SVG 자산으로 통일했다.
 

docs/map.md

@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드
 
 ## 현재 버전
-- `v0.1.25`
+- `v0.1.26`
 
 ## 공통 레이아웃
 - [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): Tailwind 기반 리스트형 포스트 카드, 댓글 아이콘, 우측 공유 액션, 메타 정보
 
 ## 상세 및 아카이브
 - [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.1.25`
+- `v0.1.26`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -23,7 +23,7 @@
 - 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준
 - `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
 - 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
-- 리스트형 `post-card`는 썸네일, 본문 메타, 댓글 아이콘, 우측 액션 아이콘을 원본 카드 구조에 가깝게 재구성
+- 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용
 
 ## 주요 스타일 방향
 - 밝은 크림톤 배경 + 오렌지 포인트

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 로그
 
+## v0.1.26 - 2026-04-14
+- 리스트형 `post-card`를 Tailwind 기준 마크업으로 재구성.
+- 썸네일 비율을 `aspect-square sm:aspect-video` 기준으로 수정.
+- 댓글/우측 액션 아이콘을 Tailwind 마크업 기준으로 재정리.
+- `assets/styles/tailwind.css`에 카드용 보조 유틸리티 추가.
+
 ## v0.1.25 - 2026-04-14
 - 리스트형 `post-card` 마크업을 원본 구조 기준으로 재정리.
 - 댓글 아이콘을 `chat_bubble.svg`로 교체.

package.json

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

partials/lists/post-items.hbs

@@ -1,47 +1,55 @@
 <div class="post-list home-post-list">
     {{#foreach posts}}
-        <article class="post-card{{#if featured}} is-featured{{/if}}">
-            <a class="post-card__media" href="{{url}}">
+        <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}}>
+            <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="post-card__figure" role="none">
-                        <img src="{{img_url feature_image size="s"}}" alt="{{title}}">
+                    <figure class="block rounded-theme overflow-hidden" role="none">
+                        <img class="w-full aspect-square sm:aspect-video object-cover rounded-[inherit] hover:opacity-90 transition-all blur-0" src="{{img_url feature_image size="s"}}" alt="{{title}}">
                     </figure>
                 {{else}}
-                    <span class="post-card__media-fallback">{{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}}
             </a>
-            <div class="post-card__content">
-                <h2 class="post-card__title">
-                    <a href="{{url}}">
+            <div class="relative 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}}
-                            <img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
+                            <span data-post-featured class="inline-flex text-brand -mr-0.5 shrink-0">
+                                <img class="size-4 -mt-0.5" src="{{asset "icons/bolt.svg"}}" alt="">
+                            </span>
                         {{/if}}
                         <span>{{title}}</span>
                     </a>
                 </h2>
-                {{#if excerpt}}<p class="post-card__excerpt">{{excerpt words="24"}}</p>{{/if}}
-                <div class="post-card__meta">
-                    <time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
+                {{#if excerpt}}
+                    <p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1" data-post-card-excerpt>{{excerpt words="24"}}</p>
+                {{/if}}
+                <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone" data-post-card-info>
+                    <time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
                     {{#primary_author}}
-                        <span class="meta-divider">/</span>
-                        <a class="meta-item" href="{{url}}">{{name}}</a>
+                        <span class="opacity-70">/</span>
+                        <a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
                     {{/primary_author}}
                     {{#primary_tag}}
-                        <span class="meta-divider">/</span>
-                        <a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
+                        <span class="opacity-70">/</span>
+                        <ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
+                            <li{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
+                                <a href="{{url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{name}}</a>
+                            </li>
+                        </ul>
                     {{/primary_tag}}
                     {{#unless access}}
-                        <span class="meta-divider">/</span>
-                        <span class="meta-item meta-item--access">Members</span>
+                        <span class="opacity-70">/</span>
+                        <span class="font-medium">Members</span>
                     {{/unless}}
-                    <span class="meta-divider">/</span>
-                    <a class="meta-item meta-item--comments" href="{{url}}#ghost-comments">
-                        <img class="meta-item__icon meta-item__icon--image" src="{{asset "icons/chat_bubble.svg"}}" alt="">
+                    <span class="opacity-70">/</span>
+                    <a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="{{url}}#ghost-comments">
+                        <img class="size-3.5 -mt-px pointer-events-none" src="{{asset "icons/chat_bubble.svg"}}" alt="">
                         {{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}
                     </a>
                 </div>
-                <button class="post-card__share" type="button" aria-label="Share this post">
-                    <img class="post-card__share-icon" src="{{asset "icons/arrow_outward.svg"}}" alt="">
+                <button data-post-share-toggle class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">
+                    <img class="size-4 pointer-events-none" src="{{asset "icons/arrow_outward.svg"}}" alt="">
                 </button>
             </div>
         </article>