81 lines
3.4 KiB
HTML
81 lines
3.4 KiB
HTML
{{ define "main" }}
|
|
{{ $cover := .Resources.GetMatch "cover.jpg" }}
|
|
<main>
|
|
<article>
|
|
<header class="hidden print:block container print:max-w-full mx-auto">
|
|
<h1 class="text-3xl font-bold">
|
|
{{ .Title }}
|
|
</h1>
|
|
</header>
|
|
<header
|
|
class="print:hidden bg-no-repeat bg-[50%] bg-cover bg-fixed"
|
|
{{- if .Param "customHero" -}}
|
|
style="{{ replace (.Param "customHero") "\n" " " | safe.CSS }}"
|
|
{{- else if $cover -}}
|
|
{{- $image := $cover.Process "q75 webp" -}}
|
|
style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('{{ $image.Permalink }}')"
|
|
{{- end -}}>
|
|
<div class="container mx-auto flex flex-col items-center">
|
|
<h1 class="mx-2 md:mx-0 mb-10 text-5xl text-center font-bold
|
|
{{ if $cover }}mt-20 text-white{{ else }}mt-10 text-neutral-800 dark:text-neutral-200{{ end }}">
|
|
{{ .Title }}
|
|
</h1>
|
|
{{ if .Summary }}
|
|
<p class="font-sans text-lg text-center mx-5 md:mx-0 lg:w-2/3
|
|
{{ if $cover }}mb-20 text-white{{ else }}mb-10 text-neutral-800 dark:text-neutral-200{{ end }}">
|
|
{{ .Summary }}
|
|
</p>
|
|
{{ end }}
|
|
</div>
|
|
</header>
|
|
<div class="container mx-auto 2xl:max-w-7xl pt-8 px-2 sm:px-0 xl:px-16 print:px-0">
|
|
{{ partial "blog/post-card/details" (dict "post" . "card" false) }}
|
|
</div>
|
|
<div class="container mx-auto 2xl:max-w-7xl mt-6 lg:mt-12 mb-10 px-2 sm:px-0 xl:px-16
|
|
print:px-0 print:max-w-full markdown numbered-headings">
|
|
{{ .Content }}
|
|
</div>
|
|
{{ with (.Site.RegularPages.Related . | first 5) }}
|
|
<div class="container mx-auto 2xl:max-w-7xl mt-4 lg:mt-8 mb-20 px-2 sm:px-0 xl:px-16
|
|
print:px-0 print:max-w-full">
|
|
<hr class="border-t-2 border-t-primary mb-10">
|
|
<h1 class="text-4xl font-bold mb-10">Related Posts</h1>
|
|
<ul class="flex flex-col gap-20">
|
|
{{ range . }}
|
|
<li class="flex flex-row gap-4 max-h-[120px]">
|
|
<a href="{{ .RelPermalink }}" class="hidden md:block unstyled">
|
|
<div class="relative w-[240px] h-[120px]">
|
|
{{ with .Resources.GetMatch "cover.jpg" }}
|
|
{{ $image := . }}
|
|
{{ $image = $image.Process "fill 240x120 center q80 webp" }}
|
|
<img
|
|
alt="{{ $.Title }}"
|
|
src="{{ $image.RelPermalink }}"
|
|
class="absolute w-full h-rull rounded-xl">
|
|
{{ end }}
|
|
</div>
|
|
</a>
|
|
<div class="flex flex-col gap-2">
|
|
<h2 class="text-2xl font-bold">
|
|
<a href="{{ .RelPermalink }}">
|
|
{{ .Title }}
|
|
</a>
|
|
</h2>
|
|
{{ if .Summary }}
|
|
<p class="font-sans text-lg leading-relaxted text-gray-600 dark:text-gray-300">
|
|
{{ .Summary }}
|
|
</p>
|
|
{{ end }}
|
|
{{ partial "blog/post-card/details" (dict "post" . "card" true) }}
|
|
</div>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
{{ end }}
|
|
{{ partial "goto-top" }}
|
|
</article>
|
|
</main>
|
|
{{ end }}
|
|
|