Leo
5a48abb784
## ① 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。
50 lines
1.8 KiB
HTML
50 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Arcrun</title>
|
|
<!-- 🔴 共用底層：色票／字體／紙張紋理的**唯一真相源**是 arcrun-cis/css/arcrun-cis.css。
|
|
leo 08-04：「不會這裡又寫了一個新的 CSS？前面剛剛才說過不要創造新的？」
|
|
⇒ 這份是複製進來給 build 用的，**要改配色去改 arcrun-cis/css/ 那份**。 -->
|
|
<link rel="stylesheet" href="./src/arcrun-cis.css"/>
|
|
<link rel="stylesheet" href="./src/style.css"/>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- ── 左側邊欄（Google Drive 風格；leo：「左方側邊欄，在右方替換頁面」）── -->
|
|
<aside id="side">
|
|
<div class="brand">
|
|
<img class="wm-ink" src="./src/assets/arcrun-lockup-h-ink-trimmed.png" alt="Arcrun"/>
|
|
<img class="wm-paper" src="./src/assets/arcrun-lockup-h-paper-trimmed.png" alt="Arcrun"/>
|
|
</div>
|
|
|
|
<!-- 側邊欄由 JS 依帳號數動態產生（每個知識庫一頁，leo 08-04 指定） -->
|
|
<nav id="nav"></nav>
|
|
|
|
<div class="side-foot">
|
|
<div class="ver" id="ver"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ── 右側內容區（換頁）── -->
|
|
<section id="content">
|
|
<header>
|
|
<div class="status">
|
|
<div class="big" id="statusBig">啟動中…</div>
|
|
<div class="sub" id="statusSub"></div>
|
|
</div>
|
|
<button id="themeBtn" title="切換淺色／深色">◐</button>
|
|
<button class="primary" id="btnSync">立刻同步</button>
|
|
</header>
|
|
<main id="page"></main>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 內嵌覆蓋層，不另開小視窗 -->
|
|
<div class="overlay" id="overlay"><div class="sheet" id="sheet"></div></div>
|
|
|
|
<script src="./src/main.js" type="module"></script>
|
|
</body>
|
|
</html>
|