feat(theme): improve Card* styles (#610)

theme/src/client/components/global/VPCard.vue

@@ -23,7 +23,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
     <slot name="title">
       <p v-if="title || icon" class="title">
         <VPIcon v-if="icon" :name="icon" />
-        <span v-if="title" v-html="title" />
+        <span v-if="title" class="text" v-html="title" />
       </p>
     </slot>
     <div class="body">
@@ -60,12 +60,17 @@ const icon = computed<string | { svg: string } | undefined>(() => {
   gap: 8px;
   align-items: center;
   margin: 0;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--vp-c-text-1);
   transition: color var(--vp-t-color);
 }
 
+.vp-card-wrapper .title .text {
+  flex: 1 2;
+  overflow: hidden;
+}
+
 .vp-card-wrapper .body :first-child {
   margin-top: 0;
 }

theme/src/client/components/global/VPCardGrid.vue

@@ -52,7 +52,8 @@ onMounted(() => {
   margin: 16px 0;
 }
 
-.vp-card-grid > * {
+.vp-card-grid > :deep(*) {
+  min-width: 0;
   margin: 0 !important;
 }
 </style>

theme/src/client/components/global/VPImageCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { usePageLang } from 'vuepress/client'
+import { usePageLang, withBase } from 'vuepress/client'
 
 const props = defineProps<{
   image: string
@@ -41,7 +41,7 @@ const styles = computed(() => {
 <template>
   <div class="vp-image-card" :style="styles" :class="{ center }">
     <div class="image-container">
-      <img :src="image" :alt="title" loading="lazy">
+      <img :src="withBase(image)" :alt="title" loading="lazy">
       <div v-if="title || author || date || description" class="image-info">
         <h3 v-if="title" class="title">
           <a v-if="href" :href="href" target="_blank" rel="noopener noreferrer" class="no-icon">{{ title }}</a>

theme/src/client/components/global/VPLinkCard.vue

@@ -18,7 +18,7 @@ defineProps<{
       <VPLink :href="href" no-icon class="link no-icon" v-bind="{ target, rel }">
         <slot name="title">
           <VPIcon v-if="icon" :name="icon" />
-          <span v-if="title" v-html="title" />
+          <span v-if="title" class="text" v-html="title" />
         </slot>
       </VPLink>
       <slot>
@@ -51,12 +51,18 @@ defineProps<{
   box-shadow: var(--vp-shadow-2);
 }
 
+.vp-link-card :deep(.vp-icon),
+.vp-link-card :deep(.vp-icon-img) {
+  margin: 0;
+}
+
 .vp-link-card .body {
   display: flex;
   flex: 1 2;
   flex-direction: column;
   gap: 16px;
   align-items: flex-start;
+  width: 1px;
 }
 
 .vp-link-card .body > * {
@@ -67,10 +73,12 @@ defineProps<{
   display: flex;
   gap: 8px;
   align-items: center;
+  max-width: 100%;
   font-size: 18px;
   font-weight: 700;
   color: var(--vp-c-text-1);
   text-decoration: none;
+  transition: color var(--vp-t-color);
 }
 
 .vp-link-card .link::before {
@@ -85,6 +93,13 @@ defineProps<{
   margin: 0;
 }
 
+.vp-link-card .link .text {
+  display: inline-block;
+  flex: 1 2;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
 .vpi-arrow-right {
   margin-top: 2px;
   font-size: 20px;