Merge pull request #33 from kyubibii/develop

feat: optimize homepage display for small screens

Author: t0ng7u

newapi/overrides/assets/stylesheets/home.css

@@ -326,6 +326,126 @@
     width: 100%
 }
 
+/* 响应式调整：页面宽度较小时内容轻微上移 */
+@media screen and (max-width: 76.1875em) {
+    .mdx-hero__inner {
+        top: 53%;
+    }
+}
+
+@media screen and (max-width: 60em) {
+    .mdx-hero__inner {
+        top: 51%;
+    }
+}
+
+@media screen and (max-width: 40em) {
+    .mdx-hero__inner {
+        top: 48%;
+    }
+}
+
+/* 较小宽屏优化：根据视口高度调整字体大小 */
+@media screen and (max-height: 700px) and (min-width: 960px) {
+    .tx-hero__title {
+        font-size: 2rem !important;
+        height: 4rem !important;
+        line-height: 2rem !important;
+    }
+    
+    .tx-hero__stats {
+        margin: 0.8rem 0;
+    }
+    
+    .tx-stat__number {
+        font-size: 1.5rem;
+    }
+    
+    .tx-hero__meta {
+        margin: 0.8rem 0;
+        gap: 0.6rem;
+    }
+    
+    .tx-hero__meta-item {
+        padding: 0.3rem 0.8rem;
+        font-size: 0.9rem;
+    }
+    
+    .tx-hero__buttons {
+        margin-top: 1rem;
+    }
+}
+
+@media screen and (max-height: 600px) and (min-width: 960px) {
+    .tx-hero__title {
+        font-size: 1.8rem !important;
+        height: 3.6rem !important;
+        line-height: 1.8rem !important;
+    }
+    
+    .tx-hero__stats {
+        margin: 0.6rem 0;
+        gap: 1.5rem;
+    }
+    
+    .tx-stat__number {
+        font-size: 1.3rem;
+    }
+    
+    .tx-stat__label {
+        font-size: 0.7rem;
+    }
+    
+    .tx-hero__meta {
+        margin: 0.6rem 0;
+        gap: 0.5rem;
+    }
+    
+    .tx-hero__meta-item {
+        padding: 0.25rem 0.6rem;
+        font-size: 0.8rem;
+    }
+    
+    .tx-hero__buttons {
+        margin-top: 0.8rem;
+    }
+}
+
+@media screen and (max-height: 500px) and (min-width: 960px) {
+    .tx-hero__title {
+        font-size: 1.5rem !important;
+        height: 3rem !important;
+        line-height: 1.5rem !important;
+    }
+    
+    .tx-hero__stats {
+        margin: 0.4rem 0;
+        gap: 1rem;
+    }
+    
+    .tx-stat__number {
+        font-size: 1.1rem;
+    }
+    
+    .tx-stat__label {
+        font-size: 0.65rem;
+    }
+    
+    .tx-hero__meta {
+        margin: 0.4rem 0;
+        gap: 0.4rem;
+    }
+    
+    .tx-hero__meta-item {
+        padding: 0.2rem 0.5rem;
+        font-size: 0.75rem;
+    }
+    
+    .tx-hero__buttons {
+        margin-top: 0.6rem;
+    }
+}
+
 .mdx-hero__teaser {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
@@ -572,21 +692,42 @@
     justify-content: center;
 }
 
+/* 响应式调整：小屏幕时减少边距 */
+@media screen and (max-width: 60em) {
+    .tx-hero {
+        margin: 24px 1.5rem;
+    }
+}
+
+@media screen and (max-width: 40em) {
+    .tx-hero {
+        margin: 16px 1rem;
+    }
+}
+
 .tx-hero__title {
     margin-bottom: 1rem !important;
     font-weight: 700 !important;
     font-size: 2.5rem !important;
+    height: 5rem !important; /* 2倍字体大小 */
+    position: relative !important;
+    overflow: hidden !important;
+    line-height: 2.5rem !important; /* 等于字体大小 */
 }
 
 @media screen and (max-width: 76.1875em) {
     .tx-hero__title {
         font-size: 2rem !important;
+        height: 4rem !important; /* 2倍字体大小 */
+        line-height: 2rem !important; /* 等于字体大小 */
     }
 }
 
 @media screen and (max-width: 40em) {
     .tx-hero__title {
         font-size: 1.5rem !important;
+        height: 3rem !important; /* 2倍字体大小 */
+        line-height: 1.5rem !important; /* 等于字体大小 */
     }
 }
 
@@ -879,6 +1020,71 @@
 }
 
 /* Responsive Design for Architecture */
+
+/* 较小宽屏优化：根据视口高度调整架构图 */
+@media screen and (max-height: 700px) and (min-width: 960px) {
+    .tx-architecture {
+        max-width: 720px;
+        padding: 0.6rem;
+        gap: 0.4rem;
+        margin: 0.6rem auto 0.4rem;
+    }
+    
+    .tx-architecture__flow-node {
+        padding: 0.4rem 0.8rem;
+        min-width: 100px;
+    }
+    
+    .tx-architecture__flow-icon {
+        font-size: 1.1rem;
+    }
+    
+    .tx-architecture__flow-label {
+        font-size: 0.65rem;
+    }
+    
+    .tx-architecture__features {
+        gap: 0.25rem;
+        padding: 0.2rem 0;
+    }
+    
+    .tx-architecture__feature {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.6rem;
+    }
+    
+    .tx-architecture__feature-icon {
+        font-size: 0.8rem;
+    }
+    
+    .tx-architecture__providers {
+        gap: 0.3rem;
+        padding-top: 0.2rem;
+    }
+    
+    .tx-architecture__provider {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.6rem;
+    }
+    
+    .tx-architecture__provider-arrow {
+        width: 2.5rem;
+        height: 0.7rem;
+    }
+}
+
+@media screen and (max-height: 600px) and (min-width: 960px) {
+    .tx-architecture {
+        display: none; /* 在较小高度下隐藏架构图以节省空间 */
+    }
+}
+
+@media screen and (max-height: 650px) and (min-width: 960px) {
+    .tx-architecture {
+        display: none; /* 在较小高度下隐藏架构图以节省空间 */
+    }
+}
+
 @media screen and (max-width: 960px) {
     .tx-architecture {
         padding: 1rem;