[WIP] 修复搜索框与 navbar/卡片区三行左对齐问题（移除 transform scale）

[Copilot]

• Update assets/config.yml: remove text-align: center from outer div, update .google-search-container CSS (remove transform), update mobile media query, update Google logo img styles, update input search box styles
• Update assets/custom.css: add message content div rule and fix #main-section container margin

Original prompt

问题描述

页面三个区域左边缘不对齐（见截图）：

• Navbar（Microsoft, OneDrive...）从页面约 15% 处开始
• Google 搜索框居中于整个页面（因为外层 div 有 text-align: center）
• 卡片区（Finance, Travel...）从页面最左侧开始

根本原因

1. config.yml 的 message.content 最外层是 <div style="text-align: center; margin: 0; padding: 0;"> → 搜索框永远居中于整个页面，不受 80% 容器约束
2. .google-search-container 使用了 transform: scale(1.5) + transform-origin，transform 不影响文档流，放大后视觉上脱离对齐基准
3. 卡片区的 80% 宽度约束没有完全生效

---

需要做的修改

1. 修改 assets/config.yml

在 message.content 的 <style> 块中：

修改 .google-search-container 样式（删除 transform，改用真实尺寸）：

修改前：

.google-search-container {
  transform: scale(1.5);
  transform-origin: center top;
  margin-top: 80px;
  margin-bottom: 120px;
}

修改后：

.google-search-container {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 50px;
  text-align: left;
}

修改最外层 div，去掉 text-align: center：

修改前：

<div style="text-align: center; margin: 0; padding: 0;">

修改后：

<div style="margin: 0; padding: 0;">

修改 Google logo img，去掉居中依赖，改为 block 左对齐：

修改前：

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" style="height: 80px; margin-bottom: 25px;">

修改后：

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" style="height: 120px; margin-bottom: 25px; display: block;">

修改 input 搜索框，放大字体/padding 代替 scale：

修改前：

<input type="text" name="q" placeholder="Search Google..." autofocus autocomplete="off" 
  style="width: 100%; max-width: 800px; padding: 12px 25px; border-radius: 100px; 
  border: 1px solid var(--text-subtitle) !important; 
  background-color: var(--background) !important; 
  color: var(--text) !important; 
  font-size: 18px; outline: none !important; 
  box-shadow: none !important;">

修改后：

<input type="text" name="q" placeholder="Search Google..." autofocus autocomplete="off" 
  style="width: 100%; max-width: 100%; padding: 18px 30px; border-radius: 100px; 
  border: 1px solid var(--text-subtitle) !important; 
  background-color: var(--background) !important; 
  color: var(--text) !important; 
  font-size: 22px; outline: none !important; 
  box-shadow: none !important;">

同时更新移动端 media query 中的 .google-search-container：

修改前：

.google-search-container {
  transform: scale(1) !important;
  margin: 10px 0 15px 0 !important;
  padding: 0 5px !important;
}

修改后：

.google-search-container {
  width: 100% !important;
  margin: 10px 0 15px 0 !important;
  padding: 0 5px !important;
}

---

2. 修改 assets/custom.css

删除旧的 transform-origin 修复规则（如果上次 PR 已加入），替换为以下完整内容：

@charset "UTF-8";

/* ============================================================
   目标布局：
   - 第一行：Beacon logo 居中（hero/header 区域）
   - 第二行：navbar 链接居中对齐（同 80% 宽度基准）
   - 第三行以下：Google 搜索 + 卡片，统一在 80% 居中区
   ============================================================ */

/* 1. 顶部 Hero Header（logo + 标题）居中 */
#app .hero .hero-body {
    display: flex !important;
    justify-content: center !important;
    padding: 1.5rem 0 !important;
}

#app .hero .hero-body .container {
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* 2. Navbar 与 logo 行对齐（左右各留 10%） */
#app .navbar {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/* 3. 搜索区（message 区域）透明化 */
#app .message,
#app .message-body {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 4. Section 容器居中（Google搜索所在区域）*/
#app section.section > .container {
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto !important;
}

/* 5. message 内容区左对齐，继承容器宽度 */
#app section.section > .container .message-body > div {
    width: 100% !important;
    text-align: left !important;
}

/* 6. 主内容卡片区居中 */
#main-section > .container,
#app #main-section .container {
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

---

预期效果

修改后：

• Google logo 和搜索框左边缘与 navbar 左边缘对齐（同在 80% 容器内）
• 卡片区左边缘也对齐到同一基准
• 不再依赖 transform: scale() 的视觉缩放，改用真实 px/em 尺寸放大搜索框

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.