32 lines
1.5 KiB
HTML
32 lines
1.5 KiB
HTML
{{template "head" .}}
|
|
{{template "site_header" .}}
|
|
<main class="pt-28 md:pt-36">
|
|
<section class="mx-auto max-w-7xl px-5 md:px-8">
|
|
<p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Project.Category}}</p>
|
|
<div class="grid gap-8 md:grid-cols-[1.2fr_0.8fr] md:items-end">
|
|
<h1 class="text-5xl font-semibold leading-none md:text-8xl">{{.Project.Title}}</h1>
|
|
<div class="grid grid-cols-3 gap-4 border-t border-neutral-200 pt-4 text-sm">
|
|
<div><p class="text-neutral-500">Location</p><p>{{.Project.Location}}</p></div>
|
|
<div><p class="text-neutral-500">Year</p><p>{{.Project.Year}}</p></div>
|
|
<div><p class="text-neutral-500">Type</p><p>{{.Project.Category}}</p></div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-10 max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Project.Description}}</p>
|
|
</section>
|
|
|
|
<section class="mx-auto mt-14 max-w-7xl px-5 pb-24 md:px-8">
|
|
<div class="grid gap-5">
|
|
{{range .Project.Images}}
|
|
<button type="button" class="group block w-full text-left" hx-get="/projects/{{$.Project.Slug}}/images/{{.ID}}/overlay" hx-target="#overlay-root" hx-swap="innerHTML transition:true">
|
|
<img src="{{.Path}}" alt="{{.Caption}}" class="max-h-[86vh] w-full bg-neutral-200 object-cover transition duration-500 group-hover:brightness-90">
|
|
{{if .Caption}}<span class="mt-2 block text-sm text-neutral-500">{{.Caption}}</span>{{end}}
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
{{template "footer" .}}
|
|
<div id="overlay-root"></div>
|
|
</body>
|
|
</html>
|