dekun/zhimingge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Scale from 896px on 1080p up to 1440px on 3440px screens via viewport breakpoints in site-width.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-11 00:46:39 +08:00
parent 26ccecb361
commit 1d887a7a10
5 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/footer.tsx
+4 -1
View File
@@ -1,10 +1,13 @@
import React from "react";
import { VERSION } from "@/lib/constant";
import { SITE_WIDTH_INNER } from "@/components/layout/site-width";
function Footer() {
return (
<footer className="relative z-10 flex items-center justify-center gap-1 border-t border-border/40 bg-card/70 py-4 text-xs text-muted-foreground/80">
<div className="mx-auto flex w-full max-w-4xl items-center justify-center gap-1 px-4 sm:px-6 lg:px-8">
<div
className={`${SITE_WIDTH_INNER} flex items-center justify-center gap-1`}
>
<span className="italic">心诚则灵</span>
<span className="text-muted-foreground/60">·</span>
<span>知命阁 v{VERSION}</span>
components/header.tsx
+2 -5
View File
@@ -3,10 +3,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import { TaijiIcon } from "@/components/svg/taiji";
import { ModeToggle } from "@/components/mode-toggle";
/** 与 PageShell 同宽 — 类名须完整书写供 Tailwind 扫描 */
const HEADER_INNER =
"mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8";
import { SITE_WIDTH_INNER } from "@/components/layout/site-width";
const NAV_ITEMS = [
{ href: "/learn", label: "易经学习" },
@@ -40,7 +37,7 @@ export default function Header() {
return (
<header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
<div
className={`${HEADER_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
className={`${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
>
<Link href="/" className="flex items-center gap-2">
<TaijiIcon />
components/layout/site-width.ts
+18
View File
@@ -0,0 +1,18 @@
/**
* 响应式内容宽度（类名须完整书写，供 Tailwind 扫描）
* - ≤1920px（1080p）：约 896px
* - 1921px+（超宽入门）：约 1152px
* - 2560px+（带鱼屏）：约 1280px
* - 3440px+（超宽带鱼）：约 1440px
*/
export const SITE_PAD = "px-4 sm:px-6 lg:px-8";
export const SITE_WIDTH =
`w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
export const SITE_WIDTH_NARROW =
`w-full max-w-3xl ${SITE_PAD} min-[1921px]:max-w-4xl min-[2560px]:max-w-5xl min-[3440px]:max-w-6xl`;
/** 页眉 / 页脚内层，与主内容同宽 */
export const SITE_WIDTH_INNER =
`mx-auto w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
components/page-shell.tsx
+4 -4
View File
@@ -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;