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

theme: 홈 피드·사이드바·유저 메뉴 동작 보정

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-16 13:59:49 +09:00
parent f839a1fba7
commit b380820bb6
13 changed files with 397 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
partials/lists/post-feed.hbs
View File

@@ -1,9 +1,63 @@
<div class="post-feed" data-load-more-root>
{{#if show_filter}}
<div class="section-filter">
<span>Latest posts</span>
<section class="px-5 sm:px-6 py-4" data-home-featured>
<div class="max-w-content mx-auto">
{{#get "posts" filter="featured:true" limit="12" include="authors,tags"}}
{{#if posts}}
<section data-featured-slider>
<div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
<h2 class="text-sm uppercase font-medium text-typ-tone">Featured</h2>
<div class="flex justify-between gap-2">
<button class="cursor-pointer hover:opacity-75 disabled:opacity-40" data-featured-prev type="button">
<i class="icon icon-chevron-left size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M15 6l-6 6l6 6"></path>
</svg>
</i>
<span class="sr-only">Previous</span>
</button>
<button class="cursor-pointer hover:opacity-75 disabled:opacity-40" data-featured-next type="button">
<span class="sr-only">Next</span>
<i class="icon icon-chevron-right size-4 stroke-2" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" 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>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</i>
</button>
</div>
</div>
<div class="overflow-hidden mt-4">
<div class="featured-slider flex gap-4 sm:gap-5 overflow-x-auto snap-x snap-mandatory scroll-smooth" data-featured-track style="scrollbar-width: none; -ms-overflow-style: none;">
{{#foreach posts}}
<a href="{{url}}" class="featured-slider__item relative bg-bgr-tone block group shrink-0 snap-start basis-[78%] sm:basis-[58%] lg:basis-[38%]">
{{#if feature_image}}
<figure class="relative block rounded-theme overflow-hidden contrast-125 brightness-75 group-hover:contrast-110 group-hover:brightness-90 transition-all" role="none">
<img class="w-full aspect-video object-cover rounded-[inherit]" src="{{img_url feature_image size="m"}}" alt="{{title}}">
</figure>
<h2 class="text-white absolute bottom-0 left-0 w-full px-3 mb-2.5 text-sm font-medium leading-tight line-clamp-2 text-ellipsis">{{title}}</h2>
{{else}}
<figure class="relative rounded-theme overflow-hidden bg-bgr-tone aspect-video border border-brd p-3 flex items-end" role="none">
<h2 class="text-typ w-full text-sm font-medium leading-tight line-clamp-2 text-ellipsis">{{title}}</h2>
</figure>
{{/if}}
</a>
{{/foreach}}
</div>
</div>
</section>
{{/if}}
{{/get}}
</div>
</section>
<section class="px-5 sm:px-6 py-4" data-home-latest>
<div class="max-w-content mx-auto">
<div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
<h2 class="text-sm uppercase font-medium text-typ-tone">Latest</h2>
</div>
{{/if}}
{{> "lists/post-items" posts=posts}}
{{pagination}}
</div>
<div class="flex flex-col gap-8 mb-8 mt-1" data-load-more-root>
{{> "lists/post-items" posts=posts}}
{{pagination}}
</div>
</div>
</section>

6
partials/lists/post-items.hbs
View File

@@ -14,8 +14,10 @@
<h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
<a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
{{#if featured}}
<span data-post-featured class="icon icon-bolt size-4 stroke-1 fill-current5">
<img class="size-4 -mt-0.5" src="{{asset "icons/bolt.svg"}}" alt="">
<span data-post-featured="" class="inline-flex text-brand -mr-0.5 [&amp;_svg]:-mt-0.5">
<i class="icon icon-bolt size-4 stroke-1 fill-current" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bolt"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path></svg>
</i>
</span>
{{/if}}
<span>{{title}}</span>

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

@@ -1,4 +1,4 @@
<aside class="sidebar sidebar--left">
<aside class="sidebar sidebar--left h-full flex flex-col">
<nav class="menu-groups border-b border-brd pl-4 pr-3 sm:pl-5 xl:pl-0 py-3" data-nav="menu" data-primary-nav x-data="{ homePagesOpen: true, membersOpen: false }">
<ul class="menu-groups__list flex flex-col gap-0.75 text-typ text-sm">
<li class="menu-group menu-group--nav nav-toggle is-mainitem flex items-center flex-wrap w-full relative group" :class="{ 'is-open': homePagesOpen }" data-label="Home pages" data-slug="home-pages" data-length="10" aria-haspopup="true">
@@ -78,27 +78,36 @@
</div>
</section>
<section class="px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5 border-b border-brd">
<div class="sidebar-card__header">
<h2>Authors</h2>
</div>
<div class="author-list">
<section class="sidebar-card sidebar-card--authors border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ authorsOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { authorsOpen = window.innerWidth >= 1024 })" data-sidebar-authors>
<button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="authorsOpen = !authorsOpen" :aria-expanded="authorsOpen.toString()">
<span class="sidebar-card__eyebrow uppercase font-medium text-xs">Authors</span>
<span class="sidebar-card__chevron" aria-hidden="true">
<img x-show="!authorsOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
<img x-show="authorsOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
</span>
</button>
<ul class="sidebar-card__content sidebar-card__content--authors flex flex-col gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5" x-cloak x-show="authorsOpen">
{{#get "authors" limit="4" include="count.posts"}}
{{#foreach authors}}
<a class="author-list__item" href="{{url}}">
{{#if profile_image}}
<img class="avatar" src="{{img_url profile_image size="xxs"}}" alt="{{name}}">
{{else}}
<span class="avatar avatar--fallback">A</span>
{{/if}}
<span class="author-list__body">
<strong>{{name}}</strong>
<small>{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</small>
</span>
</a>
{{#foreach authors}}
<li>
<a href="{{url}}" class="group relative flex items-center gap-1.5 leading-tight pl-0 pr-3 py-1 rounded-theme hover:text-typ hover:bg-[#f5f5f5] transition-[padding] min-h-8 md:min-h-10 hover:pl-7" aria-label="{{name}}">
{{#if profile_image}}
<figure class="size-6 md:size-7 rounded-full overflow-hidden transition-all group-hover:size-0">
<img class="w-full h-full object-cover rounded-full" src="{{img_url profile_image size="s"}}" alt="">
</figure>
{{else}}
<span class="size-6 md:size-7 rounded-full bg-bgr-tone flex items-center justify-center text-[11px] transition-all group-hover:size-0">A</span>
{{/if}}
<span class="absolute left-3.5 top-1/2 z-10 block size-2 rounded-full opacity-0 scale-75 -translate-y-1/2 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-x-0" style="background-color: var(--accent);"></span>
<span class="flex-1 min-w-0 flex flex-col gap-0.5 group-hover:gap-0 overflow-hidden">
<span class="line-clamp-1 text-ellipsis leading-none">{{name}}</span>
<span class="text-xs text-typ-tone leading-none line-clamp-1 text-ellipsis opacity-75 group-hover:invisible group-hover:w-0 group-hover:h-0 group-hover:opacity-0 transition-all group-hover:translate-y-full">{{#if role}}{{role}}{{else}}Author{{/if}}</span>
</span>
</a>
</li>
{{/foreach}}
{{/get}}
</div>
</ul>
</section>
<span class="flex-1"></span>
@@ -111,5 +120,5 @@
<li><a href="{{@custom.footer_quaternary_url}}">{{@custom.footer_quaternary_link}}</a></li>
</ul>
<button class="flex items-center self-start gap-1 p-1 size-6 rounded-theme hover:bg-bgr-tone cursor-pointer text-xs font-medium" data-theme-toggle aria-label="Toggle theme">◐</button>
</footer>
</nav>
</aside>

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

@@ -1,4 +1,4 @@
<aside class="sidebar sidebar--right">
<aside class="sidebar sidebar--right h-full flex flex-col">
{{#is "post"}}
{{#post}}
{{#primary_author}}
@@ -102,7 +102,7 @@
</section>
{{/post}}
{{/is}}
<span class="md:flex-1"></span>
<span class="flex-1"></span>
<footer class="px-5 sm:px-6 xl:pr-1">
<div class="py-3 flex flex-col items-start justify-start text-typ-tone text-xs">
©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.

92
partials/site/topbar.hbs
View File

@@ -16,10 +16,96 @@
<span class="search-shortcut">/</span>
</button>
</div>
<div class="topbar__actions flex h-full items-center justify-end gap-2 px-4">
<button class="icon-button icon-button--search-mobile inline-flex items-center justify-center rounded-theme border border-brd bg-bgr hover:bg-bgr-tone" type="button" data-search-open aria-label="Open search">
<img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
<div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4">
<button class="icon-button icon-button--user-menu inline-flex items-center justify-center rounded-theme border border-brd bg-bgr hover:bg-bgr-tone overflow-hidden" type="button" aria-label="Open user menu" data-user-menu-toggle>
{{#if @member}}
{{#if @member.avatar_image}}
<img class="w-full h-full object-cover" src="{{@member.avatar_image}}" alt="{{@member.name}}">
{{else}}
<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" role="presentation" aria-hidden="true">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"></path>
</svg>
{{/if}}
{{else}}
<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" role="presentation" aria-hidden="true">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"></path>
</svg>
{{/if}}
</button>
<div class="z-50 p-3 pb-2 flex flex-col text-sm bg-bgr border border-brd rounded-theme absolute top-12 right-0 -translate-y-4 opacity-0 invisible pointer-events-none transition-[transform,opacity,visibility,scale] min-w-[200px] max-w-xs overflow-hidden font-medium scale-95 shadow-md" style="background-color: var(--bg);" data-user-menu>
<div class="flex items-center gap-2 border-b border-brd pb-3 mb-2">
<div class="size-8 md:size-10 rounded-full overflow-hidden bg-bgr-tone">
{{#if @member}}
{{#if @member.avatar_image}}
<img class="size-8 md:size-10 object-cover" src="{{@member.avatar_image}}" alt="{{@member.name}}">
{{else}}
<span class="size-8 md:size-10 flex items-center justify-center uppercase font-normal text-base md:text-lg">@</span>
{{/if}}
{{else}}
<span class="size-8 md:size-10 flex items-center justify-center uppercase font-normal text-base md:text-lg">@</span>
{{/if}}
</div>
<div class="flex gap-0.5 flex-col">
<div class="line-clamp-1 text-ellipsis leading-[1.15] max-w-xs">{{#if @member}}{{@member.name}}{{else}}Anonymous{{/if}}</div>
</div>
</div>
{{#if @member}}
<a href="#/portal/account" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
<i class="icon icon-login size-5 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">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 0"></path>
<path d="M12 3l0 6"></path>
<path d="M5 12a7 7 0 0 0 14 0a7 7 0 0 0 -14 0"></path>
</svg>
</i>
<span>Account</span>
</a>
{{else}}
<a href="#/portal/signup" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
<i class="icon icon-signup size-5 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">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
<path d="M15 9l-6 6"></path>
<path d="M15 15v-6h-6"></path>
</svg>
</i>
<span>Sign up</span>
</a>
<a href="#/portal/signin" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
<i class="icon icon-login size-5 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">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
<path d="M21 12h-13l3 -3"></path>
<path d="M11 15l-3 -3"></path>
</svg>
</i>
<span>Sign in</span>
</a>
{{/if}}
<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>
</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>
</button>
</div>
</div>
{{#if @custom.show_admin_link}}
<a class="button button--accent rounded-theme" href="/ghost/">Admin</a>
<a class="icon-button icon-button--profile rounded-full border border-brd bg-bgr hover:bg-bgr-tone" href="/ghost/" aria-label="Ghost admin"><span></span></a>