more work with spacing

src/mixins/comment.pug

···
   
   if kind == "more"
     div(class=`more ${isfirst ? 'first' : ''}`)
-      | #{data.count} more comments
+      | #{data.count} more #{fmttxt(data.count, 'comment')}
   else
     div(class=`comment ${isfirst ? 'first' : ''}`)
       details(id=`${data.id}` open="")

src/public/styles.css

···
   align-items: center;
 }
 
+.sorting {
+  margin-top: 20px;
+}
+
 .sort-opts {
   display: flex;
   flex-direction: row;
···
   .media-preview img,
   .media-preview video 
   {
-    width: 7rem;
-    height: 7rem;
+    width: 5rem;
+    height: 5rem;
   }
   .media-preview a {
     font-size: 2rem;
···
   .media-preview img,
   .media-preview video 
   {
-    width: 7rem;
-    height: 7rem;
+    width: 5rem;
+    height: 5rem;
   }
   .media-preview a {
     font-size: 2rem;
···
 .comment, .more {
   width: 100%;
   border-left: 1px dashed var(--text-color-muted);
-  padding: 8px 0px 0px 24px;
+  padding: 8px 0px 0px 18px;
   box-sizing: border-box;
 }
 
 .comment {
-  padding: 0px 0px 0px 24px;
+  padding-top: 10px;
 }
 
 .first {
···
 }
 
 .title-container, .comment-info-container, summary.expand-comments::before {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .info-container {
···
 
 p {
   margin-top: 5px;
+  margin-bottom: 0px;
 }
 
 .comment-body {
   text-align: left;
+  display: block;
+  padding-bottom: 8px;
 }
 
 summary.expand-post {
···
 details:not([open]) summary::before {
   content: "";
   padding-right: 10px;
-}
-
-.comment-body {
-  display: block;
 }
 
 .footer {
···
 }
 
 .post-title {
-  margin-top: 0;
+  margin-top: 5px;
 }
 
 .op {
   color: var(--accent);
 }
+
+button {
+  border: 1px solid var(--text-color-muted);
+  border-radius: 4px;
+  background-color: var(--black);
+  color: var(--white);
+}

src/views/index.pug

···
         if about
           p #{about.public_description}
         details
-          summary sorting by #{query.sort + (query.t?' '+query.t:'')}
+          summary.sorting sorting by #{query.sort + (query.t?' '+query.t:'')}
           div.sort-opts
             a(href=`/r/${subreddit}?sort=hot`) hot
             a(href=`/r/${subreddit}?sort=new`) new