comment list css

static/css/simple-blog-template.css

@@ -187,3 +187,73 @@ nav {
 .comment-card .btn-primary:hover {
   background-color: #0056b3;
 }
+
+/* Comment List Styling */
+.comment-item {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.comment-item:last-child {
+  border-bottom: none;
+}
+
+.avatar-img {
+  border-radius: 50%; /* Circular avatars look much cleaner */
+  object-fit: cover;
+  background: #f8f9fa;
+}
+
+.comment-body {
+  flex: 1;
+}
+
+.comment-header {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.comment-author {
+  font-weight: 700;
+  color: #24292e;
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.comment-date {
+  font-size: 0.85rem;
+  color: #6a737d;
+}
+
+.comment-text {
+  color: #444;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* Refined Button */
+.btn-modern {
+  background-color: #0366d6; /* GitHub-style blue */
+  color: white;
+  border: none;
+  padding: 10px 24px;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    transform 0.1s;
+}
+
+.btn-modern:hover {
+  background-color: #005cc5;
+}
+
+.btn-modern:active {
+  transform: translateY(1px);
+}

templates/components/comment_renderer.html

@@ -1,22 +1,26 @@
 {% macro render_comment(comments) %} {% for comment in comments %}
-<div class="media">
+<div class="comment-item">
-  <a class="pull-left" href="#">
+  <div class="comment-avatar">
     <img
-      class="media-object"
+      class="avatar-img"
-      src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random"
+      src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random&size=128"
-      width="64"
+      width="48"
-      height="64"
+      height="48"
-      alt=""
+      alt="{{ comment.author }}"
     />
-  </a>
+  </div>
-  <div class="media-body">
+  <div class="comment-body">
-    <h4 class="media-heading">
+    <div class="comment-header">
-      {{ comment.author }}
+      <h5 class="comment-author">{{ comment.author }}</h5>
-      <small>{{ comment.date }}</small>
+      <span class="comment-date">{{ comment.date }}</span>
-    </h4>
+    </div>
-    {{ comment.content }}
+    <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>