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

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

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-16 17:40:06 +09:00
parent 4ca64abfa7
commit d2aeeff2fe
14 changed files with 203 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
partials/site/sidebar-left.hbs
View File

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

26
partials/site/sidebar-right.hbs
View File

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

40
partials/site/topbar.hbs
View File

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