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

2
package.json
View File

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

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

@@ -13,8 +13,15 @@
{{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}} {{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
<div class="post-card__meta"> <div class="post-card__meta">
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time> <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_author}}
{{#primary_tag}}<a class="meta-pill" href="{{url}}">{{name}}</a>{{/primary_tag}} <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 meta-item--comments">
<span class="meta-item__icon">◌</span> <span class="meta-item__icon">◌</span>
{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}} {{#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"> <div class="category-grid">
{{#get "tags" limit="10" include="count.posts"}} {{#get "tags" limit="10" include="count.posts"}}
{{#foreach tags}} {{#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__dot"></span>
<span class="category-chip__label">{{name}}</span> <span class="category-chip__label">{{name}}</span>
</a> </a>

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

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