[S] Post info

src/views/Blog.vue

@@ -1,7 +1,6 @@
 <template>
     <div id="Blog" v-if="posts.length !== 0">
         <div class="post" v-for="p in posts" :key="p.id" :class="{'service': p.type === 'service'}">
-            <div class="id">{{p.id}}</div>
             <div class="reply" v-if="p.reply">
                 <img class="thumb" v-if="p.reply.thumb" :src="p.reply.thumb" alt="">
                 <div class="mtext">{{p.reply.text}}</div>
@@ -11,7 +10,12 @@
                      :style="{'background-image': `url(${i.url})`}"></div>
             </div>
             <div class="text">{{p.text}}</div>
-            <div class="views" v-if="p.views">{{p.views}}</div>
+            <div class="info font-code">
+                <div class="id">#{{p.id}}</div>
+                <div class="f-grow1"></div>
+                <div class="date">{{p.date}}</div>
+                <div class="views" v-if="p.views">{{p.views}}<i class="fas fa-eye"/></div>
+            </div>
         </div>
     </div>
 </template>
@@ -63,9 +67,43 @@ export default class Blog extends Vue
 </script>
 
 <style lang="sass" scoped>
+@import "src/css/colors"
+
 #Blog
     background: #fdf9f1
-    margin-top: 20px
+    margin: 20px auto 0
     border-radius: 50px 50px 0 0
     padding: 20px
+    font-size: 0.9em
+    max-width: 600px
+
+.post.service
+    .id
+        display: none
+
+.post
+    width: 100%
+    background: #f9f2e0
+    border-radius: 20px
+    margin-bottom: 20px
+    padding-bottom: 8px
+
+    .text
+        white-space: pre-line
+
+    .info
+        display: flex
+        color: lighten($color-text-main, 40)
+        div
+            margin: 0 10px
+
+        .id
+            margin-left: 20px
+
+        .views
+            margin-right: 20px
+
+        i
+            font-size: 0.8em
+            margin-left: 4px
 </style>