feat: PC 端容器宽度统一 80rem(1280px),五站均超 1200px

- 五主题 --container 令牌统一为 80rem(原 launchai 72 / ledger·devai 64 / findai 56)
- loading 骨架、alternatives/comparison 视图页容器同步放宽
- 新增 verify-widths.ts 实测脚本(1440 视口下断言容器 1280px)
This commit is contained in:
bigcode
2026-09-16 02:35:12 +08:00
parent 05440ffb5b
commit 3f87153ce3
4 changed files with 70 additions and 8 deletions
@@ -55,7 +55,7 @@ export async function AlternativesView({
const url = `${baseUrl()}/${locale}/tools/${baseSlug}-alternatives`;
return (
<div className="mx-auto max-w-4xl px-4 py-10 sm:px-6">
<div className="site-container px-4 py-10 sm:px-6">
<FaqPageJsonLd faqs={seo.faqs} />
<BreadcrumbJsonLd
items={[
@@ -285,7 +285,7 @@ export async function ComparisonView({
: null;
return (
<div className="mx-auto max-w-4xl px-4 py-10 sm:px-6">
<div className="site-container px-4 py-10 sm:px-6">
<BreadcrumbJsonLd
items={[
{ name: "Home", url: `${baseUrl()}/${locale}` },
@@ -10,7 +10,7 @@
export default function Loading() {
return (
<div className="site-container px-4 py-12 sm:px-6">
<div className="loading-shell mx-auto max-w-5xl">
<div className="loading-shell">
{/* ai-stack(classic):居中标题 + 三列方角卡片 */}
<div className="loading-variant lv-ai-stack">
<div className="mb-10 space-y-3 text-center">
+7 -5
View File
@@ -104,7 +104,8 @@ html {
text-wrap: balance;
}
/* 站点统一容器:宽度由各主题的 --container 令牌决定,
header / footer / 所有营销页面共用,保证整站宽度一致 */
header / footer / 所有营销页面共用,保证整站宽度一致。
宽度策略:PC 端(视口 > 1200px)一律 80rem(1280px),正文段落阅读宽度不受影响 */
.site-container {
margin-inline: auto;
width: 100%;
@@ -134,6 +135,7 @@ html {
/* ---------- 1. AI Stack:深蓝专业(浅:白底蓝主色 / 深:海军蓝) ---------- */
[data-theme="ai-stack"] {
--container: 80rem;
--primary: 224 64% 33%;
--primary-foreground: 0 0% 100%;
--ring: 224 64% 33%;
@@ -163,7 +165,7 @@ html {
/* ---------- 2. LaunchAI:暖橙社区(浅:暖白橙 / 深:深棕橙) ---------- */
[data-theme="launchai"] {
--container: 72rem;
--container: 80rem;
--primary: 16 85% 50%;
--primary-foreground: 0 0% 100%;
--background: 30 55% 97%;
@@ -187,7 +189,7 @@ html {
/* ---------- 3. The AI Ledger:报纸(浅:纸白墨黑 / 深:炭黑米白) ---------- */
[data-theme="the-ai-ledger"] {
--container: 64rem;
--container: 80rem;
--primary: 24 10% 12%;
--primary-foreground: 40 40% 98%;
--background: 42 45% 97%;
@@ -226,7 +228,7 @@ html {
/* ---------- 4. DevAI.tools:终端(深:默认深色 / 浅:日间终端) ---------- */
[data-theme="devai-tools"] {
--container: 64rem;
--container: 80rem;
--primary: 150 60% 38%;
--primary-foreground: 0 0% 100%;
--background: 150 20% 97%;
@@ -268,7 +270,7 @@ html {
/* ---------- 5. findai:极简(浅:纯白紫 / 深:深紫黑) ---------- */
[data-theme="findai"] {
--container: 56rem;
--container: 80rem;
--primary: 262 65% 52%;
--primary-foreground: 0 0% 100%;
--ring: 262 65% 52%;