v0.1.11 아코디언 아이콘 및 상세 메타 수정

assets/built/screen.css

@@ -284,15 +284,36 @@ input {
 
 .menu-group__chevron {
     color: var(--text-dim);
-    font-size: 14px;
+    display: inline-flex;
-    transition: transform 0.22s ease, color 0.22s ease;
+    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;
+    }
 }

assets/icons/keyboard_arrow_down.svg

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

assets/icons/keyboard_arrow_up.svg

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

package.json

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

partials/site/sidebar-left.hbs

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

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