From d8348272364c32d4041f467de81635f8f3a135f3 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Mon, 13 Apr 2026 16:03:37 +0900
Subject: [PATCH] =?UTF-8?q?v0.1.6=20=ED=97=A4=EB=8D=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=8F=AC=EC=8A=A4=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/built/screen.css         | 111 +++++++++++++++++++++++++-------
 package.json                    |   2 +-
 partials/site/sidebar-left.hbs  |   5 +-
 partials/site/sidebar-right.hbs |  22 ++++---
 post.hbs                        |  72 +++++++++++----------
 5 files changed, 140 insertions(+), 72 deletions(-)

diff --git a/assets/built/screen.css b/assets/built/screen.css
index cbfb5d3..8754ffa 100644
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -18,6 +18,7 @@
     --sidebar-right: 320px;
     --content-column: 720px;
     --content-measure: 680px;
+    --content-header: 720px;
     --topbar-height: 62px;
     --shell-width: calc(var(--sidebar-left) + var(--content-column) + var(--sidebar-right));
     --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
@@ -94,6 +95,7 @@ input {
 
 .site-shell-wrap {
     border-top: 1px solid var(--border);
+    background: var(--bg);
 }
 
 .sidebar,
@@ -115,7 +117,7 @@ input {
     position: sticky;
     top: var(--topbar-height);
     height: calc(100vh - var(--topbar-height));
-    padding: 18px 16px;
+    padding: 0 16px 18px;
     overflow-y: auto;
 }
 
@@ -152,6 +154,8 @@ input {
 .menu-groups {
     display: grid;
     gap: 2px;
+    padding-top: 18px;
+    padding-bottom: 16px;
 }
 
 .menu-group {
@@ -165,7 +169,7 @@ input {
     width: 100%;
     padding: 8px 10px;
     border: 0;
-    border-radius: 14px;
+    border-radius: 15px;
     background: none;
     color: inherit;
     cursor: pointer;
@@ -177,10 +181,11 @@ input {
     padding: 0;
     transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: height;
+    overflow: hidden;
 }
 
 .menu-group__content > * {
-    padding: 4px 0 10px;
+    padding: 6px 0 12px;
 }
 
 .menu-group .nav {
@@ -191,7 +196,7 @@ input {
 
 .menu-group .nav li + li,
 .link-list li + li {
-    margin-top: 4px;
+    margin-top: 3px;
 }
 
 .menu-group .nav a,
@@ -201,8 +206,8 @@ input {
 
 .menu-group .nav a {
     display: block;
-    padding: 7px 14px 7px 30px;
-    border-radius: 12px;
+    padding: 8px 14px 8px 30px;
+    border-radius: 13px;
     transition: background-color 0.22s ease, color 0.22s ease;
 }
 
@@ -220,8 +225,8 @@ input {
 
 .menu-sub-link {
     display: block;
-    padding: 7px 14px 7px 30px;
-    border-radius: 12px;
+    padding: 8px 14px 8px 30px;
+    border-radius: 13px;
     transition: background-color 0.22s ease, color 0.22s ease;
 }
 
@@ -302,16 +307,17 @@ input {
 .category-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px 16px;
+    gap: 8px 18px;
 }
 
 .category-chip {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 6px 2px;
-    border-radius: 10px;
-    transition: color 0.2s ease;
+    gap: 10px;
+    min-width: 0;
+    padding: 6px 0;
+    border-radius: 12px;
+    transition: color 0.2s ease, transform 0.2s ease;
     font-weight: 600;
     letter-spacing: -0.01em;
 }
@@ -322,6 +328,10 @@ input {
     background: transparent;
 }
 
+.category-chip:hover {
+    transform: translateX(1px);
+}
+
 .category-chip__dot {
     width: 5px;
     height: 19px;
@@ -329,10 +339,11 @@ input {
     background: linear-gradient(135deg, #5d66ff, #29b6f6);
 }
 
-.category-chip__count {
-    margin-left: auto;
-    color: var(--text-dim);
-    font-size: 11px;
+.category-chip__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .author-list {
@@ -354,8 +365,17 @@ input {
     display: block;
 }
 
+.author-list__body {
+    min-width: 0;
+}
+
+.author-list__item strong {
+    line-height: 1.3;
+}
+
 .author-list__item small {
     color: var(--text-soft);
+    line-height: 1.25;
 }
 
 .sidebar-footer {
@@ -382,6 +402,8 @@ input {
     margin: 0 auto;
     background: color-mix(in srgb, var(--bg) 94%, transparent);
     backdrop-filter: blur(10px);
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
 }
 
 .topbar__brand,
@@ -392,12 +414,17 @@ input {
 .topbar__brand {
     padding: 0 16px;
     border-right: 1px solid var(--border);
+    height: 100%;
+    display: flex;
+    align-items: center;
 }
 
 .topbar__search {
     display: flex;
     justify-content: center;
     padding: 0 18px;
+    height: 100%;
+    align-items: center;
 }
 
 .search-trigger,
@@ -433,6 +460,7 @@ input {
     gap: 10px;
     padding: 0 16px;
     border-left: 1px solid var(--border);
+    height: 100%;
 }
 
 .button,
@@ -493,6 +521,7 @@ input {
 
 .content-area {
     padding: 0 20px 44px;
+    min-width: 0;
 }
 
 .hero {
@@ -710,6 +739,14 @@ input {
     font-weight: 800;
 }
 
+.site-intro {
+    display: grid;
+    grid-template-columns: 54px minmax(0, 1fr);
+    gap: 14px;
+    align-items: center;
+    padding-top: 18px;
+}
+
 .about-block h2,
 .author-feature h3 {
     margin: 0 0 4px;
@@ -725,14 +762,15 @@ input {
 
 .social-row {
     display: flex;
-    gap: 12px;
+    gap: 14px;
 }
 
 .social-row a {
     color: var(--text-soft);
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
+    letter-spacing: 0.06em;
 }
 
 .recommended-list {
@@ -740,12 +778,12 @@ input {
     padding: 0;
     list-style: none;
     display: grid;
-    gap: 8px;
+    gap: 6px;
 }
 
 .recommended-list a {
     display: block;
-    padding: 6px 0;
+    padding: 5px 0;
     border-radius: 10px;
     line-height: 1.5;
     font-size: 0.94rem;
@@ -778,19 +816,26 @@ input {
 }
 
 .post-template {
-    max-width: var(--content-measure);
+    max-width: var(--content-header);
     margin: 0 auto;
-    padding: 24px 0 10px;
+    padding: 18px 0 10px;
 }
 
 .post-header {
     display: grid;
     gap: 14px;
-    padding-top: 14px;
+    padding-top: 8px;
     padding-bottom: 24px;
     border-bottom: 1px solid var(--border);
 }
 
+.post-header__inner,
+.post-body {
+    max-width: var(--content-measure);
+    width: 100%;
+    margin: 0 auto;
+}
+
 .post-tag {
     color: var(--accent);
     font-weight: 700;
@@ -815,9 +860,14 @@ input {
     border-radius: 14px;
 }
 
+.post-body {
+    padding-top: 22px;
+}
+
 .kg-content {
     font-size: 1.02rem;
     line-height: 1.88;
+    min-width: 0;
 }
 
 .kg-content > * + * {
@@ -1025,6 +1075,8 @@ input {
     .topbar {
         width: 100%;
         grid-template-columns: 240px minmax(0, 1fr);
+        border-left: 0;
+        border-right: 0;
     }
 
     .topbar__actions {
@@ -1046,6 +1098,8 @@ input {
         grid-template-columns: 1fr;
         padding: 0 14px;
         border-bottom: 1px solid var(--border);
+        border-left: 0;
+        border-right: 0;
     }
 
     .topbar__brand,
@@ -1090,6 +1144,15 @@ input {
         padding-inline: 0;
     }
 
+    .post-template {
+        max-width: 100%;
+    }
+
+    .post-header__inner,
+    .post-body {
+        max-width: 100%;
+    }
+
     .category-overview__row {
         grid-template-columns: 1fr;
         gap: 10px;
diff --git a/package.json b/package.json
index 24cbd8e..c331a8e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [
diff --git a/partials/site/sidebar-left.hbs b/partials/site/sidebar-left.hbs
index 16bdbe2..3e8da8c 100644
--- a/partials/site/sidebar-left.hbs
+++ b/partials/site/sidebar-left.hbs
@@ -79,8 +79,7 @@
                     {{#foreach tags}}
                         <a class="category-chip" href="{{url}}">
                             <span class="category-chip__dot"></span>
-                            <span>{{name}}</span>
-                            <span class="category-chip__count">{{count.posts}}</span>
+                            <span class="category-chip__label">{{name}}</span>
                         </a>
                     {{/foreach}}
                 {{/get}}
@@ -100,7 +99,7 @@
                                     {{else}}
                                         <span class="avatar avatar--fallback">A</span>
                                     {{/if}}
-                                    <span>
+                                    <span class="author-list__body">
                                         <strong>{{name}}</strong>
                                         <small>{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</small>
                                     </span>
diff --git a/partials/site/sidebar-right.hbs b/partials/site/sidebar-right.hbs
index 871a883..e7c089f 100644
--- a/partials/site/sidebar-right.hbs
+++ b/partials/site/sidebar-right.hbs
@@ -1,16 +1,18 @@
 <aside class="sidebar sidebar--right">
     <div class="sidebar__inner sidebar__inner--right">
-        {{#if @site.icon}}
-            <img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
-        {{else}}
-            <div class="site-icon site-icon--fallback">T</div>
-        {{/if}}
-        <div class="about-block">
-            <h2>{{@site.title}}</h2>
-            {{#if @site.description}}
-                <p>{{@site.description}}</p>
+        <section class="site-intro">
+            {{#if @site.icon}}
+                <img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
+            {{else}}
+                <div class="site-icon site-icon--fallback">T</div>
             {{/if}}
-        </div>
+            <div class="about-block">
+                <h2>{{@site.title}}</h2>
+                {{#if @site.description}}
+                    <p>{{@site.description}}</p>
+                {{/if}}
+            </div>
+        </section>
 
         {{subscribe_form
             placeholder="Your email"
diff --git a/post.hbs b/post.hbs
index 5563d56..f10a2c6 100644
--- a/post.hbs
+++ b/post.hbs
@@ -4,16 +4,18 @@
 <main class="content-area content-area--post">
     <article class="post-template {{post_class}}">
         <header class="post-header">
-            {{#if primary_tag}}
-                <a class="post-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
-            {{/if}}
-            <h1 class="post-title">{{title}}</h1>
-            <div class="post-meta">
-                <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
-                {{#primary_author}}
-                    <span>{{name}}</span>
-                {{/primary_author}}
-                <span>{{reading_time}}</span>
+            <div class="post-header__inner">
+                {{#if primary_tag}}
+                    <a class="post-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
+                {{/if}}
+                <h1 class="post-title">{{title}}</h1>
+                <div class="post-meta">
+                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
+                    {{#primary_author}}
+                        <span>{{name}}</span>
+                    {{/primary_author}}
+                    <span>{{reading_time}}</span>
+                </div>
             </div>
             {{#if feature_image}}
                 <figure class="post-feature-image">
@@ -27,33 +29,35 @@
             {{/if}}
         </header>
 
-        <section class="post-content kg-content">
-            {{content}}
-        </section>
-
-        {{#unless access}}
-            <section class="membership-cta">
-                <h2>This post is for paying subscribers only</h2>
-                <a class="button button--light" href="#/portal/signup">Subscribe Now</a>
-                <p>Already have an account? <a href="#/portal/signin">Sign in</a></p>
+        <div class="post-body">
+            <section class="post-content kg-content">
+                {{content}}
             </section>
-        {{/unless}}
 
-        <footer class="post-footer">
-            {{#primary_author}}
-                <div class="author-inline-card">
-                    {{#if profile_image}}
-                        <img class="avatar" src="{{img_url profile_image size="xs"}}" alt="{{name}}">
-                    {{else}}
-                        <div class="avatar avatar--fallback">A</div>
-                    {{/if}}
-                    <div>
-                        <h3>{{name}}</h3>
-                        {{#if bio}}<p>{{bio}}</p>{{/if}}
+            {{#unless access}}
+                <section class="membership-cta">
+                    <h2>This post is for paying subscribers only</h2>
+                    <a class="button button--light" href="#/portal/signup">Subscribe Now</a>
+                    <p>Already have an account? <a href="#/portal/signin">Sign in</a></p>
+                </section>
+            {{/unless}}
+
+            <footer class="post-footer">
+                {{#primary_author}}
+                    <div class="author-inline-card">
+                        {{#if profile_image}}
+                            <img class="avatar" src="{{img_url profile_image size="xs"}}" alt="{{name}}">
+                        {{else}}
+                            <div class="avatar avatar--fallback">A</div>
+                        {{/if}}
+                        <div>
+                            <h3>{{name}}</h3>
+                            {{#if bio}}<p>{{bio}}</p>{{/if}}
+                        </div>
                     </div>
-                </div>
-            {{/primary_author}}
-        </footer>
+                {{/primary_author}}
+            </footer>
+        </div>
     </article>
 
     {{> "post/post-navigation"}}