From edc1f4261cdbfe15f6680cb5a38abc4f09df1a4e Mon Sep 17 00:00:00 2001
From: Patrick Spek <p.spek@tyil.nl>
Date: Wed, 15 Mar 2023 15:20:57 +0100
Subject: Overhaul cookbook index

---
 assets/theme/main.scss    | 40 ++++++++++++++++++++++++++++++++++++++++
 layouts/recipes/list.html | 33 ++++++++++++++++++++-------------
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/assets/theme/main.scss b/assets/theme/main.scss
index 4466d41..370af14 100644
--- a/assets/theme/main.scss
+++ b/assets/theme/main.scss
@@ -139,6 +139,36 @@ section.project {
 	}
 }
 
+section.recipe {
+	border-top: 1px solid var(--bodyForegroundColor);
+	padding: 0.5rem;
+	display: grid;
+	grid-template-columns: [preview] 1fr [description] 5fr [end];
+
+	div.picture {
+		grid-column-start: preview;
+		grid-column-end: description;
+	}
+
+	div.description {
+		grid-column-start: description;
+		grid-column-end: end;
+
+		ul.taglist {
+			li {
+				display: inline;
+			}
+
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	h2 {
+		margin: 0.5rem 0rem;
+	}
+}
+
 section.service {
 	border-top: 1px solid var(--bodyForegroundColor);
 	padding: 0.5rem;
@@ -271,3 +301,13 @@ pre code {
 		margin-right: 1em;
 	}
 }
+
+.tag {
+	color: var(--linkForegroundColor);
+	font-family: monospace;
+	text-decoration: none;
+	border-bottom: 1px dotted var(--linkForegroundColor);
+}
+.tag::before {
+	content: "#";
+}
diff --git a/layouts/recipes/list.html b/layouts/recipes/list.html
index 1a6bdf9..de18df0 100644
--- a/layouts/recipes/list.html
+++ b/layouts/recipes/list.html
@@ -1,17 +1,24 @@
 {{- define "main" }}
 <h1>{{ .Title }}</h1>
 {{ .Content }}
-<ul>
-	{{- range sort .Paginator.Pages "Title" }}
-	<li>
-		<a href="{{ .Permalink }}">{{ .Title }}</a>
-			<small>
-				{{ .Summary | plainify }}
-				{{- range .Params.tags }}
-				<a href="/tags/{{ . | lower }}">#{{ . }}</a>
-				{{- end }}
-			</small>
-	</li>
-	{{- end }}
-</ul>
+{{- range sort .Pages "Title" }}
+<section class="recipe">
+	<div class="preview">
+		{{- with .Params.preview }}
+		<img src="{{ .src }}" />
+		{{- end }}
+	</div>
+	<div class="description">
+		<h2>
+			<a href="{{ .Permalink }}">{{ .Title }}</a>
+		</h2>
+		<ul class="taglist">
+			{{- range sort .Params.tags }}
+			<li><a class="tag" href="/tags/{{ . | lower }}">{{ . }}</a></li>
+			{{- end }}
+		</ul>
+		{{ .Content }}
+	</div>
+</section>
+{{- end }}
 {{- end }}
-- 
cgit v1.1