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

테마: v0.2.8 및 상단 사용자 메뉴·검색·히어로·사이드바 누적 보정

Browse Source 
Made-with: Cursor
This commit is contained in:
zenn
2026-04-17 13:39:59 +09:00
parent 24f065e67e
commit 070425dd22
13 changed files with 540 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
partials/home/hero.hbs
View File

@@ -1,47 +1,9 @@
<section class="home-hero px-5 sm:px-6 py-6 md:py-8 relative" data-home-hero="">
<div class="max-w-content mx-auto flex gap-6">
<div class="home-hero__content z-2 flex-2 flex flex-col gap-2 items-center justify-center text-center">
<h1 class="text-xl md:text-2xl font-semibold text-balance leading-[1.125]">
Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community
</h1>
<p class="text-base text-balance text-typ-tone max-w-md leading-snug">A modern Ghost theme for curated, community-driven publishing, where members join the conversation.</p>
<form class="group relative flex w-full max-w-xs flex-col items-start mt-1" data-members-form="subscribe">
<fieldset class="w-full flex gap-2 flex-wrap text-sm">
<legend class="sr-only">Personal information</legend>
<input data-members-email="" class="text-sm bg-bgr-tone border border-brd text-typ flex-2 py-1.5 px-3 rounded-md focus:ring-0 focus:bg-bgr" type="email" autocomplete="email" placeholder="Your email" aria-label="Your email" required="" aria-required="true">
<button class="flex-1 px-3 py-1.5 text-bgr font-medium rounded-md hover:opacity-90 bg-gradient-to-b from-typ/75 to-typ/95 border border-typ cursor-pointer" type="submit">
<span class="hidden group-[.loading]:flex items-center justify-center">
<i class="icon icon-loader size-5 [&_svg]:animate-spin 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="M12 3a9 9 0 1 0 9 9"></path>
</svg>
</i>
</span>
<span class="group-[.loading]:hidden">Subscribe</span>
</button>
</fieldset>
<div data-notification="" class="absolute left-0 -bottom-16 z-50 invisible opacity-0 -translate-y-4 transition-all text-[0.8rem] text-left font-medium leading-none flex items-center w-full max-w-md rounded-md gap-2 bg-white text-black p-3 shadow-lg group-[.success]:opacity-100 group-[.success]:visible group-[.success]:translate-y-0 group-[.error]:opacity-100 group-[.error]:visible group-[.error]:translate-y-0">
<div class="hidden group-[.success]:flex items-center gap-2 flex-1">
<i class="icon icon-success size-6 text-emerald-600 fill-current" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"></path>
</svg>
</i>
<p>Great! Check your inbox and click the link.</p>
</div>
<div class="hidden group-[.error]:flex items-center gap-2 flex-1">
<i class="icon icon-error size-6 text-red-600 fill-current" role="presentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path>
</svg>
</i>
<p>Sorry, something went wrong. Please try again.</p>
</div>
</div>
</form>
</div>
</div>
</section>
{{#if @site.cover_image}}
<section
class="home-hero min-h-[216px] relative overflow-hidden"
data-home-hero=""
>
<div class="home-hero__skeleton absolute inset-0" data-home-hero-skeleton aria-hidden="true"></div>
<img class="home-hero__cover absolute inset-0 w-full h-full object-cover" src="{{@site.cover_image}}" alt="{{@site.title}}" loading="eager" fetchpriority="high" data-home-hero-image>
</section>
{{/if}}

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

@@ -1,5 +1,5 @@
<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, secondaryNavOpen: true, membersOpen: false }">
<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, secondaryNavOpen: false, 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">
<a class="menu-group__link menu-group__link--toggle flex gap-2 items-center flex-1 py-1.5 rounded-theme transition-[padding]" href="#" role="button" @click.prevent="homePagesOpen = !homePagesOpen" :aria-expanded="homePagesOpen.toString()" aria-haspopup="true">

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

@@ -130,8 +130,8 @@
{{/is}}
<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 font-blod text-gray-800">
©{{date format="YYYY"}} {{@site.title}}. Published with Ghost.
<div class="py-3 flex flex-col items-start justify-start text-xs font-blod text-gray-800">
©{{date format="YYYY"}} {{@site.title}}. All rights reserved.
</div>
</footer>
</aside>

71
partials/site/topbar.hbs
View File

@@ -24,7 +24,11 @@
</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>
{{#if @site.logo}}
<img class="max-h-8 w-auto object-contain" src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
<span class="brand__name">{{@site.title}}</span>
{{/if}}
</a>
</div>
<div class="topbar__search flex h-full items-center justify-center px-4">
@@ -41,44 +45,41 @@
</button>
</div>
<div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4 lg:px-0">
<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>
<button class="w-8 h-8 cursor-pointer icon-button--user-menu inline-flex items-center justify-center rounded-theme overflow-hidden {{#unless @member}}bg-bgr hover:bg-bgr-tone{{/unless}}" 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">
<figure class="relative w-8 h-8 pointer-events-none" data-member-avatar-figure>
<div class="flex items-center justify-center rounded-full w-8 h-8" data-member-avatar-background>
<p class="font-sans text-base font-semibold text-typ" data-member-avatar-initial data-member-avatar-seed="{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}member{{/if}}{{/if}}">{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}M{{/if}}{{/if}}</p>
</div>
<img alt="Avatar" class="absolute left-0 top-0 rounded-full w-8 h-8 object-cover {{#unless @member.avatar_image}}hidden{{/unless}}" data-member-avatar-image src="{{@member.avatar_image}}">
</figure>
{{else}}
<i class="icon icon-user pointer-events-none flex items-center justify-center w-full h-full [&_svg]:w-[62%] [&_svg]:h-[62%]" role="presentation" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="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>
</i>
{{/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>
{{#if @member}}
<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 class="size-8 md:size-10 rounded-full overflow-hidden flex items-center justify-center">
<figure class="relative w-8 h-8 md:w-10 md:h-10 pointer-events-none" data-member-avatar-figure>
<div class="flex items-center justify-center rounded-full w-8 h-8 md:w-10 md:h-10" data-member-avatar-background>
<p class="font-sans text-base font-semibold text-typ" data-member-avatar-initial data-member-avatar-seed="{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}member{{/if}}{{/if}}">{{#if @member.name}}{{@member.name}}{{else}}{{#if @member.email}}{{@member.email}}{{else}}M{{/if}}{{/if}}</p>
</div>
<img alt="Avatar" class="absolute left-0 top-0 rounded-full w-8 h-8 md:w-10 md:h-10 object-cover {{#unless @member.avatar_image}}hidden{{/unless}}" data-member-avatar-image src="{{@member.avatar_image}}">
</figure>
</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 class="line-clamp-1 text-ellipsis leading-[1.15] max-w-xs" data-member-name-display>{{#if @member.name}}{{@member.name}}{{else}}Member{{/if}}</div>
</div>
</div>
{{/if}}
{{#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">
@@ -142,7 +143,7 @@
<div class="search-modal__backdrop" data-search-close></div>
<div class="search-modal__panel">
<div class="search-modal__input">
<button type="button" class="icon-button icon-button--plain" data-search-close aria-label="Close search">×</button>
<button type="button" class="icon-button icon-button--plain" data-search-reset aria-label="Clear search">×</button>
<input type="search" placeholder="게시물, 태그, 작성자 검색" data-search-input>
</div>
<div class="search-modal__body" data-search-results>
@@ -150,3 +151,21 @@
</div>
</div>
</div>
<div hidden data-search-source>
{{#get "authors" limit="100"}}
{{#foreach authors}}
<span data-search-item data-search-type="author" data-search-title="{{name}}" data-search-url="{{url}}" data-search-image="{{#if profile_image}}{{img_url profile_image size='s'}}{{/if}}"></span>
{{/foreach}}
{{/get}}
{{#get "tags" limit="100"}}
{{#foreach tags}}
<span data-search-item data-search-type="tag" data-search-title="{{name}}" data-search-url="{{url}}"></span>
{{/foreach}}
{{/get}}
{{#get "posts" limit="150"}}
{{#foreach posts}}
<span data-search-item data-search-type="post" data-search-title="{{title}}" data-search-url="{{url}}" data-search-excerpt="{{excerpt words='24'}}"></span>
{{/foreach}}
{{/get}}
</div>