zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.10 메타 표현 및 타이포 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 17:05:31 +09:00
parent 98defddcf3
commit 0e3a723eef
5 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
assets/built/screen.css
View File

@@ -212,6 +212,7 @@ input {
padding: 8px 14px 8px 30px;
border-radius: 13px;
transition: background-color 0.22s ease, color 0.22s ease;
font-size: 13px;
}
.menu-group .nav a:hover,
@@ -231,6 +232,7 @@ input {
padding: 8px 14px 8px 30px;
border-radius: 13px;
transition: background-color 0.22s ease, color 0.22s ease;
font-size: 13px;
}
.menu-link {
@@ -252,8 +254,8 @@ input {
}
.menu-link__label {
font-size: 1rem;
font-weight: 600;
font-size: 14px;
font-weight: 550;
letter-spacing: -0.015em;
}
@@ -266,10 +268,15 @@ input {
transform: translateX(1px);
}
.menu-group__trigger:hover .menu-link__label,
.menu-group__trigger[aria-expanded="true"] .menu-link__label {
color: var(--text);
}
.menu-group__trigger:hover .menu-link__marker,
.menu-group__trigger[aria-expanded="true"] .menu-link__marker {
width: 12px;
height: 12px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #cfc7be;
transform: translateX(1px);
@@ -331,6 +338,7 @@ input {
padding: 6px 0;
border-radius: 12px;
transition: color 0.2s ease, transform 0.2s ease;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
}
@@ -349,20 +357,9 @@ input {
width: 5px;
height: 19px;
border-radius: 999px;
background: linear-gradient(135deg, #5d66ff, #29b6f6);
background: var(--tag-accent, 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;
@@ -395,11 +392,13 @@ input {
.author-list__item strong {
line-height: 1.3;
font-size: 14px;
}
.author-list__item small {
color: var(--text-soft);
line-height: 1.25;
font-size: 12px;
}
.sidebar-footer {
@@ -435,7 +434,6 @@ input {
.topbar__brand {
padding: 0 16px;
border-right: 1px solid var(--border);
height: 100%;
display: flex;
align-items: center;
@@ -481,7 +479,6 @@ input {
align-items: center;
gap: 10px;
padding: 0 16px;
border-left: 1px solid var(--border);
height: 100%;
}
@@ -498,6 +495,7 @@ input {
font-weight: 700;
cursor: pointer;
box-shadow: none;
font-size: 14px;
}
.button--accent {
@@ -603,8 +601,8 @@ input {
max-width: 620px;
margin: 0;
color: var(--text-soft);
font-size: 1rem;
line-height: 1.7;
font-size: 15px;
line-height: 1.62;
}
.subscribe-form,
@@ -680,6 +678,7 @@ input {
border-bottom: 2px solid transparent;
background: none;
color: var(--text-soft);
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
@@ -777,50 +776,48 @@ input {
.post-card__content h2 {
margin: 0 0 6px;
font-size: 1.04rem;
line-height: 1.34;
font-size: 15px;
line-height: 1.28;
letter-spacing: -0.01em;
}
.post-card__content p {
margin: 0 0 8px;
color: var(--text-soft);
font-size: 0.94rem;
line-height: 1.55;
font-size: 14px;
line-height: 1.45;
}
.post-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
gap: 6px;
color: var(--text-soft);
font-size: 13px;
font-size: 12px;
align-items: center;
}
.meta-pill {
display: inline-flex;
align-items: center;
padding: 4px 8px;
padding: 3px 8px;
border-radius: 999px;
background: var(--surface-muted);
background: color-mix(in srgb, var(--tag-accent, var(--surface-muted)) 12%, var(--surface));
color: var(--text);
font-size: 12px;
font-size: 11px;
font-weight: 700;
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
gap: 4px;
}
.meta-item + .meta-item::before,
.meta-pill + .meta-item::before,
.meta-item + .meta-pill::before {
content: "/";
.meta-divider {
color: var(--border-strong);
margin-right: 2px;
font-size: 12px;
line-height: 1;
}
.meta-item__icon {
@@ -922,8 +919,8 @@ input {
display: block;
padding: 5px 0;
border-radius: 10px;
line-height: 1.5;
font-size: 0.94rem;
line-height: 1.45;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -949,6 +946,7 @@ input {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-bottom: 1px solid var(--border);
}
@@ -957,6 +955,17 @@ input {
padding-top: 18px;
}
.author-feature__body {
min-width: 0;
flex: 1;
}
.author-feature__action {
color: var(--text-dim);
font-size: 13px;
line-height: 1;
}
.avatar,
.avatar--fallback {
width: 34px;
@@ -1004,16 +1013,17 @@ input {
.post-title {
margin: 0;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1.08;
line-height: 1.05;
letter-spacing: -0.04em;
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
gap: 8px;
color: var(--text-soft);
font-size: 0.95rem;
font-size: 13px;
align-items: center;
}
.post-feature-image img {
@@ -1271,7 +1281,6 @@ input {
.topbar {
grid-template-columns: 1fr;
padding: 0 14px;
border-bottom: 1px solid var(--border);
border-left: 0;
border-right: 0;
}
@@ -1296,6 +1305,7 @@ input {
right: 14px;
top: 50%;
transform: translateY(-50%);
gap: 8px;
}
.icon-button--search-mobile {
@@ -1329,6 +1339,16 @@ input {
max-width: 100%;
}
.post-header {
gap: 12px;
padding-top: 2px;
padding-bottom: 18px;
}
.post-body {
padding-top: 18px;
}
.category-overview__row {
grid-template-columns: 1fr;
gap: 10px;
@@ -1342,11 +1362,18 @@ input {
@media (max-width: 640px) {
.topbar {
padding-inline: 16px;
height: 60px;
}
.button--accent {
padding-inline: 14px;
font-size: 0.95rem;
padding-inline: 12px;
min-height: 38px;
font-size: 13px;
}
.topbar__actions .icon-button--profile {
width: 34px;
height: 34px;
}
.post-card {
@@ -1368,11 +1395,12 @@ input {
}
.hero__title {
font-size: 2.2rem;
font-size: 1.95rem;
}
.post-title {
font-size: 2.15rem;
font-size: 1.95rem;
line-height: 1.08;
}
.tab-row-wrap {
@@ -1382,4 +1410,9 @@ input {
.view-toggle {
padding: 8px;
}
.post-meta {
gap: 6px;
font-size: 12px;
}
}

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ghost-theme-thred-clone",
"version": "0.1.9",
"version": "0.1.10",
"private": true,
"description": "A Ghost theme inspired by the Thred reference layout.",
"keywords": [

11
partials/lists/post-items.hbs
View File

@@ -13,8 +13,15 @@
{{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
<div class="post-card__meta">
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
{{#primary_author}}<span class="meta-item">{{name}}</span>{{/primary_author}}
{{#primary_tag}}<a class="meta-pill" href="{{url}}">{{name}}</a>{{/primary_tag}}
{{#primary_author}}
<span class="meta-divider">/</span>
<span class="meta-item">{{name}}</span>
{{/primary_author}}
{{#primary_tag}}
<span class="meta-divider">/</span>
<a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
{{/primary_tag}}
<span class="meta-divider">/</span>
<span class="meta-item meta-item--comments">
<span class="meta-item__icon">◌</span>
{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}

2
partials/site/sidebar-left.hbs
View File

@@ -77,7 +77,7 @@
<div class="category-grid">
{{#get "tags" limit="10" include="count.posts"}}
{{#foreach tags}}
<a class="category-chip" href="{{url}}">
<a class="category-chip" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
<span class="category-chip__dot"></span>
<span class="category-chip__label">{{name}}</span>
</a>

3
partials/site/sidebar-right.hbs
View File

@@ -9,10 +9,11 @@
{{else}}
<div class="avatar avatar--large avatar--fallback">A</div>
{{/if}}
<div>
<div class="author-feature__body">
<h3>{{name}}</h3>
{{#if bio}}<p>{{bio}}</p>{{/if}}
</div>
<span class="author-feature__action">↗</span>
</section>
{{/primary_author}}
{{/post}}