홈: Categories 카드 액센트·그리드·설명 처리 보정 (v0.2.5)
Made-with: Cursor
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
{{!-- 홈 Latest 하단: 태그별 최신 글 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
|
||||
{{!-- 홈 Latest 하단: 태그별 최신 글 최대 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
|
||||
<section class="px-5 sm:px-6 py-4 mb-8 home-categories" data-home-categories>
|
||||
<div class="max-w-content mx-auto">
|
||||
<div class="flex gap-2 items-end justify-between border-b border-brd pb-3">
|
||||
@@ -15,21 +15,19 @@
|
||||
{{#foreach tags}}
|
||||
{{#if count.posts}}
|
||||
<li
|
||||
class="home-categories__row p-4 pl-5 sm:pl-6 sm:p-5 flex flex-wrap flex-col gap-2 md:flex-row border-b border-b-brd relative before:absolute before:left-0 before:top-0 before:h-full before:w-0.75 before:bg-accent"
|
||||
class="home-categories__row relative grid grid-cols-1 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-6 gap-y-3 md:gap-y-2 md:items-start border-b border-b-brd p-4 sm:p-5 pl-5 sm:pl-6 before:absolute before:left-0 before:top-0 before:h-full before:w-0.75 before:bg-accent"
|
||||
data-category-priority-item
|
||||
data-category-slug="{{slug}}"
|
||||
style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}var(--accent){{/if}};"
|
||||
style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}#94a3b8{{/if}};"
|
||||
>
|
||||
<h2 class="font-medium basis-full leading-tight text-typ">{{name}}</h2>
|
||||
<div class="flex-2 flex flex-col gap-1.5 border-b border-brd pb-3 mb-2 md:pb-0 md:border-b-0 md:mr-4 md:mb-0 items-start justify-between">
|
||||
<div class="home-categories__meta flex min-h-0 min-w-0 flex-col gap-1.5 border-b border-brd pb-3 md:border-b-0 md:pb-0">
|
||||
<h2 class="font-medium leading-tight text-typ">{{name}}</h2>
|
||||
{{#if description}}
|
||||
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
|
||||
{{else}}
|
||||
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</p>
|
||||
{{/if}}
|
||||
<a href="{{url}}" class="text-sm text-typ-tone font-semibold leading-snug flex items-center gap-1 hover:opacity-75 mt-0.5">
|
||||
<a href="{{url}}" class="home-categories__view-all mt-0.5 flex items-center gap-1 text-sm font-semibold leading-snug text-typ-tone hover:opacity-75">
|
||||
<span>View all</span>
|
||||
<i class="icon icon-arrow-up-right size-3.5 stroke-2 shrink-0" role="presentation" aria-hidden="true">
|
||||
<i class="icon icon-arrow-up-right size-3.5 shrink-0 stroke-2" role="presentation" aria-hidden="true">
|
||||
<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="M17 7l-10 10"></path>
|
||||
@@ -38,7 +36,7 @@
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<ol class="flex-3 flex flex-col gap-1.5 text-sm text-typ-tone font-medium list-none">
|
||||
<ol class="home-categories__posts flex min-h-0 min-w-0 list-none flex-col gap-1.5 text-sm font-medium text-typ-tone">
|
||||
{{#get "posts" filter=(concat "tag:" slug) limit="5" include="authors,tags" order="published_at desc"}}
|
||||
{{#foreach posts}}
|
||||
<li>
|
||||
|
||||
Reference in New Issue
Block a user