Style changes to better distinguish posts & comments

- Add a border around post content
- Make comment action links smaller and gray
- Use <div> instead of <p> around content, as <p> cannot be nested
- Change <p> style to only have bottom margin
- Add a bit more spacing in a few places

3 files changed, 34 insertions, 7 deletions

diff --git a/res/main.css b/res/main.css
index 36359f5..c1f83cf 100644
--- a/res/main.css
+++ b/res/main.css
@@ -33,6 +33,12 @@ body {
 .actionList > * {
 	margin-right: .5em;
 }
+.actionList.small {
+	font-size: .8em;
+}
+.actionList.small > a {
+	color: #444;
+}
 
 .siteName {
 	font-weight: bold;
@@ -95,6 +101,12 @@ body {
 	cursor: pointer;
 }
 
+.postContent {
+	border: 1px solid #0d47a1;
+	border-radius: .5em;
+	padding: .5em;
+}
+
 .votebox {
 	float: left;
 	margin-right: .5em;
@@ -102,6 +114,11 @@ body {
 
 .comment > .content {
 	overflow-x: auto;
+	margin-bottom: 1em;
+}
+.commentContent {
+	margin-top: .5em;
+	margin-bottom: .5em;
 }
 
 .commentList {
@@ -134,6 +151,11 @@ textarea {
 	height: 7em;
 }
 
+p {
+	margin-top: 0;
+	margin-bottom: 16px;
+}
+
 @media (max-width: 768px) {
 	.communitySidebar {
 		display: none; /* TODO still show this somewhere */
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 869f021..793c54c 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -52,7 +52,9 @@ pub fn Comment<'a>(
                     {" "}
                     <TimeAgo since={chrono::DateTime::parse_from_rfc3339(&comment.created).unwrap()} lang />
                 </small>
-                <Content src={comment} />
+                <div class={"commentContent"}>
+                    <Content src={comment} />
+                </div>
                 {
                     comment.attachments.iter().map(|attachment| {
                         let href = &attachment.url;
@@ -66,7 +68,7 @@ pub fn Comment<'a>(
                     })
                     .collect::<Vec<_>>()
                 }
-                <div class={"actionList"}>
+                <div class={"actionList small"}>
                     {
                         if base_data.login.is_some() {
                             Some(render::rsx! {
@@ -201,15 +203,15 @@ impl<'a, T: HavingContent + 'a> render::Render for Content<'a, T> {
         match self.src.content_html() {
             Some(html) => {
                 let cleaned = ammonia::clean(&html);
-                writer.write_str("<p>")?;
+                writer.write_str("<div>")?;
                 render::raw!(cleaned.as_ref()).render_into(writer)?;
-                writer.write_str("</p>")?;
+                writer.write_str("</div>")?;
             }
             None => {
                 if let Some(text) = self.src.content_text() {
-                    writer.write_str("<p>")?;
+                    writer.write_str("<div>")?;
                     text.render_into(writer)?;
-                    writer.write_str("</p>")?;
+                    writer.write_str("</div>")?;
                 }
             }
         }
diff --git a/src/routes/posts.rs b/src/routes/posts.rs
index 7ad0385..100c097 100644
--- a/src/routes/posts.rs
+++ b/src/routes/posts.rs
@@ -145,6 +145,7 @@ async fn page_post_inner(
                     }
                 }
             </div>
+            <br />
             <p>
                 {lang.tr("submitted", None)}
                 {" "}<TimeAgo since={chrono::DateTime::parse_from_rfc3339(&post.as_ref().created)?} lang={&lang} />
@@ -161,7 +162,9 @@ async fn page_post_inner(
                     }
                 }
             }
-            <Content src={&post} />
+            <div class={"postContent"}>
+                <Content src={&post} />
+            </div>
             {
                 if author_is_me(&post.as_ref().author, &base_data.login) || (post.local && base_data.is_site_admin()) {
                     Some(render::rsx! {