89 lines
3.8 KiB
HTML
89 lines
3.8 KiB
HTML
{{ define "blog-main" }}
|
|
<div class="blog-topitem pt-24 pb-20">
|
|
{{- range first 1 .Pages -}}
|
|
<div class="blog-item -top group cursor-pointer h-96">
|
|
<figure class="image mt-1 w-full aspect-video overflow-hidden rounded-3xl">
|
|
<a href="{{.RelPermalink}}">
|
|
<img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="{{ .Title }}">
|
|
</a>
|
|
</figure>
|
|
<div class="inner pl-10 pt-1">
|
|
<time class="datetime">{{ .Date | time.Format ":date_long" }}</time>
|
|
<a href="{{.RelPermalink}}">
|
|
<h2 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h2>
|
|
<p class="lead">{{ .Summary }}</p>
|
|
</a>
|
|
<div class="flex flex-wrap content-start">
|
|
{{ range $name := .Params.tags }}
|
|
{{ with $.Site.GetPage (printf "/tags/%s" $name) }}
|
|
<a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
<div class="blog-section mt-5 mx-auto">
|
|
<h2 class="title">Our latest posts</h2>
|
|
<div class="blog-list -threecol">
|
|
{{ range first 3 .Pages }}
|
|
<div class="blog-item group cursor-pointer">
|
|
<figure class="image mt-1 w-full aspect-video overflow-hidden rounded-3xl">
|
|
<a href="{{.RelPermalink}}">
|
|
<img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="">
|
|
</a>
|
|
</figure>
|
|
<div class="inner">
|
|
<time class="datetime">{{ .Date | time.Format ":date_long" }}</time>
|
|
<a href="{{.RelPermalink}}">
|
|
<h2 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h2>
|
|
</a>
|
|
<div class="tag-list">
|
|
{{ range $name := .Params.tags }}
|
|
{{ with $.Site.GetPage (printf "/tags/%s" $name) }}
|
|
<a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ if gt .Pages 3 }}
|
|
<div id="blog-all-posts" class="blog-section">
|
|
<h2 class="title">All Posts</h2>
|
|
<div class="blog-list -plain">
|
|
{{ range after 3 .Pages }}
|
|
<div class="blog-item group cursor-pointer">
|
|
<figure class="image flex-none mt-1 w-full aspect-video overflow-hidden rounded-3xl">
|
|
<a href="{{.RelPermalink}}">
|
|
<img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="{{ .Title }}">
|
|
</a>
|
|
</figure>
|
|
<div class="inner">
|
|
<time class="datetime">{{ .Date | time.Format ":date_long" }}</time>
|
|
<a href="{{.RelPermalink}}">
|
|
<h2 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h2>
|
|
</a>
|
|
<div class="tag-list">
|
|
{{ range $name := .Params.tags }}
|
|
{{ with $.Site.GetPage (printf "/tags/%s" $name) }}
|
|
<a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="mt-20 mb-64">
|
|
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
|
Load more posts
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|