From 6ec87461969e7fa942d78f1770fc23b577cacb2a Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sun, 5 Dec 2021 01:51:46 -0500
Subject: [PATCH] [S] Style blog

---
 src/views/Blog.vue | 47 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index bf153f8..3a455ee 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -3,7 +3,7 @@
         <div class="post" v-for="p in posts" :key="p.id" :class="{'service': p.type === 'service'}">
             <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>
+                <div class="mtext fbox-vcenter">{{p.reply.text}}</div>
             </div>
             <div class="images" v-if="p.images">
                 <div class="img" v-for="i in p.images" :key="i"
@@ -86,7 +86,43 @@ export default class Blog extends Vue
     background: #f9f2e0
     border-radius: 20px
     margin-bottom: 20px
-    padding-bottom: 8px
+    padding: 12px 20px 8px
+    overflow: auto
+    box-sizing: border-box
+
+    text-align: left
+
+    > *
+        margin-bottom: 10px
+    > *:last-child
+        margin-bottom: 0
+
+    .reply
+        display: flex
+        font-size: 0.8em
+
+        .thumb
+            margin-left: 10px
+            height: 40px
+            width: 40px
+            object-fit: cover
+
+        .mtext
+            flex: 1
+            max-height: 40px
+            margin-left: 10px
+            color: lighten($color-text-main, 20)
+            //display: -webkit-box
+            -webkit-line-clamp: 2 /* number of lines to show */
+            line-clamp: 2
+            -webkit-box-orient: vertical
+            overflow: hidden
+
+
+    .reply:before
+        content: " "
+        border: 2px solid lighten($color-text-main, 20)
+        border-radius: 2px
 
     .text
         white-space: pre-line
@@ -97,11 +133,8 @@ export default class Blog extends Vue
         div
             margin: 0 10px
 
-        .id
-            margin-left: 20px
-
-        .views
-            margin-right: 20px
+        div:first-child, div:last-child
+            margin: 0
 
         i
             font-size: 0.8em