First draft created with Claude

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

layouts/artwork/list.html

@@ -0,0 +1,149 @@
+{{ define "head" }}
+<style>
+  .filter-bar {
+    display: flex;
+    gap: .5rem;
+    flex-wrap: wrap;
+    margin: 1.5rem 0;
+  }
+
+  .filter-btn {
+    padding: .4rem .9rem;
+    border: 1px solid #ccc;
+    border-radius: 2rem;
+    background: none;
+    cursor: pointer;
+    font-size: .9rem;
+    transition: background .15s, color .15s;
+  }
+
+  .filter-btn:hover {
+    background: #eee;
+  }
+
+  .filter-btn.active {
+    background: #222;
+    color: #fff;
+    border-color: #222;
+  }
+
+  .masonry {
+    columns: 4 240px;
+    column-gap: 1rem;
+  }
+
+  .artwork-card {
+    break-inside: avoid;
+    display: block;
+    margin-bottom: 1rem;
+    text-decoration: none;
+    color: inherit;
+    background: #f9f9f9;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: opacity .15s;
+  }
+
+  .artwork-card:hover {
+    opacity: .85;
+  }
+
+  .artwork-card img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .artwork-card img + img {
+    border-top: 2px solid #fff;
+  }
+
+  .card-info {
+    padding: .6rem .75rem .75rem;
+  }
+
+  .card-info h3 {
+    margin: 0 0 .2rem;
+    font-size: .95rem;
+    font-weight: 600;
+  }
+
+  .card-meta {
+    margin: 0;
+    font-size: .8rem;
+    color: #777;
+  }
+
+  .card-tags {
+    display: flex;
+    gap: .25rem;
+    flex-wrap: wrap;
+    margin-top: .4rem;
+  }
+
+  .tag {
+    font-size: .72rem;
+    background: #e8e8e8;
+    padding: .1rem .4rem;
+    border-radius: 2px;
+  }
+
+  .artwork-card.hidden {
+    display: none;
+  }
+</style>
+{{ end }}
+
+{{ define "main" }}
+<div class="filter-bar">
+  <button class="filter-btn active" data-filter="all">All</button>
+  {{ range $name, $_ := $.Site.Taxonomies.categories }}
+    <button class="filter-btn" data-filter="{{ $name }}">{{ $name | title }}</button>
+  {{ end }}
+</div>
+
+<div class="masonry">
+  {{ range .Pages.ByDate.Reverse }}
+    {{ $cats := delimit (apply .Params.categories "urlize" ".") " " }}
+    <a class="artwork-card" href="{{ .RelPermalink }}" data-categories="{{ $cats }}">
+      {{ range .Params.images }}
+        {{ $img := resources.Get . }}
+        {{ if $img }}
+          {{ $thumb := $img.Resize "600x webp" }}
+          <img src="{{ $thumb.RelPermalink }}" alt="{{ $.Title }}" loading="lazy"
+               width="{{ $thumb.Width }}" height="{{ $thumb.Height }}">
+        {{ end }}
+      {{ end }}
+      <div class="card-info">
+        <h3>{{ .Title }}</h3>
+        <p class="card-meta">
+          {{ with .Params.material }}{{ . }}{{ end -}}
+          {{ with .Params.size }} &middot; {{ . }}{{ end }}
+        </p>
+        {{ with .Params.tags }}
+          <div class="card-tags">
+            {{ range . }}<span class="tag">{{ . }}</span>{{ end }}
+          </div>
+        {{ end }}
+      </div>
+    </a>
+  {{ end }}
+</div>
+
+<script>
+  const btns = document.querySelectorAll('.filter-btn');
+  const cards = document.querySelectorAll('.artwork-card');
+
+  btns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      btns.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const f = btn.dataset.filter;
+      cards.forEach(c => {
+        c.classList.toggle('hidden',
+          f !== 'all' && !c.dataset.categories.split(' ').includes(f));
+      });
+    });
+  });
+</script>
+{{ end }}

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