First draft created with Claude

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

layouts/index.html

@@ -0,0 +1,180 @@
+{{ define "head" }}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
+
+<style>
+  .site-header {
+    text-align: center;
+    padding: 4rem 1rem 3rem;
+  }
+
+  .site-title {
+    font-family: 'Cormorant Garamond', serif;
+    font-weight: 300;
+    font-size: clamp(3rem, 8vw, 6rem);
+    margin: 0;
+    line-height: 1;
+    font-style: italic;
+  }
+
+  .site-header-rule {
+    width: 3rem;
+    border: none;
+    border-top: 1px solid #ccc;
+    margin: 2rem auto 0;
+  }
+
+  .filter-bar {
+    display: flex;
+    gap: .5rem;
+    flex-wrap: wrap;
+    margin: 1.5rem 0;
+    padding: 0 .5rem;
+  }
+
+  .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" }}
+<header class="site-header">
+  <h1 class="site-title">Lovely <em>Lizard</em></h1>
+  <hr class="site-header-rule">
+</header>
+
+<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 (where site.RegularPages "Section" "artwork").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 }}