(shenyu-website) branch main updated: fix: fix index image show (#1091)

[likeguo]

This is an automated email from the ASF dual-hosted git repository.

likeguo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/shenyu-website.git


The following commit(s) were added to refs/heads/main by this push:
     new 3a22e449ed2 fix: fix index image show (#1091)
3a22e449ed2 is described below

commit 3a22e449ed296f85306d142db6222d7bc6a8bf53
Author: shown <yuluo08290...@gmail.com>
AuthorDate: Wed Oct 22 23:13:01 2025 +0800

    fix: fix index image show (#1091)
    
    Signed-off-by: yuluo-yx <yuluo08290...@gmail.com>
---
 src/pages/index.module.css | 76 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 203a6007bba..9a3945af474 100755
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -116,13 +116,20 @@
   animation-name: jackInTheBox;
   float: right;
   /* padding: 0 20px 20px; */
-  width: 37.5rem;
+  width: 100%;
+  max-width: 37.5rem;
   height: 400px;
   display: flex;
   align-items: center;
+  justify-content: center;
   background-color: rgb(245,246,247);
 }
 
+.heroLogo {
+  max-width: 100%;
+  height: auto;
+}
+
 .indexCtas {
   --ifm-button-size-multiplier: 1.6;
   display: flex;
@@ -271,8 +278,32 @@
     padding: 2rem;
   }
 
+  .hero {
+    padding: 2rem 1rem;
+  }
+
+  .hero .row {
+    flex-direction: column;
+  }
+
+  .hero .col {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .heroProjectTitle {
+    font-size: 2.5rem;
+    justify-content: center;
+  }
+
   .heroProjectTagline{
     font-size: 20px;
+    text-align: center;
+  }
+
+  .indexCtas {
+    justify-content: center;
   }
 
   .logoContainer{
@@ -280,13 +311,23 @@
     box-shadow: 6px 6px 22px 2px  rgb(0 0 51 / 20%);
     animation-duration: 2s;
     animation-name: jackInTheBox;
-    width: 85vw;
-    height: 400px;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    min-height: 300px;
     display: flex;
     align-items: center;
+    justify-content: center;
     background-color: rgb(245,246,247);
+    float: none;
+    margin-top: 2rem;
+    padding: 1rem;
   }
 
+  .heroLogo {
+    max-width: 100%;
+    height: auto;
+  }
 
   :global(.user-swiper-button-prev){
     top:950px !important; 
@@ -297,4 +338,33 @@
     top:950px !important;
     right: 0px !important;
   }
+}
+
+@media screen and (max-width: 576px) {
+  .hero {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .heroProjectTitle {
+    font-size: 2rem;
+  }
+
+  .heroProjectTagline {
+    font-size: 18px;
+  }
+
+  .buttonGetStarted,
+  .buttonGithub {
+    width: 8rem;
+    font-size: 14px;
+  }
+
+  .indexCtas a:last-of-type {
+    margin: 20px 16px;
+  }
+
+  .logoContainer {
+    min-height: 250px;
+    margin-top: 1.5rem;
+  }
 }
\ No newline at end of file