t193 四修:裁淨版 lockup+側邊欄選中態照 portal(leo 兩點)
## ① logo 比例不對+深色仍有白底+旁邊大量空白
三個症狀同一個根:**我用的是未裁淨的原始 PNG**。
portal 的註解早就寫著:原始 1840x560 **只有 32% 高度是實際字形**,上下大留白
⇒ 同 height 字看起來很小;留白處露出 paper-on-ink 自帶的 Ink 底板=白底。
portal 用的是裁淨版(986x176),但**只內嵌在它的 HTML base64 裡**,我抄不到才用了原始圖。
修:
- 從 portal 的 base64 抽出兩張裁淨版,存成 arcrun-cis/trimmed/ 供全站共用
- 兩張**都是透明底**(實測四邊留白 0)⇒ 深色模式**拿掉 Ink 底板**
- 空白是**版面**造成:側欄 232px 扣 padding 剩 184px,logo 高 24px 只有 134px ⇒ 空 50px
⇒ 側欄對齊 portal 的 216px,logo 改 width:100% 填滿可用寬度
實測(渲染後量像素):
logo 26px 高 × 151px 寬,右側剩餘空白 1px(原本 50px)
深色:側欄底(18,18,18) vs logo 上下皆(18,18,18) ⇒ 落差 0,無白底
## ② 側邊欄選中態太粗糙
leo:「參考現在 Portal 的格式⋯⋯這個比現在膠囊反紅精緻,重點是跟 portal 的形象符合」
修:逐字照 portal 的 #sidenav .nav.on ——
**不是實心膠囊**,而是 amber 字色 + 8% amber 底 + 右側 2px amber 邊。
側欄右緣也照 portal 用 2px amber 35%。
實測:選中列底(237,228,222)=amber 8%、右緣(176,74,47)=Relation、未選(242,241,237)=Canvas。
## 機械閘加三項守衛
- 不准用未裁淨的原始 lockup(字會太小)
- 選中態必須有 border-right-color: var(--amber)
- 不准再出現 border-radius:999px(膠囊,leo 已否決)
兩支閘全過;style.css 仍 0 個 hex。
This commit is contained in:
@@ -32,9 +32,14 @@ STRAY=$(grep -oiE '#[0-9a-f]{6}' "$CSS" | tr 'a-f' 'A-F' | sort -u \
|
||||
[ -z "$STRAY" ] && ok "沒有自創顏色" || ng "出現非 CIS 色:$(echo $STRAY | tr '\n' ' ')"
|
||||
|
||||
# ③ Logo 必須真的放進去(leo 點名的那條)
|
||||
grep -q "arcrun-lockup-h-ink.png" "$HTML" && ok "淺色 lockup 已放" || ng "缺淺色 lockup"
|
||||
grep -q "arcrun-lockup-h-paper-on-ink.png" "$HTML" && ok "深色 lockup 已放" || ng "缺深色 lockup"
|
||||
[ -f frontend/src/assets/arcrun-lockup-h-ink.png ] && ok "lockup 檔案存在" || ng "lockup 檔案不存在"
|
||||
grep -q "arcrun-lockup-h-ink-trimmed.png" "$HTML" && ok "淺色 lockup(裁淨版)已放" || ng "缺淺色裁淨版 lockup"
|
||||
grep -q "arcrun-lockup-h-paper-trimmed.png" "$HTML" && ok "深色 lockup(裁淨版)已放" || ng "缺深色裁淨版 lockup"
|
||||
[ -f frontend/src/assets/arcrun-lockup-h-ink-trimmed.png ] && ok "lockup 檔案存在" || ng "lockup 檔案不存在"
|
||||
# 🔴 不准用未裁淨的原始 PNG:1840x560 只有 32% 高是字形,同 height 看起來字很小
|
||||
grep -qE 'lockup-h-(ink|paper-on-ink)\.png' "$HTML" && ng "用到未裁淨的原始 lockup(字會太小)" || ok "沒用未裁淨的原始圖"
|
||||
# 側邊欄選中態要照 portal(amber 字+8% 底+右緣 2px),不是實心膠囊
|
||||
grep -q "border-right-color: var(--amber)" "$LAYOUT" && ok "選中態同 portal(右緣 amber)" || ng "選中態未照 portal"
|
||||
grep -q "border-radius: 999px" "$LAYOUT" && ng "還在用膠囊選中態(leo 已否決)" || ok "沒有膠囊選中態"
|
||||
grep -q "lockup-h.svg" "$HTML" 2>/dev/null && ng "用到已作廢的 SVG lockup(字腔缺失)" || ok "沒用作廢的 SVG lockup"
|
||||
|
||||
# ④ 深淺色都要成立(portal 有 data-theme,這裡也要)
|
||||
|
||||
Reference in New Issue
Block a user