Improve comment CSS

app/scss/comments.scss

@@ -0,0 +1,38 @@
+.comments, .comments li {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	border: 1px solid #444;
+}
+
+.comments {
+	border-radius: 5px;
+	margin: 15px 0;
+	background: #333;
+
+	.author, .msg {
+		display: block;
+		margin: 0;
+	}
+
+	.author {
+		font-weight: bold;
+		border-bottom: 1px solid #444;
+		padding: 0.2em 1em;
+	}
+
+	.msg {
+		padding: 1em;
+		background: #222;
+	}
+}
+
+.comment_form {
+	margin: 1em 0;
+}
+
+.comment_form textarea {
+	min-width: 60%;
+	max-width: 100%;
+	margin: 0 0 1em 0;
+}

app/scss/main.scss

@@ -3,3 +3,4 @@
 @import "nav.scss";
 @import "packages.scss";
 @import "packagegrid.scss";
+@import "comments.scss";

app/templates/macros/threads.html

@@ -1,15 +1,18 @@
 {% macro render_thread(thread, current_user) -%}
-	<ul>
+	<ul class="comments">
 		{% for r in thread.replies %}
 			<li>
-				&lt;<a href="{{ url_for('user_profile_page', username=r.author.username) }}">{{ r.author.display_name }}</a>&gt;
-				{{ r.comment }}
+				<a class="author {{ r.author.rank.name }}"
+					href="{{ url_for('user_profile_page', username=r.author.username) }}">{{ r.author.display_name }}</a>
+				<div class="msg">
+					{{ r.comment }}
+				</div>
 			</li>
 		{% endfor %}
 	</ul>
 
 	{% if current_user.is_authenticated %}
-		<form method="post" action="{{ url_for('thread_page', id=thread.id)}}">
+		<form method="post" action="{{ url_for('thread_page', id=thread.id)}}" class="comment_form">
 			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 			<textarea required maxlength=500 name="comment"></textarea><br />
 			<input type="submit" value="Comment" />
@@ -23,5 +26,4 @@
 			<li><a href="{{ url_for('thread_page', id=t.id) }}">{{ t.title }}</a> by {{ t.author.display_name }}</li>
 		{% endfor %}
 	</ul>
-
 {% endmacro %}