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

v0.1.16 탑바 및 아이콘 표현 수정

Browse Source
This commit is contained in:
zenn
2026-04-13 18:48:31 +09:00
parent 0a65176008
commit f10f9c5e37
6 changed files with 101 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
assets/built/screen.css
View File

@@ -189,7 +189,7 @@ body.left-sidebar-collapsed .sidebar--left {
.menu-group__content {
height: 0;
padding: 0;
padding: 2px 0 0;
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: height;
overflow: hidden;
@@ -383,16 +383,16 @@ body.left-sidebar-collapsed .sidebar--left {
}
.category-chip__dot {
width: 5px;
position: relative;
width: 14px;
height: 19px;
border-radius: 999px;
background: var(--tag-accent, linear-gradient(135deg, #5d66ff, #29b6f6));
transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, margin 0.22s ease;
flex: 0 0 14px;
}
.category-chip__label {
flex: 1;
min-width: 0;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -407,11 +407,24 @@ body.left-sidebar-collapsed .sidebar--left {
color: var(--text);
}
.category-chip:hover .category-chip__dot {
width: 14px;
height: 14px;
.category-chip__dot::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 5px;
height: 19px;
border-radius: 999px;
background: var(--tag-accent, linear-gradient(135deg, #5d66ff, #29b6f6));
transform: translateY(-50%);
transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, left 0.22s ease;
}
.category-chip:hover .category-chip__dot::before {
left: 2px;
width: 10px;
height: 10px;
border-radius: 999px;
margin-left: 4px;
}
.author-list {
@@ -463,19 +476,25 @@ body.left-sidebar-collapsed .sidebar--left {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right);
gap: 0;
align-items: center;
height: var(--topbar-height);
width: min(100%, var(--shell-width));
margin: 0 auto;
width: 100%;
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: blur(10px);
}
.topbar__inner {
display: grid;
grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right);
gap: 0;
align-items: center;
height: 100%;
width: min(100%, var(--shell-width));
margin: 0 auto;
}
.topbar__brand,
.topbar__search {
.topbar__search,
.topbar__actions {
min-width: 0;
}
@@ -557,11 +576,17 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
box-shadow: none;
}
.search-trigger__icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.search-shortcut {
margin-left: auto;
padding: 1px 7px;
border: 1px solid var(--border);
border-radius: 8px;
border-radius: 4px;
font-size: 12px;
}
@@ -873,6 +898,19 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
letter-spacing: -0.01em;
}
.post-card__content h2 a {
display: inline-flex;
align-items: flex-start;
gap: 6px;
}
.post-card__featured-icon {
width: 14px;
height: 14px;
margin-top: 2px;
flex: 0 0 auto;
}
.post-card__content p {
margin: 0 0 8px;
color: var(--text-soft);

10
assets/icons/bolt.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_33)">
<path d="M13 3V10H19L11 21V14H5L13 3Z" fill="#FF4400"/>
</g>
<defs>
<clipPath id="clip0_5_33">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

1
assets/icons/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

2
package.json
View File

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

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

@@ -9,7 +9,14 @@
{{/if}}
</a>
<div class="post-card__content">
<h2><a href="{{url}}">{{title}}</a></h2>
<h2>
<a href="{{url}}">
{{#if featured}}
<img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
{{/if}}
<span>{{title}}</span>
</a>
</h2>
{{#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>

48
partials/site/topbar.hbs
View File

@@ -1,26 +1,30 @@
<header class="topbar">
<div class="topbar__brand">
<button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
</button>
<a class="brand brand--topbar" href="{{@site.url}}">
<span class="brand__name">{{@site.title}}</span>
</a>
</div>
<div class="topbar__search">
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
<span class="search-trigger__icon">⌕</span>
<span>Search</span>
<span class="search-shortcut">/</span>
</button>
</div>
<div class="topbar__actions">
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">⌕</button>
{{#if @custom.show_admin_link}}
<a class="button button--accent" href="/ghost/">Admin</a>
<a class="icon-button icon-button--profile" href="/ghost/" aria-label="Ghost admin"><span></span></a>
{{/if}}
<div class="topbar__inner">
<div class="topbar__brand">
<button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
</button>
<a class="brand brand--topbar" href="{{@site.url}}">
<span class="brand__name">{{@site.title}}</span>
</a>
</div>
<div class="topbar__search">
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
<span>Search</span>
<span class="search-shortcut">/</span>
</button>
</div>
<div class="topbar__actions">
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
</button>
{{#if @custom.show_admin_link}}
<a class="button button--accent" href="/ghost/">Admin</a>
<a class="icon-button icon-button--profile" href="/ghost/" aria-label="Ghost admin"><span></span></a>
{{/if}}
</div>
</div>
</header>