4.0 KiB
4.0 KiB
水晶萬年曆 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，成員名字要清楚。