theme: 홈 피드·사이드바·유저 메뉴 동작 보정
Made-with: Cursor
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user