Improve mobile homepage responsiveness (#8)

Author: FenjuFu

docs/.vitepress/theme/components/HeroCarousel.vue

@@ -92,20 +92,25 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
 .carousel-link {
   position: absolute;
-  top: -4px;
-  right: -16px;
+  top: -8px;
+  right: 0;
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  max-width: min(100%, 220px);
   font-size: 13px;
   font-weight: 500;
   color: var(--vp-c-brand-1);
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
+  text-align: right;
+  line-height: 1.4;
   transition: color 0.25s;
   z-index: 1;
 }
@@ -162,14 +167,29 @@ onUnmounted(() => {
 }
 
 @media (max-width: 768px) {
+  .hero-carousel {
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
   .carousel-link {
-    right: 0;
+    position: static;
+    order: -1;
+    align-self: center;
+    justify-content: center;
+    max-width: min(100%, 240px);
     font-size: 12px;
-    top: -2px;
+    text-align: center;
   }
 
   .carousel-stage {
-    padding-top: 8px;
+    padding-top: 0;
+    width: 100%;
+  }
+
+  .carousel-img {
+    width: 100%;
+    height: 100%;
   }
 }
 </style>

docs/.vitepress/theme/index.css

@@ -75,53 +75,67 @@
   }
 
   /* 隐藏导航栏中的完整菜单，使用汉堡菜单代替 */
-  .VPNavBar .menu {
+  .VPNavBar .menu,
+  .VPNavBar .custom-toggles {
     display: none !important;
   }
 
+  .VPNavBarTitle .title {
+    max-width: calc(100vw - 156px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   /* 首页 hero 区域适配 */
   .VPHero {
-    padding-top: 48px !important;
-    padding-bottom: 32px !important;
+    padding-top: 32px !important;
+    padding-bottom: 24px !important;
+  }
+
+  .VPHero .container,
+  .VPHero .main {
+    width: 100% !important;
   }
 
-  /* 缩小移动端 hero 图片区域，避免图片占据过多屏幕空间 */
   .VPHero .image {
-    margin: -40px -24px -36px !important;
+    margin: 0 auto 8px !important;
+    order: -1;
   }
 
   .VPHero .image-container {
-    width: 200px !important;
-    height: 200px !important;
+    width: min(64vw, 260px) !important;
+    height: min(64vw, 260px) !important;
   }
 
   .VPHero .image-bg {
-    width: 140px !important;
-    height: 140px !important;
+    width: min(44vw, 180px) !important;
+    height: min(44vw, 180px) !important;
   }
 
   .VPHero .name {
-    font-size: 32px !important;
-    line-height: 1.2 !important;
+    font-size: clamp(28px, 8vw, 36px) !important;
+    line-height: 1.15 !important;
   }
 
   .VPHero .text {
-    font-size: 22px !important;
-    line-height: 1.3 !important;
+    font-size: clamp(22px, 7vw, 30px) !important;
+    line-height: 1.2 !important;
   }
 
   .VPHero .tagline {
-    font-size: 14px !important;
-    line-height: 1.5 !important;
+    font-size: 15px !important;
+    line-height: 1.7 !important;
     margin-top: 12px !important;
-    padding: 0 12px !important;
+    padding: 0 8px !important;
+    max-width: 100% !important;
   }
 
   .VPHero .actions {
     display: flex !important;
     flex-direction: column !important;
     gap: 12px !important;
-    padding: 0 24px !important;
+    padding: 0 !important;
     margin-top: 20px !important;
   }
 
@@ -134,20 +148,26 @@
     width: 100% !important;
     display: flex !important;
     justify-content: center !important;
-    padding: 10px 20px !important;
-    font-size: 15px !important;
+    padding: 12px 20px !important;
+    font-size: 16px !important;
     height: auto !important;
     line-height: 1.5 !important;
+    border-radius: 999px !important;
   }
 
   /* 首页 feature 卡片全宽显示 */
+  .VPHomeFeatures,
+  .VPFeatures,
   .VPFeatures .container {
     max-width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
 
   .VPFeatures .items {
     display: flex !important;
     flex-direction: column !important;
+    gap: 16px !important;
   }
 
   .VPFeatures .items .item {
@@ -157,7 +177,23 @@
   }
 
   .VPFeature {
-    padding: 20px 24px !important;
+    padding: 20px !important;
+    border-radius: 24px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .VPNavBarTitle .title {
+    max-width: calc(100vw - 132px);
+  }
+
+  .VPHero .container {
+    padding-left: 24px !important;
+    padding-right: 24px !important;
+  }
+
+  .VPFeature {
+    padding: 18px !important;
   }
 }
 

docs/en/index.md

@@ -90,11 +90,18 @@ features:
   font-weight: 500;
 }
 @media (max-width: 768px) {
+  .home-qr-section {
+    padding: 0 12px;
+  }
   .qr-container {
     gap: 24px;
+    margin-top: 24px;
+  }
+  .qr-card {
+    width: 100%;
   }
   .qr-card img {
-    width: 180px;
+    width: min(180px, 100%);
   }
 }
 </style>

docs/index.md

@@ -90,11 +90,18 @@ features:
   font-weight: 500;
 }
 @media (max-width: 768px) {
+  .home-qr-section {
+    padding: 0 12px;
+  }
   .qr-container {
     gap: 24px;
+    margin-top: 24px;
+  }
+  .qr-card {
+    width: 100%;
   }
   .qr-card img {
-    width: 180px;
+    width: min(180px, 100%);
   }
 }
 </style>