v0.1.11 아코디언 아이콘 및 상세 메타 수정
This commit is contained in:
@@ -284,15 +284,36 @@ input {
|
||||
|
||||
.menu-group__chevron {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
transition: transform 0.22s ease, color 0.22s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: color 0.22s ease;
|
||||
}
|
||||
|
||||
.menu-group__chevron-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-group__chevron-icon--up {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-group.is-open .menu-group__chevron {
|
||||
transform: rotate(180deg);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.menu-group.is-open .menu-group__chevron-icon--down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-group.is-open .menu-group__chevron-icon--up {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
padding: 18px 0 0;
|
||||
border-top: 1px solid var(--border);
|
||||
@@ -808,6 +829,10 @@ input {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.meta-pill:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1006,6 +1031,8 @@ input {
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -1308,6 +1335,10 @@ input {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topbar__actions .button--accent {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.icon-button--search-mobile {
|
||||
display: inline-flex;
|
||||
}
|
||||
@@ -1376,6 +1407,14 @@ input {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.search-shortcut {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-trigger {
|
||||
width: min(100%, 100%);
|
||||
}
|
||||
|
||||
.post-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -1415,4 +1454,8 @@ input {
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.meta-divider {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
1
assets/icons/keyboard_arrow_down.svg
Normal file
1
assets/icons/keyboard_arrow_down.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="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 177 B |
1
assets/icons/keyboard_arrow_up.svg
Normal file
1
assets/icons/keyboard_arrow_up.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="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>
|
||||
|
After Width: | Height: | Size: 178 B |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ghost-theme-thred-clone",
|
||||
"version": "0.1.10",
|
||||
"version": "0.1.11",
|
||||
"private": true,
|
||||
"description": "A Ghost theme inspired by the Thred reference layout.",
|
||||
"keywords": [
|
||||
|
||||
@@ -7,7 +7,10 @@
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__label">Home pages</span>
|
||||
</span>
|
||||
<span class="menu-group__chevron">⌄</span>
|
||||
<span class="menu-group__chevron" aria-hidden="true">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
|
||||
</span>
|
||||
</button>
|
||||
<div class="menu-group__content" data-accordion-content>
|
||||
{{navigation}}
|
||||
@@ -20,7 +23,10 @@
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__label">Tags</span>
|
||||
</span>
|
||||
<span class="menu-group__chevron">⌄</span>
|
||||
<span class="menu-group__chevron" aria-hidden="true">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
|
||||
</span>
|
||||
</button>
|
||||
<div class="menu-group__content" data-accordion-content>
|
||||
<ul class="link-list">
|
||||
@@ -39,7 +45,10 @@
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__label">Authors</span>
|
||||
</span>
|
||||
<span class="menu-group__chevron">⌄</span>
|
||||
<span class="menu-group__chevron" aria-hidden="true">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
|
||||
</span>
|
||||
</button>
|
||||
<div class="menu-group__content" data-accordion-content>
|
||||
<ul class="link-list">
|
||||
@@ -58,7 +67,10 @@
|
||||
<span class="menu-link__marker"></span>
|
||||
<span class="menu-link__label">Members</span>
|
||||
</span>
|
||||
<span class="menu-group__chevron">⌄</span>
|
||||
<span class="menu-group__chevron" aria-hidden="true">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
|
||||
<img class="menu-group__chevron-icon menu-group__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
|
||||
</span>
|
||||
</button>
|
||||
<div class="menu-group__content" data-accordion-content>
|
||||
<ul class="link-list">
|
||||
|
||||
14
post.hbs
14
post.hbs
@@ -6,15 +6,21 @@
|
||||
<header class="post-header">
|
||||
<div class="post-header__inner">
|
||||
{{#if primary_tag}}
|
||||
<a class="post-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
|
||||
<a class="post-tag" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
|
||||
{{/if}}
|
||||
<h1 class="post-title">{{title}}</h1>
|
||||
<div class="post-meta">
|
||||
<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
|
||||
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
|
||||
{{#primary_author}}
|
||||
<span>{{name}}</span>
|
||||
<span class="meta-divider">/</span>
|
||||
<span class="meta-item">{{name}}</span>
|
||||
{{/primary_author}}
|
||||
<span>{{reading_time}}</span>
|
||||
{{#if primary_tag}}
|
||||
<span class="meta-divider">/</span>
|
||||
<a class="meta-pill" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
|
||||
{{/if}}
|
||||
<span class="meta-divider">/</span>
|
||||
<span class="meta-item">{{reading_time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{#if feature_image}}
|
||||
|
||||
Reference in New Issue
Block a user