Overhaul cookbook index

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 }}