Markup home page content lists and tags as lists (#950)

* Markup home page content lists and tags as lists

* Fix styling after markup changes

* Fix typo

* fix a couple visual issues

* make sure the divider line between posts shows up

Co-authored-by: Dean Attali <dean@attalitech.com>

_layouts/home.html

@@ -6,9 +6,11 @@ layout: page
 
 {% assign posts = paginator.posts | default: site.posts %}
 
-<div class="posts-list">
+<!-- role="list" needed so that `list-style: none` in Safari doesn't remove the list semantics -->
+<ul class="posts-list list-unstyled" role="list">
   {% for post in posts %}
-  <article class="post-preview">
+  <li class="post-preview">
+    <article>
 
       {%- capture thumbnail -%}
         {% if post.thumbnail-img %}
@@ -79,15 +81,21 @@ layout: page
       {% if site.feed_show_tags != false and post.tags.size > 0 %}
       <div class="blog-tags">
         <span>Tags:</span>
+        <!-- role="list" needed so that `list-style: none` in Safari doesn't remove the list semantics -->
+        <ul class="d-inline list-inline" role="list">
           {% for tag in post.tags %}
+          <li class="list-inline-item">
             <a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a>
+          </li>
           {% endfor %}
+        </ul>
       </div>
       {% endif %}
 
     </article>
+  </li>
   {% endfor %}
-</div>
+</ul>
 
 {% if paginator.total_pages > 1 %}
 <ul class="pagination main-pager">

assets/css/beautifuljekyll.css

@@ -432,6 +432,10 @@ footer .footer-custom-content {
 
 /* --- Post preview (feed) --- */
 
+.posts-list {
+    margin: 0;
+}
+
 .post-preview {
   padding: 1.25rem 0;
   border-bottom: 1px solid #eee;
@@ -562,6 +566,10 @@ footer .footer-custom-content {
   opacity: 0.8;
 }
 
+.blog-tags .list-inline-item {
+  margin-right: 0;
+}
+
 .blog-tags a {
   color: {{ site.text-col | default: "#404040" }};
   text-decoration: none;