lovelylizard/layouts/index.html

{{ 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;
    justify-content: center;
    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" }}
<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 }}