移动端样式优化

Author: LingLambda

src/components/TitileCard.astro

@@ -78,4 +78,20 @@ const { title, date, wordNum, description } = Astro.props;
   .word-num {
     flex: 0; /* 保持宽度 */
   }
+
+  @media (max-width: 768px) {
+    html {
+      font-size: 14px;
+    }
+    .post-card {
+	    gap: 0.3rem;
+	    height: 6.5rem;
+	    margin: 4px 0;
+	    max-weight: 95vw;
+	    border-radius: 5px;
+    }
+    .card-top {
+      margin-bottom: -5px;
+    }
+  }
 </style>

src/pages/blog/[page].astro

@@ -76,10 +76,6 @@ const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
     font-style: normal;
   }
 
-  .title {
-    white-space: nowrap; /* 不换行 */
-  }
-
   .blog-head {
   }
 
@@ -113,4 +109,15 @@ const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
   #text {
     margin: 3.5rem 0;
   }
+
+  @media (max-width: 768px) {
+    .title {
+      font-size: 1.5rem;
+    }
+    .description {
+      font-size: 1rem;
+      line-height: 0.8rem;
+      margin: 1rem 0;
+    }
+  }
 </style>