v0.1.43 theme: 관련글 우선순위 및 레이아웃 UI 보정

Made-with: Cursor

assets/built/screen.css

@@ -126,6 +126,31 @@ menu {
     min-width: 0;
 }
 
+body.tag-hash-ld .sidebar--left,
+body.tag-hash-ld .sidebar--right {
+    display: none;
+}
+
+body.tag-hash-ld .topbar {
+    display: none;
+}
+
+body.tag-hash-ld .site-shell {
+    display: block;
+    width: 100%;
+    max-width: 720px;
+    min-height: 0;
+}
+
+body.tag-hash-ld .site-main {
+    width: 100%;
+    max-width: 100%;
+}
+
+body.tag-hash-ld .post-header {
+    display: none;
+}
+
 .sidebar {
     border-right: 1px solid var(--border);
     background: var(--bg);
@@ -661,22 +686,23 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
     height: 28px;
     border: 0;
     background: transparent;
-    color: var(--text-dim);
+    color: var(--text);
     cursor: pointer;
     border-radius: 8px;
     padding: 0;
 }
 
-.topbar__sidebar-toggle:hover {
-    background: var(--surface-muted);
-}
-
 .topbar__sidebar-toggle-icon {
     width: 24px;
     height: 24px;
     display: block;
 }
 
+.topbar__sidebar-toggle-icon--open-hover,
+.topbar__sidebar-toggle-icon--close-hover {
+    display: none;
+}
+
 .topbar__sidebar-toggle-icon--close {
     display: none;
 }
@@ -689,6 +715,14 @@ body.left-sidebar-collapsed .topbar__sidebar-toggle-icon--close {
     display: none;
 }
 
+body.left-sidebar-collapsed .topbar__sidebar-toggle:hover .topbar__sidebar-toggle-icon--open {
+    display: none;
+}
+
+body.left-sidebar-collapsed .topbar__sidebar-toggle:hover .topbar__sidebar-toggle-icon--open-hover {
+    display: block;
+}
+
 body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--open {
     display: none;
 }
@@ -697,6 +731,14 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     display: block;
 }
 
