comment list css

templates/components/comment_renderer.html

@@ -1,22 +1,26 @@
 {% macro render_comment(comments) %} {% for comment in comments %}
-<div class="media">
-  <a class="pull-left" href="#">
+<div class="comment-item">
+  <div class="comment-avatar">
     <img
-      class="media-object"
-      src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random"
-      width="64"
-      height="64"
-      alt=""
+      class="avatar-img"
+      src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random&size=128"
+      width="48"
+      height="48"
+      alt="{{ comment.author }}"
     />
-  </a>
-  <div class="media-body">
-    <h4 class="media-heading">
-      {{ comment.author }}
-      <small>{{ comment.date }}</small>
-    </h4>
-    {{ comment.content }}
+  </div>
+  <div class="comment-body">
+    <div class="comment-header">
+      <h5 class="comment-author">{{ comment.author }}</h5>
+      <span class="comment-date">{{ comment.date }}</span>
+    </div>
+    <div class="comment-text">{{ comment.content }}</div>
   </div>
 </div>
 {% else %}
-<p>No comments yet. Be the first!</p>
+<p
+  style="color: #6a737d; font-style: italic; text-align: center; padding: 20px"
+>
+  No comments yet. Be the first to share your thoughts!
+</p>
 {% endfor %} {% endmacro %}

templates/components/timeline.html

@@ -1,7 +1,9 @@
-<div class="tw-w-full tw-mx-auto tw-px-4 tw-py-12 tw-text-lg">
+<div class="tw-w-full tw-mx-auto tw-px-0 tw-py-12">
   <ol
-    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-8"
+    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
   >
     {{ post.timeline | safe }}
   </ol>
 </div>
+
+<li class="tw-mb-12 tw-ml-6 tw-list-none tw-relative"></li>