archive.html

---
layout: page
title: CSS Wizardry Blog Archives
page-class: page--blog
permalink: /archive/
canonical: 'https://csswizardry.com/blog/'
---

<section class="posts">

  {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}

  <p>I have written <b>{{ site.posts | size  }}</b> post on this site, mostly
  covering web performance and CSS architecture. Find a reverse-chronological list
  of them below, or, at random, why not read
  <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a>
  <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>?</p>

  {% for post in site.posts %}
    {% assign currentDate = post.date | date: "%Y" %}
    {% if currentDate != myDate %}
      {% unless forloop.first %}</ol>{% endunless %}
      <hr />
      <h2 id=year-{{ currentDate }}>{{ currentDate }}</h2>
      <ol reversed>
      {% assign myDate = currentDate %}
    {% endif %}
      <li>
        <b><time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%B %d" }}</time></b>
        <br>
        <a href="{{ post.url }}" style="view-transition-name: x-{{ post.date | date: '%Y-%m-%d' }}">{{ post.title }}</a>
      </li>
    {% if forloop.last %}</ol>{% endif %}
  {% endfor %}

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "CSS Wizardry",
        "item": "https://csswizardry.com/"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Blog",
        "item": "https://csswizardry.com/archive/"
      }]
    }
  </script>

</section>