fixup info-styles, add collapse everywhere

3 files changed, 69 insertions, 51 deletions

diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug
index 3af1f53..518307d 100644
--- a/src/mixins/comment.pug
+++ b/src/mixins/comment.pug
@@ -2,12 +2,15 @@ include ../utils
 
 mixin infoContainer(data)
   div.comment-info-container
-    div.info-item #{fmtnum(data.ups)} ↑
-    div.info-item u/#{data.author} #{data.is_submitter ? '(OP)' : ''}
+    | #{fmtnum(data.ups)} ↑
+    |  · 
+    span(class=`${data.is_submitter ? 'op' : ''}`)
+      | u/#{data.author} #{data.is_submitter ? '(op)' : ''}
+    |  · 
     if data.collapsed_reason_code == "DELETED"
-      div.info-item
-        a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
-    div.info-item #{timeDifference(Date.now(), data.created * 1000)}
+      a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
+      |  · 
+    | #{timeDifference(Date.now(), data.created * 1000)}
 
 -
   function hasReplies(data) {
@@ -20,22 +23,16 @@ mixin comment(com, isfirst)
   - var hasReplyData = hasReplies(data)
   
   if kind == "more"
-    div(class=`${isfirst ? 'first' : ''}`)
-      div.more #{data.count} more comments
+    div(class=`more ${isfirst ? 'first' : ''}`)
+      | #{data.count} more comments
   else
     div(class=`comment ${isfirst ? 'first' : ''}`)
-      if hasReplyData
-        details(id=`${data.id}` open="")
-          summary.expand-comments
-            +infoContainer(data)
-          div.comment-body
-            != data.body_html
-    
+      details(id=`${data.id}` open="")
+        summary.expand-comments
+          +infoContainer(data)
+        div.comment-body
+          != data.body_html
+        if hasReplyData
           div.replies
             each reply in data.replies.data.children
               +comment(reply, false)
-    
-      else
-        +infoContainer(data)
-        div.comment-body
-          != data.body_html
diff --git a/src/public/styles.css b/src/public/styles.css
index cd7d6b1..87e1573 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -7,9 +7,10 @@
   --blockquote-color: green;
   --link-color: #29BC9B;
   --link-visited-color: #999;
+  --accent: var(--link-color);
 
   font-family: Inter, sans-serif;
-  font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
+  font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
 
 }
 
@@ -22,6 +23,7 @@
     --blockquote-color: lightgreen;
     --link-color: #79ffe1;
     --link-visited-color: #999;
+    --accent: var(--link-color);
   }
 }
 
@@ -38,7 +40,6 @@ body {
 main {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
   align-items: center;
 }
 
@@ -111,19 +112,19 @@ nav {
 }
 
 .post, .hero {
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 .comments-container {
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 .info-container a,
 .info-container,
 .comment-info-container,
 .more,
-summary::before,
-hr {
+summary::before
+{
   color: var(--text-color-muted)
 }
 
@@ -163,6 +164,12 @@ summary::before {
   height: 4rem;
 }
 
+.media-preview a {
+  font-size: 2rem;
+  text-decoration: none;
+  padding: 1rem;
+}
+
 .post-author {
   display: none
 }
@@ -180,20 +187,20 @@ summary::before {
     width: 90%;
   }
   .post, .hero {
-    font-size: 1.3rem;
+    font-size: 1rem;
   }
   .comments-container {
-    font-size: 1.3rem;
+    font-size: 1rem;
   }
   .info-container, .comment-info-container, .more
   {
-    font-size: 1rem;
+    font-size: 0.8rem;
   }
   summary::before {
-    font-size: 0.8rem;
+    font-size: 0.7rem;
   }
   .domain {
-    font-size: 1rem;
+    font-size: 0.8rem;
   }
   .media-preview img,
   .media-preview video 
@@ -201,6 +208,10 @@ summary::before {
     width: 7rem;
     height: 7rem;
   }
+  .media-preview a {
+    font-size: 2rem;
+    padding: 2rem;
+  }
   .post-author {
     display: inline
   }
@@ -215,19 +226,19 @@ summary::before {
     width: 60%;
   }
   .post, .hero {
-    font-size: 1.3rem;
+    font-size: 1rem;
   }
   .comments-container {
-    font-size: 1.3rem;
+    font-size: 1rem;
   }
   .info-container, .comment-info-container, .more {
-    font-size: 1rem;
+    font-size: 0.8rem;
   }
   summary::before {
-    font-size: 0.8rem;
+    font-size: 0.7rem;
   }
   .domain {
-    font-size: 1rem;
+    font-size: 0.8rem;
   }
   .media-preview img,
   .media-preview video 
@@ -235,6 +246,10 @@ summary::before {
     width: 7rem;
     height: 7rem;
   }
+  .media-preview a {
+    font-size: 2rem;
+    padding: 2rem;
+  }
   .post-author {
     display: inline
   }
@@ -250,7 +265,7 @@ summary::before {
 .comment, .more {
   width: 100%;
   border-left: 1px dashed var(--text-color-muted);
-  padding: 10px 0px 0px 24px;
+  padding: 8px 0px 0px 24px;
   box-sizing: border-box;
 }
 
@@ -258,15 +273,10 @@ summary::before {
   padding: 0px 0px 0px 24px;
 }
 
-.more {
-  margin-bottom: 0px;
-}
-
 .first {
   border-left: none;
   padding-left: 0;
-  margin: 0;
-  margin-top: 40px;
+  margin-top: 10px;
 }
 
 .post-container {
@@ -321,7 +331,9 @@ summary::before {
 }
 
 hr {
-  border 1px solid #000;
+  border: none;
+  border-top: 1px dashed var(--text-color-muted);
+  height: 0;
 }
 
 blockquote {
@@ -402,3 +414,11 @@ a {
     width: auto;
     max-height: 500px;
 }
+
+.post-title {
+  margin-top: 0;
+}
+
+.op {
+  color: var(--accent);
+}
diff --git a/src/views/comments.pug b/src/views/comments.pug
index 50c54ec..bfb0e35 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -21,7 +21,15 @@ html
         h3.sub-title
           a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit}
 
-        h2 #{post.title}
+        div.info-container 
+          p
+            | #{fmtnum(post.ups)} ↑ 
+            |  ·  by u/#{post.author} 
+            |  ·  
+            | #{timeDifference(Date.now(), post.created * 1000)}
+
+        h2.post-title
+          != post.title
 
         if post.is_gallery && post.is_gallery == true
           if post.gallery_data
@@ -48,13 +56,6 @@ html
         if post.selftext_html
           p.self-text !{post.selftext_html}
 
-        div.info-container 
-          p
-            | #{fmtnum(post.ups)} ↑ 
-            |  ·  by u/#{post.author} 
-            |  ·  
-            | #{timeDifference(Date.now(), post.created * 1000)}
-
         hr
 
       div.comments-container