v0.1.6 헤더 및 포스트 레이아웃 수정

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;
+    padding: 8px 14px 8px 30px;
-    border-radius: 12px;
+    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;
+    padding: 8px 14px 8px 30px;
-    border-radius: 12px;
+    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;
+    gap: 10px;
-    padding: 6px 2px;
+    min-width: 0;
-    border-radius: 10px;
+    padding: 6px 0;
-    transition: color 0.2s ease;
+    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 {
+.category-chip__label {
-    margin-left: auto;
+    min-width: 0;
-    color: var(--text-dim);
+    overflow: hidden;
-    font-size: 11px;
+    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;

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": [

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__label">{{name}}</span>
-                            <span class="category-chip__count">{{count.posts}}</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>

partials/site/sidebar-right.hbs

@@ -1,5 +1,6 @@
 <aside class="sidebar sidebar--right">
     <div class="sidebar__inner sidebar__inner--right">
+        <section class="site-intro">
             {{#if @site.icon}}
                 <img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
             {{else}}
@@ -11,6 +12,7 @@
                     <p>{{@site.description}}</p>
                 {{/if}}
             </div>
+        </section>
 
         {{subscribe_form
             placeholder="Your email"

post.hbs

@@ -4,6 +4,7 @@
 <main class="content-area content-area--post">
     <article class="post-template {{post_class}}">
         <header class="post-header">
+            <div class="post-header__inner">
                 {{#if primary_tag}}
                     <a class="post-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
                 {{/if}}
@@ -15,6 +16,7 @@
                     {{/primary_author}}
                     <span>{{reading_time}}</span>
                 </div>
+            </div>
             {{#if feature_image}}
                 <figure class="post-feature-image">
                     <img
@@ -27,6 +29,7 @@
             {{/if}}
         </header>
 
+        <div class="post-body">
             <section class="post-content kg-content">
                 {{content}}
             </section>
@@ -54,6 +57,7 @@
                     </div>
                 {{/primary_author}}
             </footer>
+        </div>
     </article>
 
     {{> "post/post-navigation"}}