taking lighthouse accessibility suggestions

site/_includes/components/collectionList.njk

@@ -8,17 +8,19 @@
           {% if item.data.cover %}
           {% image item.data.cover, "", "(min-width: 60rem) calc(0.5 * var(--content-width)), var(--content-width)", "lazy", "collection-cover", item.page.inputPath %}
           {% endif %}
-          <a href="{{item.url}}">{{item.data.title}}</a>
+          <a class="collection-itemTitle" href="{{item.url}}">{{item.data.title}}</a>
-          {%- if item.data.date -%}
+          <div class="collection-itemData">
-            <aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
+            {%- if item.data.date -%}
-          {%- endif -%}
+              <span>{{item.data.date | formatDate("MMMM DD, YYYY") }}</span>
-            <aside>{{ tagList(item.data.tags.slice(1)) }}</aside>
+            {%- endif -%}
-          <p>{{item.data.description | safe}}</p>
+            <span>{{ tagList(item.data.tags.slice(1)) }}</span>
+          </div>
+          <p class="collection-itemDescription">{{item.data.description | safe}}</p>
         </li>
       {%- endif -%}
       {%- if (limit !== 0 and loop.index == limit + 1) -%}
         <li>
-          <a href="/{{tagName}}/">More {{tagName}}&hellip;</a>
+          <a class="collection-itemTitle" href="/{{tagName}}/">More {{tagName}}&hellip;</a>
         </li>
       {%- endif -%}
     {%- endfor -%}

site/_includes/css/site.css

@@ -206,7 +206,6 @@ li::marker {
 aside {
   display: inline-block;
   margin-left: 1ch;
-  font-size: var(--s-1);
 }
 
 span.aside {
@@ -284,7 +283,7 @@ ul.collection {
       box-shadow: inset 0 0 2rem -1rem var(--c-accent);
       padding: 0.5rem;
       border-radius: 0.25rem;
-      > a:first-of-type {
+      a.collection-itemTitle {
         position: static;
         &::before {
           content: "";
@@ -293,9 +292,6 @@ ul.collection {
         }
       }
     }
-    > aside {
-      display: inline;
-    }
     > p {
       &::before {
         content: none;
@@ -308,11 +304,6 @@ ul.collection {
     + li {
       margin-top: 1rem;
     }
-    @media (max-width: 40rem) {
-      .tags {
-        display: block;
-      }
-    }
   }
 }
 

site/_includes/home.njk

@@ -5,11 +5,6 @@ rssUrl: "feed.xml"
 {%- from "components/collectionList.njk" import collectionList with context -%}
 <main data-pagefind-body>
   {{ content | safe }}
-  {%- for name, collection in collections -%}
+  <h2>Recent posts</h2>
-    {%- if name in ["posts"] -%}
+  {{ collectionList("posts", limit=5) }}
-      <h2>{{name | capitalize }}</h2>
-      {% include "-taglist.njk" %}
-      {{ collectionList(name, limit=5) }}
-    {%- endif -%}
-  {%- endfor -%}
 </main>