+body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar-toggle-icon--close {
+    display: none;
+}
+
+body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar-toggle-icon--close-hover {
+    display: block;
+}
+
 .topbar__search {
     display: flex;
     justify-content: center;

assets/built/theme.js

@@ -275,6 +275,7 @@
         if (userThemeTrack) {
             userThemeTrack.classList.toggle("bg-accent", isDark);
             userThemeTrack.classList.toggle("bg-brd", !isDark);
+            userThemeTrack.style.backgroundColor = isDark ? "var(--accent)" : "var(--border)";
         }
         if (userThemeThumb) {
             userThemeThumb.classList.toggle("translate-x-3.5", isDark);
@@ -284,6 +285,7 @@
         if (userMenuTrack) {
             userMenuTrack.classList.toggle("bg-accent", menuOpen);
             userMenuTrack.classList.toggle("bg-brd", !menuOpen);
+            userMenuTrack.style.backgroundColor = menuOpen ? "var(--accent)" : "var(--border)";
         }
         if (userMenuThumb) {
             userMenuThumb.classList.toggle("translate-x-3.5", menuOpen);
@@ -487,6 +489,53 @@
         initializeLoadMore(rootNode);
     });
 
+    function initializeCategoryPriority() {
+        document.querySelectorAll("[data-category-priority-list]").forEach(function (list) {
+            var items = Array.prototype.slice.call(list.querySelectorAll("[data-category-priority-item]"));
+            var priorityOrder = (list.dataset.categoryPriorityOrder || "")
+                .split(",")
+                .map(function (slug) {
+                    return slug.trim();
+                })
+                .filter(Boolean);
+            var limit = Number(list.dataset.categoryPriorityLimit || items.length);
+
+            if (!items.length) {
+                return;
+            }
+
+            items.sort(function (leftItem, rightItem) {
+                var leftSlug = leftItem.dataset.categorySlug || "";
+                var rightSlug = rightItem.dataset.categorySlug || "";
+                var leftIndex = priorityOrder.indexOf(leftSlug);
+                var rightIndex = priorityOrder.indexOf(rightSlug);
+                var leftPinned = leftIndex !== -1;
+                var rightPinned = rightIndex !== -1;
+
+                if (leftPinned && rightPinned) {
+                    return leftIndex - rightIndex;
+                }
+
+                if (leftPinned) {
+                    return -1;
+                }
+
+                if (rightPinned) {
+                    return 1;
+                }
+
+                return 0;
+            });
+
+            items.forEach(function (item, index) {
+                list.appendChild(item);
+                item.hidden = index >= limit;
+            });
+        });
+    }
+
+    initializeCategoryPriority();
+
     document.querySelectorAll("[data-featured-slider]").forEach(function (sliderRoot) {
         var track = sliderRoot.querySelector("[data-featured-track]");
         var prev = sliderRoot.querySelector("[data-featured-prev]");

docs/deploy.md

@@ -1,7 +1,7 @@
 # 배포 가이드
 
 ## 현재 버전
-- `v0.1.41`
+- `v0.1.43`
 
 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.

docs/history.md

@@ -1,5 +1,14 @@
 # 의사결정 이력
 
+## 2026-04-16 v0.1.43
+포스트 상세의 `Read next`가 최신 글만 노출되면 홈 목록과 중복되어 탐색 가치가 낮아진다는 요구에 맞춰, 우선순위를 `primary_tag` 관련 글로 전환했다. 태그 기반 결과가 없을 때만 현재 글 제외 최신 글을 fallback으로 노출하도록 구성해, 관련성 우선과 빈 상태 회피를 함께 만족시키는 방식으로 정리했다.
+
+## 2026-04-16 v0.1.42
+랜딩 용도 페이지는 별도 템플릿 분기보다 콘텐츠 태그(`#LD`)로 제어하는 쪽이 운영이 단순하다는 요구에 맞춰, `tag-hash-ld` 조건에서 레이아웃을 단일 컬럼으로 강제했다. 이 모드에서는 좌우 사이드바를 숨기고 `.site-shell` 최대 폭을 720px로 제한하며, `post-header`를 숨겨 본문 중심 구성으로 고정했다.
+
+## 2026-04-16 v0.1.42
+사이드바 카테고리는 단순 `limit`만 걸어두면 Ghost 기본 순서나 게시물 수 기준만으로 잘려서, 운영자가 원하는 태그를 항상 노출하기 어려웠다. 수동 우선순위와 자동 정렬을 함께 만족시키기 위해, 템플릿에서는 태그를 게시물 수 기준으로 넉넉히 가져오고 프런트에서 지정한 slug 목록만 앞쪽으로 재배치한 뒤 최종 노출 개수를 제한하는 방식으로 정리했다. 이렇게 하면 우선 노출 태그는 코드에서 명시적으로 관리할 수 있고, 나머지 슬롯은 여전히 게시물 수 많은 순서로 자연스럽게 채워진다.
+
 ## 2026-04-16 v0.1.41
 Ghost Portal Recommendations 모달의 제목/설명은 렌더링 시점이 일정하지 않고, 경우에 따라 iframe 문서 내부에서 생성되어 기존 문서 단일 선택자 접근으로는 치환이 실패했다. 또한 이전 구현은 전역 `MutationObserver`를 상시 감시로 두고 있어 페이지 체감 지연 가능성이 있었다. 그래서 클릭 시점에 한정해 메인 문서와 접근 가능한 iframe 문서를 함께 탐색하고, 짧은 재시도 구간에서만 텍스트를 치환하는 방식으로 변경했다. 이 방식은 치환 성공률을 높이면서도 상시 관찰 비용을 제거해 안정성을 높인다.
 

docs/map.md

@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드
 
 ## 현재 버전
-- `v0.1.41`
+- `v0.1.43`
 
 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.1.41`
+- `v0.1.43`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -19,6 +19,7 @@
 - `npm run dev:watch`는 초기 `dev:prepare` 실행 후 Tailwind `--watch`와 파일 변경 감지 기반 `dev:sync`를 함께 실행함
 - `npm run zip:version`은 현재 `package.json` 버전명을 기준으로 업로드용 zip을 생성함
 - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
+- 좌측 카테고리 목록은 `data-category-priority-order`에 지정한 태그 slug를 우선순위로 먼저 배치하고, 나머지는 `count.posts desc` 기본 순서를 유지한 뒤 제한 개수만 노출함
 - 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용
 - 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용
 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
@@ -28,6 +29,7 @@
 - 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함
 - 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함
 - 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함
+- 포스트 상세 우측 `Read next`는 `primary_tag` 기준 관련 글을 우선 노출하고, 관련 글이 없으면 최신 글(현재 글 제외)로 대체함
 - Recommendations Portal 모달의 제목/설명은 트리거 버튼의 `data-portal-title`, `data-portal-description` 값으로 오픈 시점에 동기화함
 - 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용
 - 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
@@ -36,6 +38,9 @@
 - 본문 `ul`, `ol`은 전역 리스트 리셋과 별개로 `prose` 범위 안에서 실제 마커와 들여쓰기를 다시 적용함
 - 태그 배지는 `--color-accent` 기반 배경 혼합색(`bg-accent/10`, `hover:bg-accent/5`)을 사용함
 - 홈 Latest, 기본 index, 태그 아카이브, 작성자 아카이브의 목록 영역은 `Load More` 버튼 기반 확장형 페이지네이션을 사용함
+- `body`에 `tag-hash-ld`가 있는 페이지는 좌/우 사이드바를 숨기고, `.site-shell`을 단일 블록(최대 폭 720px)으로 전환함
+- `tag-hash-ld` 페이지에서는 `topbar`도 숨겨 랜딩 본문만 노출함
+- `tag-hash-ld` 페이지에서는 `.post-header`를 숨기고 페이지 본문만 노출함
 
 ## 주요 스타일 방향
 - 밝은 크림톤 배경 + 오렌지 포인트

docs/update.md

@@ -1,5 +1,29 @@
 # 업데이트 로그
 
+## v0.1.43 - 2026-04-16
+- `package.json` 버전을 `0.1.43`으로 증가.
+- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.1.43`으로 동기화.
+- `docs/history.md`에 `v0.1.43` 의사결정 이력(`Read next` 태그 우선화) 추가.
+- `partials/site/sidebar-right.hbs` `Read next` 목록을 현재 글 `primary_tag` 기준 관련 글 우선 노출로 변경하고, 결과가 없으면 최신 글(현재 글 제외)로 fallback 처리.
+
+## v0.1.42 - 2026-04-16
+- 좌측 카테고리 목록에 slug 기반 우선순위 정렬 기능 추가.
+- 우선순위에 없는 태그는 게시물 수 내림차순 기본 순서를 유지하도록 정리.
+- 카테고리 노출 제한을 우선순위 재정렬 이후 `11개`로 적용하도록 수정.
+- `partials/site/topbar.hbs` 유저 메뉴 토글 스위치에 기준 마크업과 동일한 트랙/썸 전환 클래스를 보강해 활성 상태 대비를 개선.
+- `post.hbs` 상단 메타 구분자(`/`)를 마지막 항목 제외 패턴으로 보정하고, 댓글 수를 항상 `0`으로 표시하도록 수정.
+- 랜딩 샘플 템플릿(`default-landing`, `custom-landing`, `page-landing-page`) 및 관련 문서 항목 제거.
+- `assets/built/screen.css` `tag-hash-ld` 기반 레이아웃 전환 규칙 제거.
+- `assets/built/theme.js` 유저 메뉴 토글 트랙 배경을 활성 시 `--accent`, 비활성 시 `--border`로 명시 지정.
+- `partials/site/topbar.hbs`, `assets/built/screen.css` 좌측 사이드바 토글 버튼을 이미지 2개 방식에서 상태/hover별 아이콘 4개 전환 방식으로 교체.
+- `post.hbs` 댓글 비활성 안내 블록 텍스트/링크 색상을 `text-typ`, `text-typ-tone`, `text-accent` 기준으로 정리해 다크모드 대비를 보정.
+- `assets/built/screen.css` `tag-hash-ld` 페이지에서 좌우 사이드바를 숨기고 `.site-shell`을 단일 블록/최대폭 720px으로 전환하도록 수정.
+- `assets/built/screen.css` `tag-hash-ld` 페이지에서 `topbar`를 숨기도록 수정.
+- `assets/built/screen.css` `tag-hash-ld` 페이지에서 `.post-header`를 숨기도록 수정.
+- `page.hbs` 페이지 본문 래퍼의 상하 마진(`mt-6`, `mb-8`)을 제거.
+- `partials/site/topbar.hbs`, `assets/built/screen.css` 좌측 사이드바 토글 아이콘 색상을 `--text`로 통일하고 hover 배경 변경을 제거.
+- `post.hbs` 댓글 비활성 안내 영역의 `Sign up now` 버튼/`Sign in` 링크 색상을 브랜드 계열(`bg-orange-600`, `text-orange-600`)로 보정해 라이트 모드 가독성을 복구.
+
 ## v0.1.41 - 2026-04-16
 - `package.json` 버전을 `0.1.41`로 증가.
 - `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.1.41`로 동기화.

package.json

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

page.hbs

@@ -1,7 +1,7 @@
 {{!< default}}
 
 {{#post}}
-<main class="px-4 sm:px-[max(2vmin,20px)] mt-6 mb-8">
+<main class="px-4 sm:px-[max(2vmin,20px)]">
     <article class="post-template page-template {{post_class}}">
         {{#match @page.show_title_and_feature_image}}
             <header class="post-header">

partials/site/sidebar-left.hbs

@@ -62,10 +62,12 @@
                 </span>
             </button>
             <div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
-                <ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5">
-                    {{#get "tags" limit="11" include="count.posts"}}
+                <ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5" data-category-priority-list 
+                    data-category-priority-order="tech,business,health,science,design,travel,gaming,music,diy,photography,books" 
+                    data-category-priority-limit="11">
+                    {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
                         {{#foreach tags}}
-                            <li>
+                            <li data-category-priority-item data-category-slug="{{slug}}">
                                 <a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-theme hover:bg-bgr-tone hover:px-3 hover:text-typ transition-[padding]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
                                     <span class="category-chip__dot w-1 h-4 bg-accent rounded-sm rounded-l-none group-hover:size-2 group-hover:rounded-full transition-all"></span>
                                     <span class="category-chip__label flex-1 line-clamp-1 text-ellipsis">{{name}}</span>

partials/site/sidebar-right.hbs

@@ -102,14 +102,28 @@
             {{#post}}
                 <section class="px-4 sm:px-5 py-4 sm:py-5 xl:pr-1 flex flex-col gap-1.5 border-b border-brd">
                     <div class="flex items-center justify-between gap-2 mb-1">
-                        <h2 class="uppercase font-medium text-xs text-typ-tone">Read next</h2>
+                        <h2 class="uppercase font-bold text-xs text-typ-tone">Read next</h2>
                     </div>
                     <ul class="flex flex-col gap-0.5 rounded-theme overflow-hidden">
-                        {{#get "posts" filter=(concat "id:-" id) limit="4"}}
-                            {{#foreach posts}}
-                                <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
-                            {{/foreach}}
-                        {{/get}}
+                        {{#if primary_tag}}
+                            {{#get "posts" filter=(concat "id:-" id "+tag:" primary_tag.slug) limit="4"}}
+                                {{#foreach posts}}
+                                    <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
+                                {{/foreach}}
+                            {{else}}
+                                {{#get "posts" filter=(concat "id:-" id) limit="4"}}
+                                    {{#foreach posts}}
+                                        <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
+                                    {{/foreach}}
+                                {{/get}}
+                            {{/get}}
+                        {{else}}
+                            {{#get "posts" filter=(concat "id:-" id) limit="4"}}
+                                {{#foreach posts}}
+                                    <li class="style-none"><a href="{{url}}" class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75"><h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden">{{title}}</h3></a></li>
+                                {{/foreach}}
+                            {{/get}}
+                        {{/if}}
                     </ul>
                 </section>
             {{/post}}

partials/site/topbar.hbs

@@ -1,9 +1,27 @@
 <header class="topbar border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
     <div class="topbar__inner mx-auto">
         <div class="topbar__brand flex h-full items-center gap-3 px-4">
-            <button class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme hover:bg-bgr-tone" 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 class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme group" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
+                <span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open">
+                    <i class="icon icon-layout-sidebar size-6 stroke-2" role="presentation">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4l0 16"></path></svg>
+                    </i>
+                </span>
+                <span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open-hover">
+                    <i class="icon icon-layout-sidebar-expand size-6 stroke-2" role="presentation">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar-left-expand"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg>
+                    </i>
+                </span>
+                <span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close">
+                    <i class="icon icon-layout-sidebar-active size-6 stroke-0 fill-current" role="presentation">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm12 -16h-8v14h8a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1"></path></svg>
+                    </i>
+                </span>
+                <span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close-hover">
+                    <i class="icon icon-layout-sidebar-collapse size-6 stroke-0 fill-current" role="presentation">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z"></path></svg>
+                    </i>
+                </span>
             </button>
             <a class="brand brand--topbar inline-flex items-center gap-2.5 whitespace-nowrap" href="{{@site.url}}">
                 <span class="brand__name">{{@site.title}}</span>
@@ -11,7 +29,13 @@
         </div>
         <div class="topbar__search flex h-full items-center justify-center px-4">
             <button class="search-trigger flex w-full max-w-xs items-center gap-2.5 rounded-xl border border-brd bg-bgr px-3.5 py-2 text-sm text-typ-tone transition-colors hover:bg-bgr-tone hover:text-typ" type="button" data-search-open aria-label="Open search">
-                <img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
+                <i class="icon icon-search size-5 md:size-4 stroke-2 md:stroke-[2.25] fill-bgr-tone [&amp;&gt;svg]:fill-inherit" role="presentation">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <circle cx="10" cy="10" r="7"></circle>
+                        <line x1="21" y1="21" x2="15" y2="15"></line>
+                    </svg>
+                </i>
                 <span>Search</span>
                 <span class="search-shortcut">/</span>
             </button>
@@ -94,14 +118,14 @@
                 <div class="flex flex-col gap-0.5 items-center justify-between border-t border-brd mt-2 pt-2">
                     <button class="group flex items-center justify-between gap-1.5 py-1 pl-0.5 rounded-theme w-full cursor-pointer text-typ-tone hover:text-typ" type="button" data-user-theme-toggle>
                         <span class="uppercase text-xs">Dark mode</span>
-                        <span class="inline-flex h-[18px] w-8 shrink-0 rounded-full border-2 border-transparent bg-brd" data-user-theme-track>
-                            <span aria-hidden="true" class="pointer-events-none inline-block size-3.5 transform rounded-full bg-white shadow ring-0 transition" data-user-theme-thumb></span>
+                        <span class="inline-flex h-[18px] w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-brd transition-colors duration-200 group-focus:outline-none group-focus:ring-0" data-user-theme-track>
+                            <span aria-hidden="true" class="pointer-events-none inline-block size-3.5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200" data-user-theme-thumb></span>
                         </span>
                     </button>
                     <button class="group flex items-center justify-between gap-1.5 py-1 pl-0.5 rounded-theme w-full cursor-pointer text-typ-tone hover:text-typ" type="button" data-user-menu-state-toggle>
                         <span class="uppercase text-xs">Menu open</span>
-                        <span class="inline-flex h-[18px] w-8 shrink-0 rounded-full border-2 border-transparent bg-brd" data-user-menu-track>
-                            <span aria-hidden="true" class="pointer-events-none inline-block size-3.5 transform rounded-full bg-white shadow ring-0 transition" data-user-menu-thumb></span>
+                        <span class="inline-flex h-[18px] w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-brd transition-colors duration-200 group-focus:outline-none group-focus:ring-0" data-user-menu-track>
+                            <span aria-hidden="true" class="pointer-events-none inline-block size-3.5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200" data-user-menu-thumb></span>
                         </span>
                     </button>
                 </div>

post.hbs

@@ -7,7 +7,7 @@
                 <h1 class="font-semibold text-xl sm:text-2xl leading-[1.125]">{{title}}</h1>
 
                 <div class="relative border-b border-brd pb-4">
-                    <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone *:after:content-['/'] *:after:ml-2 sm:*:after:ml-1.5 *:after:text-brd *:last:after:hidden!" data-post-card-info>
+                    <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd" data-post-card-info>
                         <time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
                         {{#primary_author}}
                             <a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
@@ -20,11 +20,11 @@
                             </ul>
                         {{/if}}
                         {{!-- {{#if comments}} --}}
-                            <a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="#comments">
+                            <a data-post-card-comments class="flex gap-1 items-center hover:opacity-75" href="#comments">
                                 <i class="icon icon-comments size-3.5 stroke-2 -mt-px pointer-events-none" role="presentation">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path></svg>
                                 </i>
-                                <span class="pointer-events-none">{{comment_count empty="0" singular="" plural="" autowrap="false"}}</span>
+                                <span class="pointer-events-none">0</span>
                             </a>
                         {{!-- {{/if}} --}}
                     </div>
@@ -73,10 +73,10 @@
             {{comments title="Comments" count=true}}
         {{else}}
             <div class="flex flex-col items-center py-6 sm:px-8 sm:py-10">
-                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight  text-black font-bold">Join the discussion</h3>
-                <p class="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-neutral-600 sm:max-w-screen-sm sm:px-8">Become a member of <span class="font-semibold">{{@site.title}}</span> to start commenting.</p>
+                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight text-typ font-bold">Join the discussion</h3>
+                <p class="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-typ-tone sm:max-w-screen-sm sm:px-8">Become a member of <span class="font-semibold text-typ">{{@site.title}}</span> to start commenting.</p>
                 <a class="text-md mb-[12px] inline-block rounded px-5 py-[14px] font-sans font-medium leading-none text-white transition-all hover:opacity-90 bg-orange-600" href="#/portal/signup">Sign up now</a>
-                <p class="text-md text-center font-sans text-[rgba(0,0,0,0.4)]"><span class="mr-1 inline-block text-[15px]">Already a member?</span> <a href="#/portal/signin" class="rounded-md text-sm text-orange-600 font-semibold transition-all hover:opacity-90">Sign in</a></p>
+                <p class="text-md text-center font-sans text-typ-tone"><span class="mr-1 inline-block text-[15px]">Already a member?</span> <a href="#/portal/signin" class="rounded-md text-sm text-orange-600 font-semibold transition-all hover:opacity-90">Sign in</a></p>
             </div>
         {{/if}}
     </section>