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

2026-04-13 16:03:37 +09:00
parent d5bb44b0e2
commit d834827236
5 changed files with 140 additions and 72 deletions
--- 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;
--- 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": [
--- 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>
--- 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"
--- 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"}}