From 1f28d6263c4bd8029b42c9dc9b2aa3ee7207c71c Mon Sep 17 00:00:00 2001
From: Shadowfacts <me@shadowfacts.net>
Date: Sun, 30 Jun 2019 15:29:54 -0400
Subject: [PATCH] Tweak comment styles

---
 site/css/main.scss            | 61 +++++++++++++++++------------------
 site/layouts/default.html.ejs |  4 +--
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/site/css/main.scss b/site/css/main.scss
index 8ee750a..0021a4d 100644
--- a/site/css/main.scss
+++ b/site/css/main.scss
@@ -42,6 +42,7 @@ body {
 article {
 	margin-bottom: 75px;
 	color: var(--content-text-color);
+	border-bottom: 1px solid var(--accent-color);
 
 	@media (min-width: 768px) {
 		a::before { content: "["; }
@@ -81,14 +82,6 @@ article {
 		color: var(--secondary-ui-text-color);
 	}
 
-	&::after {
-		content: "";
-		width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
-		height: 1px;
-		background-color: var(--accent-color);
-		position: absolute;
-	}
-
 	.article-title {
 		margin-top: 20px;
 		margin-bottom: 0;
@@ -147,26 +140,31 @@ article {
 }
 
 #comments-container {
-	.comments-list {
-		margin-top: 0px;
-		padding-left: 0px;
-	}
+	border-bottom: 1px solid var(--accent-color);
+	padding-bottom: 55px;
 
 	.comment-user-avatar {
 		width: 50px;
+		border-radius: 5px;
 		float: left;
 		margin-right: 10px;
-		border-radius: 5px;
 	}
 
-	.comment-info {
-		margin-top: 0px;
-		margin-bottom: 5px;
-	}
+	@media (min-width: 768px) {
+		.comments-list {
+			margin-top: 0px;
+			padding-left: 0px;
+		}
 
-	.comment-children {
-		margin-left: 50px;
-		margin-top: 20px;
+		.comment-info {
+			margin-top: 0px;
+			margin-bottom: 5px;
+		}
+
+		.comment-children {
+			margin-left: 60px;
+			margin-top: 20px;
+		}
 	}
 }
 
@@ -399,21 +397,16 @@ figure {
 
 // Footer
 .site-footer {
-	padding-top: 20px;
-	padding-bottom: 20px;
+	margin-top: 75px;
+	margin-bottom: 20px;
 	background-color: var(--ui-background-color);
 	font-size: 16px;
 
-	> div {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: flex-start;
-		flex-wrap: wrap;
-
-		padding-top: 10px;
-		// border-top: 3px solid var(--accent-color);
-	}
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-wrap: wrap;
 
 	.site-title {
 		margin: 0;
@@ -463,6 +456,10 @@ figure {
 .pagination {
 	text-align: center;
 
+	p {
+		margin: 0;
+	}
+
 	.pagination-link {
 		color: var(--accent-color);
 
diff --git a/site/layouts/default.html.ejs b/site/layouts/default.html.ejs
index a5c3319..adc494a 100644
--- a/site/layouts/default.html.ejs
+++ b/site/layouts/default.html.ejs
@@ -69,7 +69,7 @@
 	</div>
 
 	<footer class="site-footer container">
-		<div>
+		<!-- <div> -->
 			<div>
 				<h2 class="site-title">Shadowfacts</h2>
 				<p class="ui-controls">
@@ -91,7 +91,7 @@
 					<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
 				</ul>
 			</nav>
-		</div>
+		<!-- </div> -->
 
 		<script>
 			(() => {