First draft created with Claude

TO DO: cleaning up the code, Claude is terrible with keeping css tidy <3

layouts/artwork/single.html

@@ -0,0 +1,115 @@
+{{ define "head" }}
+<style>
+  .artwork-detail {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  .back-link {
+    display: inline-block;
+    margin: 1.5rem 0 1rem;
+    font-size: .9rem;
+    text-decoration: none;
+    color: #666;
+  }
+
+  .back-link:hover {
+    color: #222;
+  }
+
+  .artwork-title {
+    margin: 0 0 1.5rem;
+    font-size: 1.6rem;
+  }
+
+  .artwork-images img {
+    max-width: 100%;
+    display: block;
+    margin-bottom: .75rem;
+    border-radius: 4px;
+  }
+
+  .artwork-meta {
+    margin: 1.5rem 0;
+    border-top: 1px solid #eee;
+    padding-top: 1rem;
+  }
+
+  .artwork-meta dl {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: .3rem 1rem;
+    margin: 0;
+  }
+
+  .artwork-meta dt {
+    font-size: .85rem;
+    color: #888;
+    font-weight: normal;
+  }
+
+  .artwork-meta dd {
+    margin: 0;
+    font-size: .85rem;
+  }
+
+  .artwork-tags {
+    display: flex;
+    gap: .3rem;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+  }
+
+  .tag {
+    font-size: .78rem;
+    background: #e8e8e8;
+    padding: .15rem .45rem;
+    border-radius: 2px;
+  }
+
+  .artwork-body {
+    margin-top: 1.5rem;
+    font-size: .95rem;
+    line-height: 1.6;
+    color: #444;
+    border-top: 1px solid #eee;
+    padding-top: 1rem;
+  }
+</style>
+{{ end }}
+
+{{ define "main" }}
+<div class="artwork-detail">
+<a class="back-link" href="{{ .Parent.RelPermalink }}">← Gallery</a>
+
+<h1 class="artwork-title">{{ .Title }}</h1>
+
+<div class="artwork-images">
+  {{ range .Params.images }}
+    {{ $img := resources.Get . }}
+    {{ if $img }}
+      <img src="{{ $img.RelPermalink }}" alt="{{ $.Title }}">
+    {{ end }}
+  {{ end }}
+</div>
+
+<div class="artwork-meta">
+  <dl>
+    {{ with .Params.material }}<dt>Material</dt><dd>{{ . }}</dd>{{ end }}
+    {{ with .Params.size }}<dt>Size</dt><dd>{{ . }}</dd>{{ end }}
+    <dt>Date</dt><dd>{{ .Date.Format "2 January 2006" }}</dd>
+  </dl>
+
+  {{ with .Params.tags }}
+    <div class="artwork-tags">
+      {{ range . }}<span class="tag">{{ . }}</span>{{ end }}
+    </div>
+  {{ end }}
+</div>
+
+{{ with .Content }}
+  <div class="artwork-body">{{ . }}</div>
+{{ end }}
+</div>
+{{ end }}