improve styles

4 files changed, 41 insertions, 21 deletions

diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 6dbebec..006193f 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -7,13 +7,6 @@ mixin post(p)
           a(href=`/comments/${p.id}`)
             != p.title
           span.domain   (#{p.domain})
-        div.info-container 
-          div.info-item ↑ #{fmtnum(p.ups)}
-          div.info-item by u/#{p.author}
-          div.info-item 
-            a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
-          div.info-item 
-            a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} #{fmttxt(p.num_comments, 'comment')} 
       div.media-preview
         if p.is_gallery && p.is_gallery == true
           if p.gallery_data
@@ -27,6 +20,17 @@ mixin post(p)
         else if p.post_hint == "hosted:video"
           - var url = p.secure_media.reddit_video.dash_url
           video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
+    div.info-container 
+      p
+        | ↑ #{fmtnum(p.ups)} 
+        |  · 
+        | 💬 
+        a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} 
+        |  · 
+        a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
+        span.post-author
+          |  · 
+          by u/#{p.author} 
 
     if p.is_gallery && p.is_gallery == true
       if p.gallery_data
diff --git a/src/public/styles.css b/src/public/styles.css
index 9616ac8..f619dcc 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -33,13 +33,13 @@ nav {
 .post, .comments-container, .hero, .header, .footer {
   padding: 0.3rem;
   flex: 1 1 95%;
-  font-size: 0.8rem;
+  font-size: 1rem;
   width: 100%;
 }
 
-.info-container, .comment-info-container {
+.info-container, .comment-info-container, .more {
   color: #777;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
   display: flex;
 }
 
@@ -68,8 +68,16 @@ nav {
 
 .media-preview img {
   object-fit: cover;
-  width: 3rem;
-  height: 3rem;
+}
+
+.media-preview img,
+.media-preview video {
+  width: 4rem;
+  height: 4rem;
+}
+
+.post-author {
+  display: none
 }
 
 @media (min-width: 768px) {
@@ -78,17 +86,21 @@ nav {
     width: 90%;
     font-size: 1rem;
   }
-  .info-container, .comment-info-container {
+  .info-container, .comment-info-container, .more {
     font-size: 0.9rem;
   }
   .domain {
     font-size: 0.9rem;
   }
-  .media-preview img {
-    object-fit: cover;
+  .media-preview img,
+  .media-preview video 
+  {
     width: 7rem;
     height: 7rem;
   }
+  .post-author {
+    display: inline
+  }
 }
 
 @media (min-width: 1080px) {
@@ -97,17 +109,21 @@ nav {
     width: 50%;
     font-size: 1rem;
   }
-  .info-container, .comment-info-container {
+  .info-container, .comment-info-container, .more {
     font-size: 0.9rem;
   }
   .domain {
     font-size: 0.9rem;
   }
-  .media-preview img {
-    object-fit: cover;
+  .media-preview img,
+  .media-preview video 
+  {
     width: 7rem;
     height: 7rem;
   }
+  .post-author {
+    display: inline
+  }
 }
 
 .comments-container, .self-text {
@@ -127,7 +143,6 @@ nav {
 
 .more {
   margin-bottom: 0px;
-  font-size: 0.7rem;
   color: #777;
 }
 
@@ -162,8 +177,7 @@ nav {
 .post-media {
   display: block;
   margin: 0 auto;
-  max-width: 100%;
-  max-height: 400px;
+  max-width: 85%;
 }
 
 .title-container,.info-container, .comment-info-container {
diff --git a/src/views/comments.pug b/src/views/comments.pug
index 7bd1f9e..0898a9c 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -4,6 +4,7 @@ doctype html
 html
   head
     meta(charset='UTF-8')
+    meta(name="viewport" content="width=device-width, initial-scale=1.0")
     title reddit
     link(rel='stylesheet', href='/styles.css')
     script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
diff --git a/src/views/subs.pug b/src/views/subs.pug
index 038cd15..a6bbb7b 100644
--- a/src/views/subs.pug
+++ b/src/views/subs.pug
@@ -4,6 +4,7 @@ doctype html
 html
   head
     meta(charset='UTF-8')
+    meta(name="viewport" content="width=device-width, initial-scale=1.0")
     title reddit
     link(rel='stylesheet', href='/styles.css')