style: enhance post card design and refine footer
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
This commit is contained in:
@@ -9,11 +9,7 @@
|
|||||||
</a>
|
</a>
|
||||||
<p class="text-sm text-[var(--text-secondary)] sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-[var(--bg-secondary)] sm:py-2 sm:mt-0 mt-4">
|
<p class="text-sm text-[var(--text-secondary)] sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-[var(--bg-secondary)] sm:py-2 sm:mt-0 mt-4">
|
||||||
© {{date format="YYYY"}} {{@site.title}} —
|
© {{date format="YYYY"}} {{@site.title}} —
|
||||||
{{#get "authors" limit="1" order="count.posts desc"}}
|
Published with <a href="https://ghost.org" target="_blank" rel="noopener" class="hover:text-[var(--brand-primary)] transition-colors duration-200">Ghost</a>
|
||||||
{{#foreach authors}}
|
|
||||||
Created by <a href="{{url}}" class="fancy-link">{{name}}</a>
|
|
||||||
{{/foreach}}
|
|
||||||
{{/get}}
|
|
||||||
</p>
|
</p>
|
||||||
<nav class="sm:ml-auto sm:mt-0 mt-4">
|
<nav class="sm:ml-auto sm:mt-0 mt-4">
|
||||||
{{navigation type="secondary"}}
|
{{navigation type="secondary"}}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
|
<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group h-80">
|
||||||
<a href="{{url}}" class="block">
|
<a href="{{url}}" class="block h-full relative">
|
||||||
{{#if feature_image}}
|
{{#if feature_image}}
|
||||||
<img
|
<img
|
||||||
class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
|
class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110"
|
||||||
src="{{img_url feature_image size="m"}}"
|
src="{{img_url feature_image size="m"}}"
|
||||||
srcset="{{img_url feature_image size="s"}} 400w,
|
srcset="{{img_url feature_image size="s"}} 400w,
|
||||||
{{img_url feature_image size="m"}} 600w,
|
{{img_url feature_image size="m"}} 600w,
|
||||||
@@ -13,7 +13,22 @@
|
|||||||
loading="lazy"
|
loading="lazy"
|
||||||
>
|
>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="w-full h-72 flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
|
<div class="w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
{{!-- Gradient Overlay --}}
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300"></div>
|
||||||
|
|
||||||
|
{{!-- Content Overlay --}}
|
||||||
|
<div class="absolute inset-0 p-6 flex flex-col justify-end transform transition-transform duration-300 group-hover:translate-y-[-4px]">
|
||||||
|
{{#if primary_tag}}
|
||||||
|
<span class="text-[var(--brand-primary)] text-xs uppercase tracking-widest font-bold mb-2 block">
|
||||||
|
{{primary_tag.name}}
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
|
<h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2">
|
||||||
|
{{title}}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
Reference in New Issue
Block a user