more work with spacing

3 files changed, 25 insertions, 15 deletions

diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug
index 518307d..4249030 100644
--- a/src/mixins/comment.pug
+++ b/src/mixins/comment.pug
@@ -24,7 +24,7 @@ mixin comment(com, isfirst)
   
   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="")
diff --git a/src/public/styles.css b/src/public/styles.css
index 87e1573..afd89e2 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -80,6 +80,10 @@ a:visited {
   align-items: center;
 }
 
+.sorting {
+  margin-top: 20px;
+}
+
 .sort-opts {
   display: flex;
   flex-direction: row;
@@ -205,8 +209,8 @@ summary::before {
   .media-preview img,
   .media-preview video 
   {
-    width: 7rem;
-    height: 7rem;
+    width: 5rem;
+    height: 5rem;
   }
   .media-preview a {
     font-size: 2rem;
@@ -243,8 +247,8 @@ summary::before {
   .media-preview img,
   .media-preview video 
   {
-    width: 7rem;
-    height: 7rem;
+    width: 5rem;
+    height: 5rem;
   }
   .media-preview a {
     font-size: 2rem;
@@ -265,12 +269,12 @@ summary::before {
 .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 {
@@ -303,8 +307,8 @@ summary::before {
 }
 
 .title-container, .comment-info-container, summary.expand-comments::before {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .info-container {
@@ -359,10 +363,13 @@ code {
 
 p {
   margin-top: 5px;
+  margin-bottom: 0px;
 }
 
 .comment-body {
   text-align: left;
+  display: block;
+  padding-bottom: 8px;
 }
 
 summary.expand-post {
@@ -384,10 +391,6 @@ details:not([open]) summary::before {
   padding-right: 10px;
 }
 
-.comment-body {
-  display: block;
-}
-
 .footer {
   padding-bottom: 40px;
 }
@@ -416,9 +419,16 @@ a {
 }
 
 .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);
+}
diff --git a/src/views/index.pug b/src/views/index.pug
index 0988b08..add4c8e 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -46,7 +46,7 @@ html
         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