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

v0.1.26 포스트 카드 테일윈드 정리

Browse Source
This commit is contained in:
zenn
2026-04-14 11:25:51 +09:00
parent b29685e959
commit 36245ae37e
10 changed files with 1138 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,47 +1,55 @@
<div class="post-list home-post-list">
{{#foreach posts}}
<article class="post-card{{#if featured}} is-featured{{/if}}">
<a class="post-card__media" href="{{url}}">
<article class="post {{post_class}} relative flex flex-row 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="post-card__figure" role="none">
<img src="{{img_url feature_image size="s"}}" alt="{{title}}">
<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}}">
</figure>
{{else}}
<span class="post-card__media-fallback">{{title}}</span>
<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="post-card__content">
<h2 class="post-card__title">
<a href="{{url}}">
<div class="relative 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}}
<img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
<span data-post-featured class="inline-flex text-brand -mr-0.5 shrink-0">
<img class="size-4 -mt-0.5" src="{{asset "icons/bolt.svg"}}" alt="">
</span>
{{/if}}
<span>{{title}}</span>
</a>
</h2>
{{#if excerpt}}<p class="post-card__excerpt">{{excerpt words="24"}}</p>{{/if}}
<div class="post-card__meta">
<time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
{{#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>
<time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
{{#primary_author}}
<span class="meta-divider">/</span>
<a class="meta-item" href="{{url}}">{{name}}</a>
<span class="opacity-70">/</span>
<a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
{{/primary_author}}
{{#primary_tag}}
<span class="meta-divider">/</span>
<a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
<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>
</li>
</ul>
{{/primary_tag}}
{{#unless access}}
<span class="meta-divider">/</span>
<span class="meta-item meta-item--access">Members</span>
<span class="opacity-70">/</span>
<span class="font-medium">Members</span>
{{/unless}}
<span class="meta-divider">/</span>
<a class="meta-item meta-item--comments" href="{{url}}#ghost-comments">
<img class="meta-item__icon meta-item__icon--image" src="{{asset "icons/chat_bubble.svg"}}" alt="">
<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}}
</a>
</div>
<button class="post-card__share" type="button" aria-label="Share this post">
<img class="post-card__share-icon" src="{{asset "icons/arrow_outward.svg"}}" alt="">
<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">
<img class="size-4 pointer-events-none" src="{{asset "icons/arrow_outward.svg"}}" alt="">
</button>
</div>
</article>