♿️ fix: improve accessibility in lists & taps

sass/parts/_archive.scss

@@ -1,7 +1,6 @@
 .archive {
   .listing-title {
     font-size: 1.5rem;
-    opacity: 0.9;
     margin-bottom: 1rem;
   }
 
@@ -12,7 +11,7 @@
     .post-time {
       width: 4rem;
       .date {
-        opacity: 0.5;
+        color: var(--meta-color);
       }
     }
   }

sass/parts/_header.scss

@@ -91,6 +91,10 @@ header {
   }
 }
 
+.last-updated {
+  margin-top: -5vmin;
+}
+
 .card-meta {
   color: var(--meta-color);
   font-size: 0.92rem;

sass/parts/_posts_list.scss

@@ -17,11 +17,10 @@
     }
 
     .bloglist-tags {
-        margin-top: -0.5rem;
-
         .tag {
             margin-right: 0.7rem;
-            font-size: 0.7rem;
+            height: 48px;
+            font-size: 0.75rem;
             font-weight: 400;
             text-transform: uppercase;
         }

templates/macros/content.html

@@ -10,28 +10,28 @@
 
         <ul class="meta">
             {% if page.draft %}
-                <span class="draft-label">DRAFT</span>
+                <li class="draft-label">DRAFT</li>
             {% endif %}
 
             {% if page.date %}
-                <span>{{ page.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }}</span>
-                {{ separator }}
+                <li>{{ page.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }} {{ separator }}</li>
             {% endif %}
 
-            <span title="{{ page.word_count }} words">{{ page.reading_time }} min read</span>
+            <li title="{{ page.word_count }} words">&nbsp;{{ page.reading_time }} min read</li>
 
             {% if page.taxonomies and page.taxonomies.tags %}
-                {{ separator }}&nbsp;Tags:
+                <li>&nbsp;{{ separator }}&nbsp;Tags:&nbsp;</li>
                 {% for tag in page.taxonomies.tags %}
-                    <li><a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a></li>
+                    <li><a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>
                     {%- if not loop.last -%}
-                        ,
+                        ,&nbsp;
                     {%- endif -%}
+                    </li>
                 {% endfor %}
             {% endif %}
 
             {% if page.updated %}
-                <br><span>Last updated on {{ page.updated | date(format=config.extra.date_format | default (value="%d %B %Y")) }}</span>
+                </ul><ul class="meta last-updated"><li>Last updated on {{ page.updated | date(format=config.extra.date_format | default (value="%d %B %Y")) }}</li>
             {% endif %}
         </ul>
 

templates/tags/list.html

@@ -6,14 +6,12 @@
 
 <div class="tag-cloud">
     <ul class="tags">
-        {% for term in terms %}
-            <div class="tags-item">
-                <li id "{{ term.name }}"><a href="{{ term.permalink | safe }}">
-                    {{ term.name }}</a>
-                    <span> – {{ term.pages | length }} post{{ term.pages | length | pluralize }}</span>
-                </li>
-            </div>
-        {% endfor %}
+        {%- for term in terms -%}
+            <li class="tags-item" id "{{ term.name }}"><a href="{{ term.permalink | safe }}">
+                {{ term.name }}</a>
+                – {{ term.pages | length }} post{{ term.pages | length | pluralize }}
+            </li>
+        {%- endfor -%}
     </ul>
 </div>