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);
+}