diff --git a/docs/color-token-convention.md b/docs/color-token-convention.md new file mode 100644 index 0000000..b40622d --- /dev/null +++ b/docs/color-token-convention.md @@ -0,0 +1,135 @@ +# CSS Color Token 命名規範 + +> 適用於任何前端專案。把自己的色值填進 `:root`，命名規則照用。 + +--- + +## 命名格式 + +``` +--color-[類別]-[修飾詞] +``` + +| 位置 | 說明 | +|---|---| +| `--color-` | 固定前綴，所有顏色 token 統一掛這個 | +| `[類別]` | 語意分類：`brand` / `bg` / `surface` / `text` | +| `[修飾詞]` | 可選，描述深淺或用途變體 | + +--- + +## 四個類別 + +### `brand` — 品牌色 +專案主色及其深淺變體。 + +```css +--color-brand /* 主色，最常用 */ +--color-brand-light /* 淡化版，用於 hover 背景、標籤底色 */ +--color-brand-dark /* 加深版，用於文字、引言、邊框 */ +``` + +### `bg` — 背景色 +頁面層級的大面積背景，通常是深色或中性色。 + +```css +--color-bg /* 最底層，全站頁面底色 */ +--color-bg-raised /* 稍淺一層，導覽列、頁尾、深色卡片 */ +--color-bg-alt /* 備用，與主底色形成微弱對比 */ +``` + +### `surface` — 表面色 +內容區塊的淺色底，通常是接近白色的暖/冷調。 + +```css +--color-surface /* 標準內容區底色 */ +--color-surface-soft /* 更溫和的變體，卡片、引言框 */ +``` + +### `text` — 文字色 + +```css +--color-text /* 一般內文 */ +--color-text-dark /* 強調、標題 */ +--color-text-muted /* 次要說明、標籤 */ +--color-text-inverse /* 用於深色背景上的淺色文字 */ +``` + +--- + +## :root 模板 + +直接複製，把 hex 換成你的品牌色： + +```css +:root { + /* Brand */ + --color-brand: ; + --color-brand-light: ; + --color-brand-dark: ; + + /* Background */ + --color-bg: ; + --color-bg-raised: ; + --color-bg-alt: ; + + /* Surface */ + --color-surface: ; + --color-surface-soft: ; + + /* Text */ + --color-text: ; + --color-text-dark: ; + --color-text-muted: ; + --color-text-inverse: ; +} +``` + +--- + +## 使用規則 + +**必須用 token，禁止硬寫 hex：** + +```css +/* ✅ */ +background: var(--color-brand); +color: var(--color-text-muted); + +/* ❌ */ +background: #ffcc00; +color: #4d4d4d; +``` + +**例外：`rgba()` 透明度** + +CSS 變數無法直接放進 `rgba()` 的色版參數，此情況允許保留 hex： + +```css +/* ✅ 允許 */ +border: 1px solid rgba(255, 204, 0, 0.28); +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +``` + +**頁面 scope token** + +單一頁面或元件專用的顏色，用有意義的前綴隔離，不納入全站 `:root`： + +```css +/* 只在該頁面的 + + + +
+ + + + + +
+
+ 1 + 1 = 2 +
+ + + + + + + + + \ No newline at end of file diff --git a/sechskies_brand_color_spec.html b/sechskies_brand_color_spec.html new file mode 100644 index 0000000..2a3bd55 --- /dev/null +++ b/sechskies_brand_color_spec.html @@ -0,0 +1,166 @@ + + + +
+
+
品牌色 Brand
+
+
+
+
+
--color-brand
+
#ffcc00
+
主強調色・按鈕・裝飾
+
+
+
+
+
+
--color-brand-light
+
#fceea7
+
淡黃底・hover 背景
+
+
+
+
+
+
--color-brand-dark
+
#4e492b
+
深棕黃文字・引言色
+
+
+
+
+ +
+
背景色 Background
+
+
+
+
+
--color-bg
+
#0a0a0a
+
全站頁面底色
+
+
+
+
+
+
--color-bg-raised
+
#1a1a1a
+
導覽列・頁尾・深色卡片
+
+
+
+
+
+
--color-bg-alt
+
#fcfaf2
+
淺色替代底
+
+
+
+
+ +
+
表面色 Surface
+
+
+
+
+
--color-surface
+
#fffdf7
+
section 底色
+
+
+
+
+
+
--color-surface-soft
+
#fff9e8
+
卡片・暖白底
+
+
+
+
+ +
+
文字色 Text
+
+
+
+
+
--color-text
+
#333333
+
一般內文
+
+
+
+
+
+
--color-text-dark
+
#1a1a1a
+
強調・標題文字
+
+
+
+
+
+
--color-text-muted
+
#4d4d4d
+
次要說明文字
+
+
+
+
+
+
--color-text-inverse
+
#f4f4f4
+
深色背景上的淺色文字
+
+
+
+
+ +
+ + 
:root {
+  /* Brand */
+  --color-brand:        #ffcc00;
+  --color-brand-light:  #fceea7;
+  --color-brand-dark:   #4e492b;
+
+  /* Background */
+  --color-bg:           #0a0a0a;
+  --color-bg-raised:    #1a1a1a;
+  --color-bg-alt:       #fcfaf2;
+
+  /* Surface */
+  --color-surface:      #fffdf7;
+  --color-surface-soft: #fff9e8;
+
+  /* Text */
+  --color-text:         #333333;
+  --color-text-dark:    #1a1a1a;
+  --color-text-muted:   #4d4d4d;
+  --color-text-inverse: #f4f4f4;
+}
+
+
diff --git a/variety/bangxiao.html b/variety/bangxiao.html new file mode 100644 index 0000000..1af1c8c --- /dev/null +++ b/variety/bangxiao.html @@ -0,0 +1,282 @@ + + + + + + + 水晶男孩｜爆笑養老院 + + + + + + + + +
+
+

爆笑養老院

+
+ LAUGH TILL YOU'RE OLD +
+
+
+ + + + + +
+ +
+

為什麼叫爆笑養老院？

+

+ 因為水晶男孩的綜藝節目，多到要看到老才看得完。 + 從 2016 年回歸後，六個大男孩分別在各種節目裡全力失控—— + 隊長帶著弟弟們上山下海，弟弟們又各自出去繼續暴走， + 加上超人回來了裡的爸爸系燃點，算下來要補的清單長到讓人頭皮發麻。 +

+

+ 在這裡你可以先算算，選完本命之後有幾個節目得補， + 然後找個舒服的位置坐好，慢慢養老，反正跑不掉了。 +

+
+ +
+

我要補幾個？

+
+ SELECT YOUR BIAS +
+

勾選你的本命（可複選），算出你的補番清單有多長。

+ +
+ + + + + + + +
+ + + +
+
+ +
+ + + + + + + + + + + + +