Adjust HTML structure of blog posts

Author: OughtPuts

_includes/post.html

@@ -1,8 +1,13 @@
-<div class="blog__post">
-  <p>{{ post.date | date: '%B %-d, %Y' }}</p>
-
-  <dl>
-    <dt><a href="{{ post.url }}">{{ post.title | strip_html }}</a></dt>
-    <dd>{{ post.content | strip_html | truncatewords: 30 }}</dd>
-  </dl>
-</div>
+<li class="blog__post">
+  <div class="post-date" style="flex:1">
+    <p>{{ post.date | date: '%B %-d, %Y' }}</p>
+  </div>
+  <div class="post-container" style="flex:3">
+    <h3>
+      <a href="{{ post.url }}">{{ post.title | strip_html }}</a>
+    </h3>
+    <p>
+      {{ post.content | strip_html | truncatewords: 30 }}
+    </p>
+  </div>
+</li>

_sass/modules/_blog.scss

@@ -30,17 +30,22 @@
 
     border-top: 3px solid rgba($color-black, 0.1);
     padding-top: 30px;
+    display: flex;
+    gap: 30px;
 
-    p {
+
+    
+    .post-date {
+      p {
       font-size: 21px;
       font-weight: 600;
       letter-spacing: -0.006em;
       line-height: 26px;
       margin-top: -7px;
+      }
     }
 
-    dl {
-
+    .post-container {
       margin-bottom: -6px;
       margin-top: 1px;
 
@@ -62,10 +67,9 @@
           }
 
         }
-
       }
 
-      dd {
+      p {
 
         color: $color-grey-5;
         font-size: 21px;
@@ -117,12 +121,15 @@
       gap: 30px;
       padding-top: 40px;
 
-      p {
-        flex: 1;
-        margin-top: -1px;
+      .post-date {
+        p {
+          flex: 1;
+          margin-top: -1px;
+        }
       }
 
-      dl {
+
+      .post-container {
         flex: 3;
         margin-top: -8px;
       }

blog/index.html

@@ -34,11 +34,11 @@ <h1>The Rails Blog: News & Release Notes</h1>
 
 <div class="blog common-padding--bottom">
   <div class="container">
-    <div class="blog__posts">
+    <ul class="blog__posts">
       {% for post in paginator.posts %}
         {% include post.html %}
       {% endfor %}
-    </div>
+    </ul>
 
     {% if paginator.next_page %}
       <div class="blog__pagination">