You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

53 lines
1.5 KiB

{{ define "main" }}
<div class="flex h-screen relative">
<section
class="w-full h-full md:min-w-[400px] md:w-1/4 bg-slate-50 dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col py-3 overflow-y-auto scroll-area">
<a href="{{ .Permalink }}">
<h2 class="font-bold mb-5 py-1 pl-12 pr-3 md:px-3">
{{ if .Content }}
Topics
{{ else }}
{{ .Title }}
{{ end }}
</h2>
</a>
<ul class="space-y-2.5">
{{ range .Data.Pages -}}
<li>
<a class="block px-3 py-4 hover:bg-slate-200 dark:hover:bg-slate-700" href="{{ .RelPermalink }}">
{{ $description := .Params.Description }}
{{ $title := .Params.title }}
{{ with .Params.images }}
{{- range first 1 . }}
<img class="rounded max-w-full mb-4" src="{{ . }}" alt="{{ $title }}" />
{{ end -}}
{{ end }}
<h3 class="text-lg font-semibold mb-0.5">{{ $title }}</h3>
<div class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
{{ .Summary }}
</div>
</a>
</li>
{{ end -}}
</ul>
</section>
<main class="h-screen overflow-y-auto w-full">
<div class="px-6 py-20 w-full lg:w-[580px] mx-auto prose dark:prose-invert h-fit prose-img:mx-auto">
{{ if .Content }}
{{ .Content }}
{{ else }}
<!-- <h1>{{ .Title }}</h1> -->
<p class="text-center p-8 text-2xl text-slate-300 dark:text-slate-700">Select a post to read on the left</p>
{{ end}}
</div>
</main>
</div>
{{ end }}