writing.html

---
layout: default
pageClass: '-no-padding-top'
stylesheets:
 - writing.css
title: "Writing"
---

{% include shapesHero.html heading="Writing" %}

<ul class="post-list content-limiter -thin">
  {% for post in site.posts %}
    {% if post.categories contains "Archive" or post.categories contains "WIP" %}
      {% continue %}
    {% endif %}

    <li class="post-listing{% if post.thumbnail %} -with-image{% endif %}">
      <div class="post-heading">
        {% comment %}
          thumbnail is a separate field from metadata.image: that one is the
          social card, which has the title baked into it and would just repeat
          the heading. thumbnailPosition lets a post steer its own crop when the
          default centre would cut off the subject.

          The image is decorative - the title link stretched over it (see
          .title::after) makes the whole banner clickable, so a second link
          here would just duplicate it for keyboard and screen reader users.
        {% endcomment %}
        {% if post.thumbnail %}
          <img class="thumbnail" src="{{ post.thumbnail }}" alt="" loading="lazy"
            {% if post.thumbnailPosition %}
              style="object-position: {{ post.thumbnailPosition }}"
            {% endif %}>
        {% endif %}

        <h2>
          <a href="{{ post.url }}" class="title">
            {{ post.title }}
          </a>
          {% if post.draft %}
            <span class="category -draft">Draft</span>
          {% endif %}
        </h2>

        {% for category in post.categories %}
          <span class="category">{{ category }}</span>
        {% endfor %}
      </div>

      <div class="excerpt">
        {{ post.excerpt }}
      </div>
    </li>
  {% endfor %}
</ul>