fix: improve cards

src/.vuepress/theme/components/blog/Card.vue

@@ -42,11 +42,3 @@ export default {
   },
 }
 </script>
-
-<style lang="postcss" scoped>
-@screen md {
-  .card-post {
-    max-height: 29rem;
-  }
-}
-</style>

src/.vuepress/theme/components/blog/LinkCard.vue

@@ -41,10 +41,10 @@
             class="type-p4 text-primary"
           />
         </div>
-        <footer class="flex-grow">
+        <footer class="flex-grow mt-2">
           <p
             v-if="frontmatter.description || frontmatter.description"
-            class="type-p1-serif text-primary clamp-5"
+            class="type-p1-serif text-primary clamp-3"
             itemprop="description"
           >
             {{ frontmatter.description || frontmatter.description }}

src/.vuepress/theme/components/blog/PostAuthor.vue

@@ -4,19 +4,26 @@
     itemprop="publisher author"
     itemtype="http://schema.org/Person"
     itemscope
-    class="flex items-center"
+    class="flex flex-row flex-wrap"
   >
     <span
       v-for="(piece, index) in resolvedAuthorName"
       :key="piece"
       itemprop="name"
-      >{{ index === 0 ? '' : ',' }}
+      class="flex flex-row"
+    >
       <span
-        class="whitespace-no-wrap hover:text-blueGreen hover:underline cursor-pointer"
+        class="hover:text-blueGreen hover:underline cursor-pointer"
         @click="handleAuthorClick(piece)"
       >
         {{ piece }}
       </span>
+      <span>{{
+        resolvedAuthorName.length !== 1 &&
+        index !== resolvedAuthorName.length - 1
+          ? ',&nbsp;'
+          : ''
+      }}</span>
     </span>
   </div>
 </template>

src/.vuepress/theme/components/blog/RegularCard.vue

@@ -40,10 +40,10 @@
             class="type-p4 text-primary"
           />
         </div>
-        <footer class="flex-grow">
+        <footer class="flex-grow mt-2">
           <p
             v-if="frontmatter.description || frontmatter.description"
-            class="type-p1-serif text-primary clamp-5"
+            class="type-p1-serif text-primary clamp-3"
             itemprop="description"
           >
             {{ frontmatter.description || frontmatter.description }}

src/.vuepress/theme/styles/index.css

@@ -3,3 +3,8 @@
 body {
   @apply bg-gray-light antialiased;
 }
+
+code {
+  white-space: pre-wrap;
+  word-break: break-all;
+}