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

v0.1.7 헤더 및 사이드바 디테일 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 16:09:31 +09:00
parent d834827236
commit 9f02d0d519
4 changed files with 116 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
assets/built/screen.css
View File

@@ -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;
}
}

2
package.json
View File

@@ -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": [

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

@@ -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>

3
partials/site/topbar.hbs
View File

@@ -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>