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}}
- {{name}}
- {{count.posts}}
+ {{name}}
{{/foreach}}
{{/get}}
@@ -100,7 +99,7 @@
{{else}}
A
{{/if}}
-
+
{{name}}
{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}
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 @@