From 0e75fb2e6e15a0b3723a4305ae10ac42b012acff Mon Sep 17 00:00:00 2001
From: eric <xiaoshuang.eric@gmail.com>
Date: Sun, 8 Mar 2026 11:47:09 -0500
Subject: [PATCH] 's'

---
 app/[locale]/ebook/ebook.module.css | 36 ++++++++++++++---------------
 app/components/Header.tsx           | 29 +++++++++++------------
 app/globals.css                     |  2 ++
 app/layout.tsx                      |  8 ++++++-
 4 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/app/[locale]/ebook/ebook.module.css b/app/[locale]/ebook/ebook.module.css
index f472704..13bd6dc 100644
--- a/app/[locale]/ebook/ebook.module.css
+++ b/app/[locale]/ebook/ebook.module.css
@@ -47,7 +47,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
+  font-size: 16px;
   font-weight: 600;
   color: #1a1a2e;
   letter-spacing: 2px;
@@ -155,7 +155,7 @@
 }
 
 .markdownBody {
-  font-size: 32px !important;
+  font-size: 16px !important;
   line-height: 1.85 !important;
   color: #2c3e50 !important;
   word-wrap: break-word;
@@ -163,10 +163,10 @@
 }
 
 .markdownBody h1 {
-  font-size: 48px !important;
+  font-size: 24px !important;
   font-weight: 800;
   color: #1a1a2e;
-  margin: 56px 0 20px;
+  margin: 28px 0 10px;
   padding-bottom: 0;
   border-bottom: none;
   line-height: 1.3;
@@ -175,42 +175,42 @@
 .markdownBody h1::after {
   content: "";
   display: block;
-  width: 80px;
-  height: 6px;
+  width: 40px;
+  height: 3px;
   background: linear-gradient(90deg, #4facfe, #00f2fe);
   border-radius: 3px;
-  margin-top: 16px;
+  margin-top: 8px;
 }
 
 .markdownBody h2 {
-  font-size: 42px !important;
+  font-size: 21px !important;
   font-weight: 700;
   color: #2c3e50;
-  margin: 44px 0 18px;
+  margin: 22px 0 9px;
   padding-bottom: 12px;
   border-bottom: 1px solid #f0f0f0;
   line-height: 1.3;
 }
 
 .markdownBody h3 {
-  font-size: 36px !important;
+  font-size: 18px !important;
   font-weight: 600;
   color: #34495e;
-  margin: 36px 0 14px;
+  margin: 18px 0 7px;
 }
 
 .markdownBody h4,
 .markdownBody h5,
 .markdownBody h6 {
-  font-size: 32px !important;
+  font-size: 16px !important;
   font-weight: 600;
   color: #4a5568;
-  margin: 28px 0 12px;
+  margin: 14px 0 6px;
 }
 
 .markdownBody p {
-  font-size: 32px !important;
-  margin-bottom: 20px;
+  font-size: 16px !important;
+  margin-bottom: 10px;
   line-height: 1.9;
 }
 
@@ -257,7 +257,7 @@
 
 .markdownBody pre code {
   font-family: "SF Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
-  font-size: 26px !important;
+  font-size: 13px !important;
   line-height: 1.6;
   color: #e2e8f0;
   background: none !important;
@@ -266,8 +266,8 @@
 
 .markdownBody code {
   font-family: "SF Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
-  font-size: 28px !important;
-  padding: 4px 10px;
+  font-size: 14px !important;
+  padding: 2px 6px;
   background: #f1f5f9;
   color: #e53e3e;
   border-radius: 6px;
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index baf425c..1656081 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -34,15 +34,14 @@ export default function Header() {
 
   return (
     <header
-      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+      className={`fixed top-0 left-0 right-0 z-50 w-full max-w-[100vw] transition-all duration-300 ${
         scrolled
           ? "bg-white/80 backdrop-blur-lg shadow-sm dark:bg-slate-900/80 dark:shadow-slate-950/50"
           : "bg-transparent"
       }`}
     >
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex h-16 items-center justify-between">
-          <Link href="/" className="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+      <div className="mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center justify-between gap-2 pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] sm:pl-[max(1.5rem,env(safe-area-inset-left))] sm:pr-[max(1.5rem,env(safe-area-inset-right))] lg:pl-[max(2rem,env(safe-area-inset-left))] lg:pr-[max(2rem,env(safe-area-inset-right))]">
+          <Link href="/" className="flex min-w-0 shrink items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
             <span className="text-2xl">🌍</span>
             <span className="hidden sm:inline">{t("siteName")}</span>
             <span className="sm:hidden">{t("siteNameShort")}</span>
@@ -67,7 +66,7 @@ export default function Header() {
             </button>
           </nav>
 
-          <div className="flex items-center gap-3">
+          <div className="flex shrink-0 items-center gap-1 sm:gap-3">
             {userEmail ? (
               <div className="flex items-center gap-2">
                 <span className="hidden max-w-[120px] truncate text-sm text-slate-600 dark:text-slate-400 sm:inline">
@@ -89,16 +88,9 @@ export default function Header() {
               </button>
             )}
             <ThemeToggle />
-            <a
-              href="#roadmap"
-              className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500 sm:inline-flex"
-            >
-              {t("explore")}
-            </a>
-
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
-              className="inline-flex items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 md:hidden"
+              className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 md:hidden"
               aria-label={t("toggleMenu")}
             >
               {mobileOpen ? (
@@ -111,13 +103,18 @@ export default function Header() {
                 </svg>
               )}
             </button>
+            <a
+              href="#roadmap"
+              className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500 sm:inline-flex"
+            >
+              {t("explore")}
+            </a>
           </div>
         </div>
-      </div>
 
       {mobileOpen && (
-        <div className="border-t border-slate-100 bg-white/95 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-900/95 md:hidden">
-          <nav className="mx-auto max-w-7xl space-y-1 px-4 py-3">
+        <div className="overflow-x-hidden border-t border-slate-100 bg-white/95 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-900/95 md:hidden">
+          <nav className="mx-auto w-full max-w-7xl space-y-1 px-4 py-3 pr-[max(1rem,env(safe-area-inset-right))]">
             {navLinks.map((link) => (
               <a
                 key={link.href}
diff --git a/app/globals.css b/app/globals.css
index c3d1d06..576fc3e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -46,10 +46,12 @@ body {
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
+  overflow-x: hidden;
 }
 
 html {
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 .marquee-container {
diff --git a/app/layout.tsx b/app/layout.tsx
index b0746a8..4f539ae 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "./context/ThemeContext";
@@ -14,6 +14,12 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = (() => {
   const theme = getThemeConfig();
   return {