Change comment page style

Signed-off-by: Eunki Hong <[email protected]>

debug.html

@@ -145,10 +145,6 @@ <h1 class="titleText">방명록 <span id="comments-count"></span></h1>
         commentsWrapper.appendChild(commentsList);
       }
 
-      const body = DOMPurify.sanitize(marked(comment.body));
-      const postedByAuthor = comment.author_association === 'OWNER';
-      const edited = comment.created_at !== comment.updated_at;
-
       </script>
 
     </div>

styles/style_comment.css

@@ -19,12 +19,21 @@
 		word-wrap: break-word;
 		align-items: flex-start;
 	};
-	padding: 0.5vw;;
+	padding: 0.5vh 1.5vw;
 	position: relative;
 	flex-direction: column;
 	justify-content: center;
 	align-items: flex-start;
-	background-color: aqua;
+}
+
+.comments-list {
+	position: relative;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	display: flex;
+	padding-inline-start: 1rem;
+	padding-inline-end: 1rem;
 }
 
 .comment {
@@ -41,20 +50,41 @@
 			overflow: hidden;
 		};
 		.meta_username {
-			background-color: aqua;
-
+			/* TODO */
+			color: #0F0F3F;
+			font-size: 1.25rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
 		};
 		.meta_date-posted{
-			background-color: aqua;
+			/* TODO */
+			color: darkblue;
+			font-size: 1.0rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+			line-height: 1.55rlh;
 
+			display: inline;
 		};
 		.meta_tag_author-badge{
-			background-color: aqua;
+			/* TODO */
+			color: darkblue;
+			font-size: 0.75rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+			line-height: 1.55rlh;
 
+			display: inline;
 		};
 		.meta_comment-edited{
-			background-color: aqua;
-
+			/* TODO */
+			color: darkgray;
+			font-size: 0.75rem;
+			font-family: Noto Serif KR;
+			font-weight: 400;
+			line-height: 1.55rlh;
+
+			display: inline;
 		};
 	};
 	.comment-body {
@@ -64,9 +94,10 @@
 		font-weight: 400;
 		line-height: 1.55rlh;
 	};
+	border-bottom: 0.2rem double black;
+	width:100%;
 	position: relative;
 	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-	display: inline-flex;
+	justify-content:left;
+	display: flex;
 }