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

v0.1.30 본문 타이포그래피와 태그 배지 보정

Browse Source
This commit is contained in:
zenn
2026-04-14 12:43:35 +09:00
parent 4c460e62fc
commit 8c591b3b93
12 changed files with 285 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
partials/home/tabbed-feed.hbs
View File

@@ -1,5 +1,6 @@
<section class="stack-section home-feed" data-tabs data-home-content>
<div class="tab-row-wrap home-feed__toolbar">
<section class="px-5 sm:px-6 py-4" data-tabs data-home-content>
<div class="max-w-content mx-auto">
<div class="flex gap-2 items-center justify-between border-b border-brd pb-2">
<div class="tab-row home-feed__tabs" role="tablist" aria-label="Homepage sections">
<button class="tab-row__button is-active" type="button" data-tab-trigger="latest">Latest</button>
<button class="tab-row__button" type="button" data-tab-trigger="featured">Featured</button>
@@ -12,7 +13,7 @@
</button>
</div>
<div class="tab-panel is-active" data-tab-panel="latest">
<div class="flex flex-col gap-8 mb-8 is-active" data-tab-panel="latest">
{{> "lists/post-feed"}}
</div>
@@ -54,4 +55,5 @@
{{/get}}
</div>
</div>
</div>
</section>

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

@@ -1,7 +1,7 @@
<div class="post-list home-post-list">
<div class="post-list home-post-list flex flex-col divide-y divide-brd">
{{#foreach posts}}
<article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden border-b border-brd" data-post-card{{#if featured}} data-featured{{/if}}>
<a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16">
<article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden" data-post-card{{#if featured}} data-featured{{/if}}>
<a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16 ">
{{#if feature_image}}
<figure class="block rounded-theme overflow-hidden" role="none">
<img class="w-full aspect-square sm:aspect-video object-cover rounded-[inherit] hover:opacity-90 transition-all blur-0" src="{{img_url feature_image size="s"}}" alt="{{title}}">
@@ -10,7 +10,7 @@
<span class="block w-full aspect-square sm:aspect-video rounded-theme bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
{{/if}}
</a>
<div class="relative min-w-0 flex-[3] md:flex-[4] flex flex-col gap-1.5 justify-between" data-post-card-content>
<div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-1.5 justify-between " data-post-card-content>
<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}}
@@ -24,14 +24,12 @@
{{#if excerpt}}
<p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1" data-post-card-excerpt>{{excerpt words="24"}}</p>
{{/if}}
<div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone" data-post-card-info>
<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>
<time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
{{#primary_author}}
<span class="opacity-70">/</span>
<a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
{{/primary_author}}
{{#primary_tag}}
<span class="opacity-70">/</span>
<ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
<li{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
<a href="{{url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{name}}</a>
@@ -39,13 +37,11 @@
</ul>
{{/primary_tag}}
{{#unless access}}
<span class="opacity-70">/</span>
<span class="font-medium">Members</span>
{{/unless}}
<span class="opacity-70">/</span>
<a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="{{url}}#ghost-comments">
<img class="size-3.5 -mt-px pointer-events-none" src="{{asset "icons/chat_bubble.svg"}}" alt="">
{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}
<span class="pointer-events-none">{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}</span>
</a>
</div>
<button data-post-share-toggle class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">