134 lines
4.0 KiB
Markdown
134 lines
4.0 KiB
Markdown
 
|
# 水晶萬年曆 2026 — 設計決策與改版重點
|
|||
|
|
|
|||
|
|
> 來源：Cursor 對話串整理（可直接貼 Notion）
|
|||
|
|
> 範圍：`calendar2026.html`、`assets/css/calendar.css`
|
|||
|
|
> 日期：2026-07
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 一、站主設計偏好（從公開頁歸納）
|
|||
|
|
|
|||
|
|
對照已公開頁（首頁、bangxiao、variety-shows、ebook、NJTW5）讀到的設計感：
|
|||
|
|
|
|||
|
|
| 面向 | 偏好 |
|
|||
|
|
|------|------|
|
|||
|
|
| 色調 | 頁面黑底，內容落在奶油色 section；金 `#ffcc00` 當點綴／底線，不當整片 UI 底色 |
|
|||
|
|
| 氣氛 | 偶像粉絲紀念冊、藝廊策展，不是生產力工具／SaaS 儀表板 |
|
|||
|
|
| 版型 | 單欄敘事、扁平區塊；卡片只在「要互動」時出現 |
|
|||
|
|
| 元件 | 金色實心膠囊按鈕、淺底 tabs；陰影溫柔；glow 只用在重點字 |
|
|||
|
|
| 文案感 | 溫柔策展、具體回憶，不堆 emoji 狀態列 |
|
|||
|
|
|
|||
|
|
### 萬年曆初期違和點
|
|||
|
|
|
|||
|
|
- 深色玻璃卡片、霓虹色事件點（紅／綠／橘 glow）
|
|||
|
|
- 篩選 chip＋emoji（🎂🌟🎤）
|
|||
|
|
- 側欄內嵌捲軸
|
|||
|
|
- 整體偏「AI 日曆 dashboard」，與全站暖紙面藝廊感不符
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 二、改版原則（站主明確指示）
|
|||
|
|
|
|||
|
|
### ✅ 可以做
|
|||
|
|
|
|||
|
|
- **只改設計感（換皮）**：顏色、字級、陰影、圓角、照片呈現
|
|||
|
|
- 對齊全站暖紙面 section 視覺
|
|||
|
|
- 用 color token，避免硬寫霓虹色
|
|||
|
|
|
|||
|
|
### ❌ 不可以做
|
|||
|
|
|
|||
|
|
- **不要擅自改版型**（例：雙欄改單欄）
|
|||
|
|
- 沒說「執行」前不應改檔（本次站主後來說直接做）
|
|||
|
|
- 只改被點名的頁／區塊
|
|||
|
|
|
|||
|
|
> 站主原話重點：
|
|||
|
|
> 「我只覺擬改設計，沒有叫你動版型」
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 三、已落地的視覺調整
|
|||
|
|
|
|||
|
|
### 整體皮
|
|||
|
|
|
|||
|
|
- 深色玻璃卡 → 暖色 `section` 卡（`--color-surface` / `--color-surface-soft`）
|
|||
|
|
- 控制列與篩選：淺底膠囊＋金色 active
|
|||
|
|
- 日期格、週末色、today／selected：低調暖色系
|
|||
|
|
- 事件點統一品牌金，拿掉多色霓虹
|
|||
|
|
- Modal 改暖紙底
|
|||
|
|
|
|||
|
|
### 版型（維持原狀）
|
|||
|
|
|
|||
|
|
- `calendar-layout` **維持雙欄**（`1fr 380px`）
|
|||
|
|
- 手機 `max-width: 900px` 才改單欄
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 四、成員／演唱會照片規則（重點）
|
|||
|
|
|
|||
|
|
### 站主意圖
|
|||
|
|
|
|||
|
|
- **要曬成員美照**，不是小頭像＋蛋糕 icon
|
|||
|
|
- 成員名字要清楚可見
|
|||
|
|
- 不要一堆 🎂 之類花字
|
|||
|
|
- 右側生日卡可上下排（圖上、字下）
|
|||
|
|
|
|||
|
|
### 裁切規則（A4）
|
|||
|
|
|
|||
|
|
| 規則 | 說明 |
|
|||
|
|
|------|------|
|
|||
|
|
| 外框比例 | **A4 直式**（`aspect-ratio: 210 / 297`） |
|
|||
|
|
| 填滿方式 | `object-fit: cover`（**不留黑邊**） |
|
|||
|
|
| 縮放原則 | 以 A4 為裁切框，放大縮小盡量保留原圖主體 |
|
|||
|
|
| 對焦 | `object-position: center 28%`（優先臉／上半身） |
|
|||
|
|
|
|||
|
|
> 站主原話重點：
|
|||
|
|
> 「以 A4 尺寸為裁切尺寸，放大縮小盡量保持原本的圖」
|
|||
|
|
> 「怎麼有留黑」→ 禁止用 `contain` 造成黑邊
|
|||
|
|
|
|||
|
|
### 適用範圍（必須一致）
|
|||
|
|
|
|||
|
|
- ✅ 右側生日卡
|
|||
|
|
- ✅ 右側演唱會卡
|
|||
|
|
- ✅ Modal 演唱會圖
|
|||
|
|
- ❌ 不可只改生日、漏掉演唱會
|
|||
|
|
|
|||
|
|
### 右側生日卡版型
|
|||
|
|
|
|||
|
|
- **上下排**：照片在上、名字／英文／日期在下
|
|||
|
|
- 照片用 A4 比例大圖卡（海報感）
|
|||
|
|
- 標題顯示成員名，不顯示「生日快樂🎂」
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 五、文案／顯示清理
|
|||
|
|
|
|||
|
|
- 篩選按鈕拿掉 emoji（成員生日／出道重逢／演唱會）
|
|||
|
|
- 事件標題顯示時清掉 `🎂🌟🎤`
|
|||
|
|
- 生日卡拿掉蛋糕 icon
|
|||
|
|
- Modal 生日標題改成員名
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 六、待確認／可選下一步
|
|||
|
|
|
|||
|
|
- [ ] 不同成員圖各自對焦點微調（例：`center 20%` / `center 35%`）
|
|||
|
|
- [ ] 相紙邊框／海報感細節
|
|||
|
|
- [ ] 字級層級、卡片密度再微調
|
|||
|
|
- [ ] 是否要把月曆格內生日照再放大
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 七、相關檔案
|
|||
|
|
|
|||
|
|
| 檔案 | 用途 |
|
|||
|
|
|------|------|
|
|||
|
|
| `calendar2026.html` | 萬年曆頁面與 JS 邏輯 |
|
|||
|
|
| `assets/css/calendar.css` | 萬年曆專用樣式（本次主要改動） |
|
|||
|
|
| `assets/css/style.css` | 全站 color token |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 八、一句話結論
|
|||
|
|
|
|||
|
|
> 萬年曆只換皮、不換版型；右側生日／演唱會照以 **A4 裁切框＋cover 填滿** 曬海報，不留黑邊、不堆蛋糕 emoji，成員名字要清楚。
|