1
0
Fork 0
gaiety-life/_includes/indexlayout.njk
2022-01-09 19:52:13 -06:00

69 lines
2.4 KiB
Text

---
pagination:
data: collections.all
size: 9
alias: posts
reverse: true
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<div class="relative bg-slate-700 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div class="absolute inset-0">
<div class="bg-slate-900 h-1/5 sm:h-2/5"></div>
</div>
<div class="relative max-w-7xl mx-auto">
<div class="prose lg:prose-xl prose-invert m-auto text-center">
{{ content | safe }}
</div>
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
{%- for post in posts -%}
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="{{ post.data.coverImage if post.data.coverImage else '/images/default-thumb.png'}}" alt="">
</div>
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
<div class="flex-1">
<!--
<p class="text-sm font-medium text-indigo-600">
<a href="#" class="hover:underline">
Case Study
</a>
</p>
-->
<a href="#" class="block mt-2">
<h3 class="text-xl font-semibold text-gray-900">
{{ post.data.title }}
</h3>
<p class="mt-3 text-base text-gray-500">
{{ post.data.description }}
</p>
</a>
</div>
<div class="mt-6 flex justify-between">
<div class="text-sm text-gray-500">
<time datetime="{{ post.data.date.toISOString() }}">
{{ post.data.date.toDateString() }}
</time>
</div>
<div class="text-sm text-gray-500">
<span>
{{ post.templateContent | emojiReadTime }}
</span>
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
</div>
</body>
</html>