move domain to title line, fix mobile styles

2 files changed, 27 insertions, 16 deletions

diff --git a/src/public/styles.css b/src/public/styles.css
index 1a541de..c366e46 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -7,9 +7,24 @@ main {
 
 .post, .comments-container, .header {
   padding: 0.3rem;
-  flex: 1 1 95%;
+  flex: 1 1 100%;
   font-size: 1rem;
-  width: 95%;
+  width: 100%;
+}
+
+.info-container {
+  color: #777;
+  font-size: 0.7rem;
+  display: flex;
+}
+
+.domain {
+  color: #777;
+  font-size: 0.7rem;
+}
+
+.info-item {
+  margin-right: 10px;
 }
 
 @media (min-width: 768px) {
@@ -17,6 +32,9 @@ main {
     flex: 1 1 65%;
     width: 65%;
   }
+  .info-container {
+    font-size: 0.8rem;
+  }
 }
 
 @media (min-width: 1080px) {
@@ -24,6 +42,9 @@ main {
     flex: 1 1 50%;
     width: 50%;
   }
+  .info-container {
+    font-size: 0.8rem;
+  }
 }
 
 .comments-container, .self-text {
@@ -33,7 +54,7 @@ main {
 .comment, .more {
   width: 100%;
   border-left: 1px dashed;
-  padding: 10px 0px 10px 24px;
+  padding: 10px 0px 0px 24px;
   box-sizing: border-box;
 }
 
@@ -76,17 +97,6 @@ main {
   margin-bottom: 10px;
 }
 
-.info-container {
-  color: #777;
-  font-size: 0.8rem;
-  display: flex;
-  align-items: center;        
-}
-
-.info-item {
-  margin-right: 10px;
-}
-
 hr {
   border 1px solid #000;
 }
diff --git a/src/views/post.pug b/src/views/post.pug
index 77ef3f5..183f33f 100644
--- a/src/views/post.pug
+++ b/src/views/post.pug
@@ -3,11 +3,12 @@ mixin post(p)
   article.post
     div.post-container
       div.post-text
-        div.title-container !{p.title} 
+        div.title-container
+          != p.title
+          span.domain   (#{p.domain})
         div.info-container 
           div.info-item by u/#{p.author}
           div.info-item ↑ #{fmtnum(p.ups)}
-          div.info-item #{p.domain}
           div.info-item 
             a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
           div.info-item