From ab6e8b6aaefd8433a37d65252717b473306b5972 Mon Sep 17 00:00:00 2001
From: LofiSu <linsu269@gmail.com>
Date: Sun, 10 Nov 2024 22:11:45 +0800
Subject: [PATCH 1/2] =?UTF-8?q?Fix=EF=BC=9ACSS=20media=20queries=20solve?=
 =?UTF-8?q?=20mobile=20adaptation=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/HomePageLanguageCard.tsx  | 37 ++++++++++++++++---
 .../home/components/HomepageCodeDisplay.tsx   | 22 ++++++++++-
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/pages/home/components/HomePageLanguageCard.tsx b/src/pages/home/components/HomePageLanguageCard.tsx
index dd930442a00..3967804307b 100644
--- a/src/pages/home/components/HomePageLanguageCard.tsx
+++ b/src/pages/home/components/HomePageLanguageCard.tsx
@@ -29,6 +29,7 @@ export default function HomePageLanguageCard() {
 
   return (
     <div>
+      <style>{mediaQueryStyles}</style>
       <div style={{ textAlign: "center" }}>
         <h2>Quick Start!</h2>
         <p>Choose a language to get started.</p>
@@ -42,33 +43,37 @@ export default function HomePageLanguageCard() {
         }}
       >
         <Card.Grid
+          className="grid-item"
           style={gridStyle}
           onClick={() => {
             window.location.href = getLanguageUrl("java-serialization");
           }}
         >
           <img src={imageUrls.java} style={imageStyle} alt="Java logo" />
-          Java
+          <span>Java</span>
         </Card.Grid>
         <Card.Grid
+          className="grid-item"
           style={gridStyle}
           onClick={() => {
             window.location.href = getLanguageUrl("python");
           }}
         >
           <img src={imageUrls.python} style={imageStyle} alt="Python logo" />
-          Python
+          <span>Python</span>
         </Card.Grid>
         <Card.Grid
+          className="grid-item"
           style={gridStyle}
           onClick={() => {
             window.location.href = getLanguageUrl("golang");
           }}
         >
           <img src={imageUrls.golang} style={imageStyle} alt="Golang logo" />
-          Golang
+          <span>Golang</span>
         </Card.Grid>
         <Card.Grid
+          className="grid-item"
           style={gridStyle}
           onClick={() => {
             window.location.href = getLanguageUrl("javascript");
@@ -79,18 +84,20 @@ export default function HomePageLanguageCard() {
             style={imageStyle}
             alt="JavaScript logo"
           />
-          JavaScript
+          <span>JavaScript</span>
         </Card.Grid>
         <Card.Grid
+          className="grid-item"
           style={gridStyle}
           onClick={() => {
             window.location.href = getLanguageUrl("rust");
           }}
         >
           <img src={imageUrls.rust} style={imageStyle} alt="Rust logo" />
-          Rust
+          <span>Rust</span>
         </Card.Grid>
         <Card.Grid
+          className="grid-item"
           style={gridStyle}
           onClick={() => {
             window.location.href = getLanguageUrl(
@@ -99,7 +106,7 @@ export default function HomePageLanguageCard() {
           }}
         >
           <img src={imageUrls.more} style={imageStyle} alt="More languages" />
-          More
+          <span>More</span>
         </Card.Grid>
       </Card>
     </div>
@@ -117,7 +124,25 @@ const gridStyle: React.CSSProperties = {
   borderRadius: "10px",
   fontWeight: "bold",
   fontSize: "18px",
+  cursor: "pointer",
 };
+
+//添加媒体查询
+const mediaQueryStyles = `
+  @media (max-width: 768px) {
+    .grid-item {
+      width: 100% !important;
+    }
+    .grid-item img {
+      width: 28px !important;
+      height: 28px !important;
+    }
+    .grid-item span {
+      display: none !important; 
+    }
+  }
+`;
+
 const imageStyle: React.CSSProperties = {
   width: "38px",
   height: "38px",
diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx b/src/pages/home/components/HomepageCodeDisplay.tsx
index 529472ae3b3..2f19d8aed1b 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -48,26 +48,44 @@ public class Example {
 
   const programmingImageUrl = useBaseUrl("/home/programming.svg");
 
+  const mediaQueryStyles = `
+  @media (max-width: 768px) {
+    .desktop-only {
+      display: none !important;
+    }
+    .code-display {
+      width: 100% !important;
+    }
+    .code-display pre {
+      font-size: 8px !important; // 调整移动端字体大小
+    } 
+  }
+  `;
   return (
     <>
+      <style>{mediaQueryStyles}</style>
       <div
         style={{
           display: "flex",
-          margin: "12%",
+          margin: "10%",
           borderRadius: "10px",
+          flexDirection: "row",
         }}
       >
         <div
+          className="desktop-only"
           style={{
             width: "50%",
             justifyContent: "flex-start",
             margin: "50px",
             height: "auto",
+            display: "block",
           }}
         >
           <img src={programmingImageUrl} alt="programming-coding" />
         </div>
         <div
+          className="code-display"
           style={{
             position: "relative",
             padding: "12px",
@@ -75,7 +93,7 @@ public class Example {
             backgroundColor: "#2d2d2d",
             borderRadius: "5px",
             width: "50%",
-            height: "auto",
+            height: "0 auto",
           }}
         >
           {/* 复制按钮 */}

From 50464a57fdc56fb406b2bad97a8a9d586c651ab7 Mon Sep 17 00:00:00 2001
From: LofiSu <linsu269@gmail.com>
Date: Sun, 10 Nov 2024 22:13:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?Fix=EF=BC=9ACSS=20media=20queries=20solve?=
 =?UTF-8?q?=20mobile=20adaptation=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/components/HomePageLanguageCard.tsx | 2 +-
 src/pages/home/components/HomepageCodeDisplay.tsx  | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/components/HomePageLanguageCard.tsx b/src/pages/home/components/HomePageLanguageCard.tsx
index 3967804307b..ae77cf10d55 100644
--- a/src/pages/home/components/HomePageLanguageCard.tsx
+++ b/src/pages/home/components/HomePageLanguageCard.tsx
@@ -127,7 +127,7 @@ const gridStyle: React.CSSProperties = {
   cursor: "pointer",
 };
 
-//添加媒体查询
+//媒体查询
 const mediaQueryStyles = `
   @media (max-width: 768px) {
     .grid-item {
diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx b/src/pages/home/components/HomepageCodeDisplay.tsx
index 2f19d8aed1b..85f2c9eee81 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -47,7 +47,8 @@ public class Example {
   };
 
   const programmingImageUrl = useBaseUrl("/home/programming.svg");
-
+  
+  //媒体查询
   const mediaQueryStyles = `
   @media (max-width: 768px) {
     .desktop-only {
@@ -57,7 +58,7 @@ public class Example {
       width: 100% !important;
     }
     .code-display pre {
-      font-size: 8px !important; // 调整移动端字体大小
+      font-size: 8px !important; 
     } 
   }
   `;