v0.1.24 메인 피드 스타일 정리

assets/built/screen.css

@@ -296,10 +296,7 @@ body.left-sidebar-collapsed .sidebar--left {
 .menu-link__marker {
     position: relative;
     flex: 0 0 auto;
-    width: 6px;
+    background: color-mix(in srgb, var(--border) 88%, #ffffff 12%);
-    height: 18px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--border) 92%, #ffffff 8%);
     transform-origin: center;
     transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
 }
@@ -319,8 +316,8 @@ body.left-sidebar-collapsed .sidebar--left {
 .menu-group__trigger:hover .menu-link__marker,
 .menu-group__trigger[aria-expanded="true"] .menu-link__marker,
 .menu-group__link:hover .menu-link__marker {
-    width: 10px;
+    width: 8px;
-    height: 10px;
+    height: 8px;
     border-radius: 999px;
     background: #cfc7be;
     transform: translateX(1px);
@@ -776,21 +773,30 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 }
 
 .hero {
-    display: grid;
+    padding: 28px 0 18px;
-    justify-items: center;
-    gap: 16px;
-    padding: 42px 20px 28px;
     text-align: center;
     border-bottom: 1px solid var(--border);
 }
 
+.home-hero__inner {
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.home-hero__content {
+    display: grid;
+    justify-items: center;
+    gap: 14px;
+    padding: 20px 18px 10px;
+}
+
 .hero__title {
-    max-width: 680px;
+    max-width: 760px;
     margin: 0;
-    font-size: clamp(2rem, 3vw, 3.1rem);
+    font-size: clamp(1.85rem, 2.4vw, 2.55rem);
-    line-height: 1.08;
+    line-height: 1.12;
-    letter-spacing: -0.04em;
+    letter-spacing: -0.035em;
-    font-weight: 800;
+    font-weight: 760;
 }
 
 .hero__title em {
@@ -800,11 +806,11 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
 .hero__description,
 .section-description {
-    max-width: 620px;
+    max-width: 520px;
     margin: 0;
     color: var(--text-soft);
     font-size: 15px;
-    line-height: 1.62;
+    line-height: 1.55;
 }
 
 .subscribe-form,
@@ -831,10 +837,26 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
 .subscribe-form--hero {
     justify-content: center;
+    width: min(100%, 420px);
+}
+
+.subscribe-form--hero .gh-subscribe-form {
+    justify-content: center;
+}
+
+.subscribe-form--hero .gh-subscribe-input {
+    min-height: 44px;
+    border-radius: 12px;
+    background: var(--surface);
+}
+
+.subscribe-form--hero button {
+    min-height: 44px;
+    border-radius: 12px;
 }
 
 .stack-section {
-    padding: 18px 0;
+    padding: 18px 0 0;
 }
 
 .section-header {
@@ -864,30 +886,36 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     align-items: flex-end;
     justify-content: space-between;
     gap: 14px;
-    padding-bottom: 14px;
+    padding-bottom: 10px;
     border-bottom: 1px solid var(--border);
 }
 
 .tab-row {
     display: flex;
     flex-wrap: wrap;
-    gap: 22px;
+    gap: 6px;
 }
 
 .tab-row__button {
-    padding: 10px 0;
+    padding: 9px 14px;
     border: 0;
-    border-bottom: 2px solid transparent;
+    border-radius: 14px;
-    background: none;
+    background: transparent;
     color: var(--text-soft);
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
+    transition: background-color 0.22s ease, color 0.22s ease;
+}
+
+.tab-row__button:hover {
+    background: var(--surface-muted);
+    color: var(--text);
 }
 
 .tab-row__button.is-active {
     color: var(--text);
-    border-color: var(--accent);
+    background: var(--surface-muted);
 }
 
 .view-toggle {
@@ -952,18 +980,19 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
 .post-card {
     display: grid;
-    grid-template-columns: 96px minmax(0, 1fr);
+    grid-template-columns: 112px minmax(0, 1fr);
-    gap: 16px;
+    gap: 18px;
-    padding: 16px 0;
+    padding: 18px 0;
     border-bottom: 1px solid var(--border);
+    align-items: start;
 }
 
 .post-card__media img,
 .post-card__media-fallback {
-    width: 96px;
+    width: 112px;
-    height: 72px;
+    height: 112px;
     object-fit: cover;
-    border-radius: 10px;
+    border-radius: 14px;
     background: var(--surface-muted);
 }
 
@@ -979,8 +1008,8 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 .post-card__content h2 {
     margin: 0 0 6px;
     font-size: 15px;
-    line-height: 1.28;
+    line-height: 1.32;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.015em;
 }
 
 .post-card__content h2 a {
@@ -999,7 +1028,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 .post-card__content p {
     margin: 0 0 8px;
     color: var(--text-soft);
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1.45;
 }
 
@@ -1015,8 +1044,8 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 .meta-pill {
     display: inline-flex;
     align-items: center;
-    padding: 3px 8px;
+    padding: 2px 8px;
-    border-radius: 999px;
+    border-radius: 6px;
     background: color-mix(in srgb, var(--tag-accent, var(--surface-muted)) 12%, var(--surface));
     color: var(--text);
     font-size: 11px;
@@ -1045,16 +1074,33 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     color: var(--text-dim);
 }
 
+.meta-item--access {
+    font-weight: 600;
+}
+
 .category-overview {
     display: grid;
 }
 
 .category-overview__row {
     display: grid;
-    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
     gap: 24px;
     padding: 20px 0;
     border-bottom: 1px solid var(--border);
+    position: relative;
+    padding-left: 16px;
+}
+
+.category-overview__row::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 20px;
+    bottom: 20px;
+    width: 3px;
+    border-radius: 999px;
+    background: var(--tag-accent, var(--accent));
 }
 
 .category-overview__row h2 {
@@ -1069,9 +1115,36 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
 .category-overview__row ol {
     margin: 0;
-    padding-left: 18px;
+    padding-left: 0;
     display: grid;
-    gap: 10px;
+    gap: 12px;
+}
+
+.category-overview__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-soft);
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.category-overview__posts a {
+    display: block;
+    font-size: 14px;
+    line-height: 1.45;
+    color: var(--text-soft);
+}
+
+.category-overview__posts a::before {
+    content: attr(data-number);
+    color: var(--text);
+    font-weight: 700;
+}
+
+.category-overview__posts a:hover,
+.category-overview__link:hover {
+    color: var(--text);
 }
 
 .site-icon,
@@ -1590,6 +1663,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
     .tab-row-wrap {
         align-items: center;
+        flex-wrap: wrap;
     }
 }
 
@@ -1673,6 +1747,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
         gap: 10px;
     }
 
+    .tab-row {
+        width: 100%;
+    }
+
     .view-toggle {
         padding: 8px;
     }

docs/history.md

@@ -1,5 +1,8 @@
 # 의사결정 이력
 
+## 2026-04-14 v0.1.24
+홈 메인 영역은 기존 단순 카드 레이아웃에서 벗어나 원본의 정보 밀도와 간격을 더 직접적으로 따르기로 했다. 다만 좌측 네비게이션과 마찬가지로 즉시 전환보다 현재 선호하는 부드러운 동작과 기존 Ghost 헬퍼 호환성을 유지해야 했기 때문에, 전체 구조를 새로 갈아엎기보다 `hero`, `tabbed-feed`, `post-items` partial 단위로 시각 표현만 단계적으로 끌어올리는 방향을 선택했다.
+
 ## 2026-04-14 v0.1.23
 좌측 네비게이션은 원본의 Tailwind/Alpine 구조를 더 직접적으로 따르되, 기존 구현에서 선호한 열고 닫히는 애니메이션은 유지하기로 했다. 또한 `/tags/`, `/authors/`는 Ghost 기본 라우트가 아니므로, 페이지 슬러그 방식뿐 아니라 `routes.yaml` 커스텀 라우트 방식도 함께 지원할 수 있도록 별도 인덱스 템플릿과 예시 라우트 파일을 추가했다.
 

docs/map.md

@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드
 
 ## 현재 버전
-- `v0.1.23`
+- `v0.1.24`
 
 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸과 공통 자산 로드
@@ -17,8 +17,8 @@
 - [home.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/home.hbs): 메인 홈
 - [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/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): 리스트형 포스트 카드, 메타 정보, 멤버 전용 표시
 
 ## 상세 및 아카이브
 - [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.1.23`
+- `v0.1.24`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -16,11 +16,13 @@
 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
 - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
+- 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용
 - 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용
 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
 - `page-tags.hbs`, `page-authors.hbs`는 각각 `slug=tags`, `slug=authors` 페이지에 연결 가능
 - 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준
 - `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
+- 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
 
 ## 주요 스타일 방향
 - 밝은 크림톤 배경 + 오렌지 포인트

docs/update.md

@@ -1,5 +1,12 @@
 # 업데이트 로그
 
+## v0.1.24 - 2026-04-14
+- 좌측 네비게이션 마커 hover 형태를 카테고리 마커와 동일하게 수정.
+- 홈 히어로 문구 강조 및 구독 폼 레이아웃 재정리.
+- 홈 피드 탭 버튼 스타일을 원본 기준으로 재정리.
+- 리스트형 포스트 카드 썸네일 비율, 메타 배지, 간격 수정.
+- 카테고리 탭 목록 행 스타일 및 순번 링크 표현 수정.
+
 ## v0.1.23 - 2026-04-14
 - 좌측 네비게이션 Tailwind/Alpine 구조로 재정리.
 - 네비게이션 아코디언 슬라이드 애니메이션 유지.

package.json

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

partials/home/hero.hbs

@@ -1,11 +1,15 @@
-<section class="hero">
+<section class="hero home-hero" data-home-hero>
-    <h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community</h1>
+    <div class="home-hero__inner">
-    {{#if @site.description}}
+        <div class="home-hero__content">
-        <p class="hero__description">{{@site.description}}</p>
+            <h1 class="hero__title">Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community</h1>
-    {{/if}}
+            {{#if @site.description}}
-    {{subscribe_form
+                <p class="hero__description">{{@site.description}}</p>
-        placeholder="Your email"
+            {{/if}}
-        button_class="button button--light"
+            {{subscribe_form
-        form_class="subscribe-form subscribe-form--hero"
+                placeholder="Your email"
-    }}
+                button_class="button button--light button--subscribe"
+                form_class="subscribe-form subscribe-form--hero"
+            }}
+        </div>
+    </div>
 </section>

partials/home/tabbed-feed.hbs

@@ -1,12 +1,12 @@
-<section class="stack-section" data-tabs>
+<section class="stack-section home-feed" data-tabs data-home-content>
-    <div class="tab-row-wrap">
+    <div class="tab-row-wrap home-feed__toolbar">
-        <div class="tab-row" role="tablist" aria-label="Homepage sections">
+        <div class="tab-row home-feed__tabs" role="tablist" aria-label="Homepage sections">
             <button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
             <button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
             <button class="tab-row__button" type="button" data-tab-trigger="updated">Updated</button>
             <button class="tab-row__button" type="button" data-tab-trigger="categories">Categories</button>
         </div>
-        <button class="view-toggle" type="button" aria-label="Change view">
+        <button class="view-toggle home-feed__view-toggle" type="button" aria-label="Change view">
             <span class="view-toggle__grid"></span>
             <span class="view-toggle__chevron">⌄</span>
         </button>
@@ -30,22 +30,22 @@
 
     <div class="tab-panel" data-tab-panel="categories">
         <div class="category-overview">
-            {{#get "tags" limit="4" include="count.posts"}}
+            {{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
                 {{#foreach tags}}
-                    <section class="category-overview__row">
+                    <section class="category-overview__row"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
-                        <div>
+                        <div class="category-overview__intro">
                             <h2>{{name}}</h2>
                             {{#if description}}
                                 <p>{{description}}</p>
                             {{else}}
                                 <p>{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
                             {{/if}}
-                            <a href="{{url}}">View all ↗</a>
+                            <a class="category-overview__link" href="{{url}}">View all ↗</a>
                         </div>
-                        <ol>
+                        <ol class="category-overview__posts">
                             {{#get "posts" filter=(concat "tag:" slug) limit="5"}}
                                 {{#foreach posts}}
-                                    <li><a href="{{url}}">{{title}}</a></li>
+                                    <li><a href="{{url}}" data-number="{{@number}}. ">{{title}}</a></li>
                                 {{/foreach}}
                             {{/get}}
                         </ol>

partials/lists/post-items.hbs

@@ -1,6 +1,6 @@
-<div class="post-list">
+<div class="post-list home-post-list">
     {{#foreach posts}}
-        <article class="post-card">
+        <article class="post-card{{#if featured}} is-featured{{/if}}">
             <a class="post-card__media" href="{{url}}">
                 {{#if feature_image}}
                     <img src="{{img_url feature_image size="s"}}" alt="{{title}}">
@@ -9,7 +9,7 @@
                 {{/if}}
             </a>
             <div class="post-card__content">
-                <h2>
+                <h2 class="post-card__title">
                     <a href="{{url}}">
                         {{#if featured}}
                             <img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
@@ -17,7 +17,7 @@
                         <span>{{title}}</span>
                     </a>
                 </h2>
-                {{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
+                {{#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>
                     {{#primary_author}}
@@ -28,6 +28,10 @@
                         <span class="meta-divider">/</span>
                         <a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
                     {{/primary_tag}}
+                    {{#unless access}}
+                        <span class="meta-divider">/</span>
+                        <span class="meta-item meta-item--access">Members</span>
+                    {{/unless}}
                     <span class="meta-divider">/</span>
                     <span class="meta-item meta-item--comments">
                         <span class="meta-item__icon">◌</span>

partials/site/sidebar-left.hbs

@@ -4,7 +4,7 @@
             <ul class="menu-groups__list flex flex-col gap-0.75 text-typ text-sm">
                 <li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': homePagesOpen }" data-label="Home pages" data-slug="home-pages" data-length="10" aria-haspopup="true">
                     <a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="homePagesOpen = !homePagesOpen" :aria-expanded="homePagesOpen.toString()" aria-haspopup="true">
-                        <span class="menu-link__marker"></span>
+                        <span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
                         <span class="menu-link__label">Home pages</span>
                     </a>
                     <button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="home-pages" :aria-expanded="homePagesOpen.toString()" @click="homePagesOpen = !homePagesOpen" aria-haspopup="true">
@@ -20,21 +20,21 @@
 
                 <li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Tags" data-slug="tags" data-length="4">
                     <a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/tags/">
-                        <span class="menu-link__marker"></span>
+                        <span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
                         <span class="menu-link__label">Tags</span>
                     </a>
                 </li>
 
                 <li class="menu-group menu-group--nav menu-group--link flex items-center flex-wrap w-full relative group" data-label="Authors" data-slug="authors" data-length="7">
                     <a class="menu-group__link flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="/authors/">
-                        <span class="menu-link__marker"></span>
+                        <span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
                         <span class="menu-link__label">Authors</span>
                     </a>
                 </li>
 
                 <li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': membersOpen }" data-label="Members" data-slug="members" data-length="7" aria-haspopup="true">
                     <a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="membersOpen = !membersOpen" :aria-expanded="membersOpen.toString()" aria-haspopup="true">
-                        <span class="menu-link__marker"></span>
+                        <span class="menu-link__marker w-1 h-4 rounded-sm rounded-l-none transition-all"></span>
                         <span class="menu-link__label">Members</span>
                     </a>
                     <button class="menu-group__toggle relative cursor-pointer p-2 rounded-r-theme" type="button" title="Menu toggle" aria-label="Toggle submenu" aria-controls="members" :aria-expanded="membersOpen.toString()" @click="membersOpen = !membersOpen" aria-haspopup="true">