Add responsive content width for ultrawide while keeping 1080p layout.

Scale from 896px on 1080p up to 1440px on 3440px screens via viewport breakpoints in site-width. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 00:46:39 +08:00
parent 26ccecb361
commit 1d887a7a10
5 changed files with 44 additions and 11 deletions
@@ -1,13 +1,13 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import TaijiBackdrop from "@/components/layout/taiji-backdrop";
+import { SITE_WIDTH, SITE_WIDTH_NARROW } from "@/components/layout/site-width";
 import { cn } from "@/lib/utils";

-/** 必须在组件内写完整类名，Tailwind 才能生成对应 CSS */
 const SHELL_WIDTH = {
-  default: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
-  narrow: "w-full max-w-3xl px-4 sm:px-6 lg:px-8",
-  wide: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
+  default: SITE_WIDTH,
+  narrow: SITE_WIDTH_NARROW,
+  wide: SITE_WIDTH,
 } as const;

 export type ContentShellWidth = keyof typeof SHELL_WIDTH;