comments styling

src/App.vue

@@ -27,7 +27,7 @@ body
   font-size 15px
   background-color lighten(#eceef1, 30%)
   margin 0
-  padding-top 100px
+  padding-top 55px
   color #34495e
 
 a

src/components/Comment.vue

 <template>
-  <li v-if="comment">
-    <div>{{ comment.by }} {{ comment.time | timeAgo }} ago</div>
-    <div v-html="comment.text"></div>
-    <ul>
+  <li v-if="comment" class="comment">
+    <div class="by">
+      <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link>
+      {{ comment.time | timeAgo }} ago
+    </div>
+    <div class="text" v-html="comment.text"></div>
+    <ul class="comment-children">
       <comment v-for="id in comment.kids" :id="id"></comment>
     </ul>
   </li>
@@ -24,3 +27,24 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">
+.comment-children
+  .comment-children
+    margin-left 1em
+
+.comment
+  border-top 1px solid #eee
+  .by, .text
+    font-size .9em
+    padding 1em 0
+  .by
+    color #999
+    padding-bottom 0
+    a
+      color #999
+      text-decoration underline
+  .text
+    a:hover
+      color #ff6600
+</style>

src/components/ItemList.vue

 <template>
-  <div class="news">
+  <div class="news-view">
     <spinner :show="loading"></spinner>
     <div class="news-list-nav">
       <router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
@@ -107,6 +107,9 @@ export default {
 </script>
 
 <style lang="stylus">
+.news-view
+  padding-top 45px
+
 .news-list-nav, .news-list
   background-color #fff
   border-radius 2px
@@ -156,8 +159,6 @@ export default {
   transform translate(30px, 0)
 
 @media (max-width 600px)
-  .news-list-nav
-    top 54px
   .news-list
     margin 10px 0
 </style>

src/views/ItemView.vue

@@ -4,19 +4,23 @@
     <template v-if="item">
       <div class="item-view-header">
         <a :href="item.url" target="_blank">
-          <h2>{{ item.title }}</h2>
+          <h1>{{ item.title }}</h1>
         </a>
-        <span v-if="item.url">({{ item.url | host }})</span>
-        <p>
+        <span v-if="item.url" class="host">
+          ({{ item.url | host }})
+        </span>
+        <p class="meta">
           {{ item.score }} points
           | by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
           {{ item.time | timeAgo }} ago
-          | {{ item.descendants }} comments
         </p>
       </div>
-      <ul v-if="item.kids" class="item-view-comments">
-        <comment v-for="id in item.kids" :id="id"></comment>
-      </ul>
+      <div v-if="item.kids" class="item-view-comments">
+        <p class="item-view-comments-header">{{ item.descendants }} comments</p>
+        <ul class="comment-children">
+          <comment v-for="id in item.kids" :id="id"></comment>
+        </ul>
+      </div>
     </template>
   </div>
 </template>
@@ -45,3 +49,39 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">  
+.item-view-header
+  background-color #fff
+  padding 1.8em 2em 1em
+  box-shadow 0 1px 2px rgba(0,0,0,.1)
+  h1
+    display inline
+    font-size 1.5em
+    margin 0
+    margin-right .5em
+  .host, .meta, .meta a
+    color #999
+  .meta a
+    text-decoration underline
+
+.item-view-comments
+  background-color #fff
+  margin-top 10px
+  padding 0 2em
+  
+.item-view-comments-header
+  margin 0
+  font-size 1.1em
+  padding 1em 0
+
+.comment-children
+  list-style-type none
+  padding 0
+  margin 0
+  
+@media (max-width 600px)
+  .item-view-header
+    h1
+      font-size 1.25em
+</style>