's'

2026-03-08 11:47:09 -05:00
parent d6c5135d97
commit 0e75fb2e6e
4 changed files with 40 additions and 35 deletions
--- 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;
--- 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}
--- 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 {
--- 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 {