style: 调整手机上消息瀑布流的宽度

mark9804 · Nov 24, 2024 · 228677f · 228677f
1 parent 666ec0a
commit 228677f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/docs/.vitepress/theme/components/ArticleWaterfallList.vue b/docs/.vitepress/theme/components/ArticleWaterfallList.vue
@@ -16,12 +16,12 @@ const waterfallCount = computed(() =>
   Math.max(Math.floor(props.width / 290), 1)
 );
 
-const cardWidth = 280;
+const cardWidth = computed(() => (props.width >= 375 ? 280 : props.width));
 
 const gapSize = computed(() =>
   Math.max(
-    (props.width - waterfallCount.value * cardWidth) /
-      (waterfallCount.value - 1),
+    (props.width - waterfallCount.value * cardWidth.value) /
+      (waterfallCount.value - 1 || 1),
     24
   )
 );
@@ -38,11 +38,16 @@ const waterfallItemsList = computed(() => {
 <template>
   <div class="article-list__waterfall-container flex justify-between w-full">
     <div
-      class="article-list__waterfall-item flex flex-col w-[280px]"
+      class="article-list__waterfall-item flex flex-col"
       :style="{ gap: `${gapSize}px` }"
       v-for="items in waterfallItemsList"
     >
-      <ElyCard v-for="post in items" :key="post.url" :content="post" />
+      <ElyCard
+        v-for="post in items"
+        :key="post.url"
+        :content="post"
+        :max-width="cardWidth"
+      />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElyCard.vue b/docs/.vitepress/theme/components/ElysiumUI/ElyCard.vue
@@ -58,7 +58,7 @@ onUnmounted(() => {
 <template>
   <component
     :is="isLink ? 'a' : 'div'"
-    class="elysium-ui__card__container rounded-[3px] overflow-hidden shadow-card hover:shadow-card-hover hover:scale-102 transition-all duration-300 relative"
+    class="elysium-ui__card__container w-full rounded-[3px] overflow-hidden shadow-card hover:shadow-card-hover hover:scale-102 transition-all duration-300 relative"
     :class="{
       'no-cover': !props.content.frontmatter.cover,
     }"

diff --git a/docs/.vitepress/theme/components/HomePage.vue b/docs/.vitepress/theme/components/HomePage.vue
@@ -50,7 +50,7 @@ watch(isDark, newVal => {
       :social="props?.social"
     />
     <section
-      class="w-full max-w-[1280px] flex flex-col pl-16 sm:pl-4 md:pl-8 sm:pr-4 md:pr-8 pr-16 mt-10 mb-20"
+      class="w-full max-w-[1280px] flex flex-col pl-16 xs:pl-10 xs:pr-10 pr-16 mt-10 mb-20"
     >
       <h1 class="home-title mb-10" ref="articleTitleRef">Articles</h1>
       <ArticleWaterfallList :posts="posts" :width="articleTitleWidth" />

diff --git a/docs/posts/peripheral/magic-trackpad-4.md b/docs/posts/peripheral/magic-trackpad-4.md
@@ -1,6 +1,5 @@
 ---
 title: Magic Trackpad 4：一个让我换回旧款的触控板
-description: 除了换了 Type-C，其他都比上代拉胯
 tags:
   - 外设
   - Apple

diff --git a/uno.config.ts b/uno.config.ts
@@ -38,12 +38,15 @@ export default defineConfig({
       warn: true,
       unit: "em",
     }),
-    // presetWebFonts({
-    //   provider: "bunny",
-    //   fonts: {
-    //     sans: "Inter",
-    //   },
-    // }),
   ],
   transformers: [transformerDirectives(), transformerVariantGroup()],
+  theme: {
+    breakpoints: {
+      xs: "375px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+    },
+  },
 });