v0.1.16 탑바 및 아이콘 표현 수정
This commit is contained in:
@@ -189,7 +189,7 @@ body.left-sidebar-collapsed .sidebar--left {
|
|||||||
|
|
||||||
.menu-group__content {
|
.menu-group__content {
|
||||||
height: 0;
|
height: 0;
|
||||||
padding: 0;
|
padding: 2px 0 0;
|
||||||
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
|
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
will-change: height;
|
will-change: height;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -383,16 +383,16 @@ body.left-sidebar-collapsed .sidebar--left {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.category-chip__dot {
|
.category-chip__dot {
|
||||||
width: 5px;
|
position: relative;
|
||||||
|
width: 14px;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
border-radius: 999px;
|
flex: 0 0 14px;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-chip__label {
|
.category-chip__label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
font-size: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -407,11 +407,24 @@ body.left-sidebar-collapsed .sidebar--left {
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-chip:hover .category-chip__dot {
|
.category-chip__dot::before {
|
||||||
width: 14px;
|
content: "";
|
||||||
height: 14px;
|
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;
|
border-radius: 999px;
|
||||||
margin-left: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-list {
|
.author-list {
|
||||||
@@ -463,19 +476,25 @@ body.left-sidebar-collapsed .sidebar--left {
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 20;
|
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);
|
height: var(--topbar-height);
|
||||||
width: min(100%, var(--shell-width));
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
background: color-mix(in srgb, var(--bg) 94%, transparent);
|
background: color-mix(in srgb, var(--bg) 94%, transparent);
|
||||||
backdrop-filter: blur(10px);
|
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__brand,
|
||||||
.topbar__search {
|
.topbar__search,
|
||||||
|
.topbar__actions {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -557,11 +576,17 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-trigger__icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.search-shortcut {
|
.search-shortcut {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding: 1px 7px;
|
padding: 1px 7px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -873,6 +898,19 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
|
|||||||
letter-spacing: -0.01em;
|
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 {
|
.post-card__content p {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
color: var(--text-soft);
|
color: var(--text-soft);
|
||||||
|
|||||||
10
assets/icons/bolt.svg
Normal file
10
assets/icons/bolt.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 295 B |
1
assets/icons/search.svg
Normal file
1
assets/icons/search.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 375 B |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "ghost-theme-thred-clone",
|
"name": "ghost-theme-thred-clone",
|
||||||
"version": "0.1.15",
|
"version": "0.1.16",
|
||||||
"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": [
|
||||||
|
|||||||
@@ -9,7 +9,14 @@
|
|||||||
{{/if}}
|
{{/if}}
|
||||||
</a>
|
</a>
|
||||||
<div class="post-card__content">
|
<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}}
|
{{#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>
|
||||||
|
|||||||
@@ -1,26 +1,30 @@
|
|||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<div class="topbar__brand">
|
<div class="topbar__inner">
|
||||||
<button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
|
<div class="topbar__brand">
|
||||||
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
|
<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--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
|
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
|
||||||
</button>
|
<img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
|
||||||
<a class="brand brand--topbar" href="{{@site.url}}">
|
</button>
|
||||||
<span class="brand__name">{{@site.title}}</span>
|
<a class="brand brand--topbar" href="{{@site.url}}">
|
||||||
</a>
|
<span class="brand__name">{{@site.title}}</span>
|
||||||
</div>
|
</a>
|
||||||
<div class="topbar__search">
|
</div>
|
||||||
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
|
<div class="topbar__search">
|
||||||
<span class="search-trigger__icon">⌕</span>
|
<button class="search-trigger" type="button" data-search-open aria-label="Open search">
|
||||||
<span>Search</span>
|
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
|
||||||
<span class="search-shortcut">/</span>
|
<span>Search</span>
|
||||||
</button>
|
<span class="search-shortcut">/</span>
|
||||||
</div>
|
</button>
|
||||||
<div class="topbar__actions">
|
</div>
|
||||||
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">⌕</button>
|
<div class="topbar__actions">
|
||||||
{{#if @custom.show_admin_link}}
|
<button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">
|
||||||
<a class="button button--accent" href="/ghost/">Admin</a>
|
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
|
||||||
<a class="icon-button icon-button--profile" href="/ghost/" aria-label="Ghost admin"><span></span></a>
|
</button>
|
||||||
{{/if}}
|
{{#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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user