From 9f02d0d519cc66b4156de059bfdd0779f3aa8b9a Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Mon, 13 Apr 2026 16:09:31 +0900
Subject: [PATCH] =?UTF-8?q?v0.1.7=20=ED=97=A4=EB=8D=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EB=94=94=ED=85=8C?=
 =?UTF-8?q?=EC=9D=BC=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         | 103 ++++++++++++++++++++++++++++----
 package.json                    |   2 +-
 partials/site/sidebar-right.hbs |  33 ++++++----
 partials/site/topbar.hbs        |   3 +-
 4 files changed, 116 insertions(+), 25 deletions(-)

diff --git a/assets/built/screen.css b/assets/built/screen.css
index 8754ffa..9443fc4 100644
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -8,7 +8,8 @@
     --text: #1b1918;
     --text-soft: #6e6661;
     --text-dim: #9a9087;
-    --border: #ece5dc;
+    --border: #ece4d9;
+    --border-strong: #dfd4c8;
     --accent: #f0632f;
     --accent-strong: #d84d1d;
     --shadow: 0 8px 24px rgba(20, 16, 12, 0.035);
@@ -91,6 +92,8 @@ input {
     min-height: calc(100vh - var(--topbar-height));
     width: min(100%, var(--shell-width));
     margin: 0 auto;
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
 }
 
 .site-shell-wrap {
@@ -124,7 +127,7 @@ input {
 .sidebar__inner--right {
     display: flex;
     flex-direction: column;
-    gap: 18px;
+    gap: 0;
 }
 
 .brand {
@@ -173,7 +176,7 @@ input {
     background: none;
     color: inherit;
     cursor: pointer;
-    transition: background-color 0.22s ease, color 0.22s ease;
+    transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
 }
 
 .menu-group__content {
@@ -259,6 +262,10 @@ input {
     background: var(--surface-muted);
 }
 
+.menu-group__trigger:hover {
+    transform: translateX(1px);
+}
+
 .menu-group__trigger:hover .menu-link__marker,
 .menu-group__trigger[aria-expanded="true"] .menu-link__marker {
     width: 12px;
@@ -280,7 +287,7 @@ input {
 }
 
 .sidebar-card {
-    padding: 20px 0 0;
+    padding: 18px 0 0;
     border-top: 1px solid var(--border);
 }
 
@@ -292,7 +299,7 @@ input {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
 }
 
 .sidebar-card__header h2 {
@@ -304,6 +311,12 @@ input {
     color: var(--text-soft);
 }
 
+.sidebar-card__action {
+    color: var(--text-dim);
+    font-size: 13px;
+    line-height: 1;
+}
+
 .category-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -339,6 +352,17 @@ input {
     background: linear-gradient(135deg, #5d66ff, #29b6f6);
 }
 
+.category-chip:nth-child(10n + 1) .category-chip__dot { background: #f26d21; }
+.category-chip:nth-child(10n + 2) .category-chip__dot { background: #3d49f5; }
+.category-chip:nth-child(10n + 3) .category-chip__dot { background: #3e9bb6; }
+.category-chip:nth-child(10n + 4) .category-chip__dot { background: #67d7d0; }
+.category-chip:nth-child(10n + 5) .category-chip__dot { background: #ac38ff; }
+.category-chip:nth-child(10n + 6) .category-chip__dot { background: #f64096; }
+.category-chip:nth-child(10n + 7) .category-chip__dot { background: #50b236; }
+.category-chip:nth-child(10n + 8) .category-chip__dot { background: #6d36ff; }
+.category-chip:nth-child(10n + 9) .category-chip__dot { background: #8a35ff; }
+.category-chip:nth-child(10n + 10) .category-chip__dot { background: #f4c31d; }
+
 .category-chip__label {
     min-width: 0;
     overflow: hidden;
@@ -402,8 +426,6 @@ 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,
@@ -510,6 +532,35 @@ input {
     cursor: pointer;
 }
 
+.icon-button--profile span {
+    position: relative;
+    display: block;
+    width: 16px;
+    height: 16px;
+}
+
+.icon-button--profile span::before,
+.icon-button--profile span::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1.75px solid currentColor;
+    border-radius: 999px;
+}
+
+.icon-button--profile span::before {
+    top: 1px;
+    width: 6px;
+    height: 6px;
+}
+
+.icon-button--profile span::after {
+    bottom: 0;
+    width: 12px;
+    height: 8px;
+}
+
 .icon-button--search-mobile {
     display: none;
 }
@@ -528,7 +579,7 @@ input {
     display: grid;
     justify-items: center;
     gap: 16px;
-    padding: 38px 20px 28px;
+    padding: 42px 20px 28px;
     text-align: center;
     border-bottom: 1px solid var(--border);
 }
@@ -606,7 +657,7 @@ input {
 .tab-row {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
+    gap: 22px;
     padding-bottom: 14px;
     border-bottom: 1px solid var(--border);
 }
@@ -745,6 +796,7 @@ input {
     gap: 14px;
     align-items: center;
     padding-top: 18px;
+    padding-bottom: 18px;
 }
 
 .about-block h2,
@@ -787,16 +839,23 @@ input {
     border-radius: 10px;
     line-height: 1.5;
     font-size: 0.94rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .author-feature {
     display: flex;
     gap: 14px;
     align-items: center;
-    padding-bottom: 8px;
+    padding: 18px 0;
     border-bottom: 1px solid var(--border);
 }
 
+.author-feature--top {
+    padding-top: 18px;
+}
+
 .avatar,
 .avatar--fallback {
     width: 34px;
@@ -853,6 +912,7 @@ input {
     flex-wrap: wrap;
     gap: 10px;
     color: var(--text-soft);
+    font-size: 0.95rem;
 }
 
 .post-feature-image img {
@@ -870,6 +930,17 @@ input {
     min-width: 0;
 }
 
+.kg-content a {
+    text-decoration: underline;
+    text-underline-offset: 0.12em;
+}
+
+.kg-content p,
+.kg-content ul,
+.kg-content ol {
+    max-width: 100%;
+}
+
 .kg-content > * + * {
     margin-top: 1.2em;
 }
@@ -1086,6 +1157,8 @@ input {
     .site-shell {
         width: 100%;
         grid-template-columns: 240px minmax(0, 1fr);
+        border-left: 0;
+        border-right: 0;
     }
 
     .sidebar--right {
@@ -1130,6 +1203,8 @@ input {
 
     .site-shell {
         grid-template-columns: 1fr;
+        border-left: 0;
+        border-right: 0;
     }
 
     .sidebar--left {
@@ -1186,4 +1261,12 @@ input {
     .post-navigation__link--next {
         text-align: left;
     }
+
+    .hero__title {
+        font-size: 2.2rem;
+    }
+
+    .post-title {
+        font-size: 2.15rem;
+    }
 }
diff --git a/package.json b/package.json
index c331a8e..6ae972f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [
diff --git a/partials/site/sidebar-right.hbs b/partials/site/sidebar-right.hbs
index e7c089f..cff870a 100644
--- a/partials/site/sidebar-right.hbs
+++ b/partials/site/sidebar-right.hbs
@@ -1,5 +1,23 @@
 <aside class="sidebar sidebar--right">
     <div class="sidebar__inner sidebar__inner--right">
+        {{#is "post"}}
+            {{#post}}
+                {{#primary_author}}
+                    <section class="author-feature author-feature--top">
+                        {{#if profile_image}}
+                            <img class="avatar avatar--large" src="{{img_url profile_image size="s"}}" alt="{{name}}">
+                        {{else}}
+                            <div class="avatar avatar--large avatar--fallback">A</div>
+                        {{/if}}
+                        <div>
+                            <h3>{{name}}</h3>
+                            {{#if bio}}<p>{{bio}}</p>{{/if}}
+                        </div>
+                    </section>
+                {{/primary_author}}
+            {{/post}}
+        {{/is}}
+
         <section class="site-intro">
             {{#if @site.icon}}
                 <img class="site-icon" src="{{@site.icon}}" alt="{{@site.title}}">
@@ -23,6 +41,7 @@
         <section class="sidebar-card sidebar-card--tight">
             <div class="sidebar-card__header">
                 <h2>Follow</h2>
+                <span class="sidebar-card__action">↗</span>
             </div>
             <div class="social-row">
                 {{#if @site.facebook}}<a href="{{social_url type="facebook"}}" aria-label="Facebook">f</a>{{/if}}
@@ -34,6 +53,7 @@
         <section class="sidebar-card sidebar-card--tight">
             <div class="sidebar-card__header">
                 <h2>Recommended</h2>
+                <span class="sidebar-card__action">↗</span>
             </div>
             <ul class="recommended-list">
                 {{#get "posts" filter="featured:true" limit="3" include="tags"}}
@@ -53,19 +73,6 @@
 
         {{#is "post"}}
             {{#post}}
-                {{#primary_author}}
-                    <section class="author-feature">
-                        {{#if profile_image}}
-                            <img class="avatar avatar--large" src="{{img_url profile_image size="s"}}" alt="{{name}}">
-                        {{else}}
-                            <div class="avatar avatar--large avatar--fallback">A</div>
-                        {{/if}}
-                        <div>
-                            <h3>{{name}}</h3>
-                            {{#if bio}}<p>{{bio}}</p>{{/if}}
-                        </div>
-                    </section>
-                {{/primary_author}}
                 <section class="sidebar-card sidebar-card--tight">
                     <div class="sidebar-card__header">
                         <h2>Read next</h2>
diff --git a/partials/site/topbar.hbs b/partials/site/topbar.hbs
index b5f6862..84001eb 100644
--- a/partials/site/topbar.hbs
+++ b/partials/site/topbar.hbs
@@ -20,10 +20,11 @@
         <button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">⌕</button>
         {{#if @member}}
             <a class="button button--accent" href="#/portal/account">Account</a>
+            <a class="icon-button icon-button--profile" href="#/portal/account" aria-label="Account"><span></span></a>
         {{else}}
             <a class="button button--accent" href="#/portal/signup">Buy {{@site.title}}</a>
+            <a class="icon-button icon-button--profile" href="#/portal/signin" aria-label="Sign in"><span></span></a>
         {{/if}}
-        <button class="icon-button" type="button" data-theme-toggle aria-label="Toggle theme">◐</button>
     </div>
 </header>