Initial commit of Palina Ghost theme
This commit is contained in:
41
index.hbs
Normal file
41
index.hbs
Normal file
@@ -0,0 +1,41 @@
|
||||
{{!< default}}
|
||||
|
||||
<header class="container mx-auto px-4 py-8 text-center">
|
||||
<h1 class="text-5xl font-bold tracking-tight text-white">Palina Photo Blog</h1>
|
||||
<p class="mt-2 text-xl text-gray-400">{{@site.description}}</p>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
{{#if posts}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{{#foreach posts}}
|
||||
<article class="relative bg-gray-800 rounded-lg shadow-lg overflow-hidden group">
|
||||
<a href="{{url}}" class="block">
|
||||
{{#if feature_image}}
|
||||
<img
|
||||
class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
srcset="{{img_url feature_image size="s"}} 400w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 800px) 400px, (max-width: 1200px) 600px, 1000px"
|
||||
alt="{{title}}"
|
||||
loading="lazy"
|
||||
>
|
||||
{{else}}
|
||||
<div class="w-full h-72 flex items-center justify-center bg-gray-700 text-gray-300 text-2xl">No Image</div>
|
||||
{{/if}}
|
||||
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
|
||||
<h2 class="text-white text-xl font-semibold leading-tight">{{title}}</h2>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{pagination}}
|
||||
{{else}}
|
||||
<p class="text-center text-gray-400 text-2xl py-20">No posts found.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user