基礎版型 220413

紫色主題 PDWebsitemplate 頁面（T004、C020-C024、B004），新增全螢幕行動選單、響應式 w_* 格線與純 CSS 百分比圓餅圖。

概要

區塊	說明
T004 頁首、導覽、主視覺	背景圖區塊：頂列含首頁／部落格／商店圖示與 GitHub / Email；導覽列含標題、展開按鈕、項目與 LIST 下拉、HIDE 收合鈕；主視覺文章附 Code / Github 按鈕。
C023 圖片卡	w_3_2_1 格線中 6 張陰影卡，含圖片與說明＋箭頭圖示。
C021 圖示特色	背景圖區塊，4 個圖示＋標題＋內文項目（w_4_2_1）。
C022 圓餅圖	4 個圓形百分比圖（percent=0/30/60/90）附 MORE 按鈕。
C020 文字卡	背景圖區塊，6 張文章卡各搭配圖示連結（w_3_2_1）。
C024 行動呼籲	紫色色帶，標題與「My Page」按鈕。
B004 頁尾	社群聯絡列（Instagram / GitHub），下方 4 欄 BC006 / BC002 / BC003 聯絡表單 / BC004 縮圖，最後版權列。

T004 導覽列 inline script：#btn-nav-show 對 T004 區塊加 show 並鎖定 body 捲動；#btn-nav-collaspe 加上 collaspe，300ms 後移除它與 show 並恢復捲動（搭配 T004-nav-show / T004-nav-collaspe keyframes）。
資料夾內有 js/PDWebsitemplate.js（IntersectionObserver 的 hover／點擊 act 與 unhover 輔助），但 index.html 並未載入。

名稱	版本	來源
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
Noto Sans TC (Google Fonts)	wght 100;300;400;500;700;900	https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap
Google Analytics gtag	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
js/PDWebsitemplate.js (local, not referenced)	-	js/PDWebsitemplate.js

項目	內容
SCSS 入口	`sass/PDWebsitemplate.min.scss`
輸出 CSS	`css/PDWebsitemplate.min.css`
Partials	`_PDTop.scss (top/_T001-_T004)`, `_PDColum.scss (w_* grid rules + colum/_C001..._C024)`, `_PDBottom.scss (bottom/_B001-_B004, _BC001-_BC006)`, `_PDAnimation.scss`, `_PDComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)`

模組庫改名為 _PD*.scss；_PDColum 新增 ul.resize[df=w_2 / w_3_2_1 / w_4_2 / w_4_2_1 / w_5_3_2] 響應式欄寬；C022 以 Sass @for 產生 percent="1..100" 規則。

cd target/20220413
npx sass sass/PDWebsitemplate.min.scss css/PDWebsitemplate.min.css --no-source-map || exit 1

純 CSS 圓餅圖：依 percent 屬性以 calc(3.6deg * N) 旋轉兩個半圓層，數值以 content: attr(percent) 顯示。
響應式欄位命名 df="w_3_2_1" = 各斷點 3 / 2 / 1 欄，寬度為 calc(100% / n - 2rem)。
inline <style> 於 * 設定主題變數：--col-sys rgb(185,120,200)、--default-radius 1rem、--max-width 1140px、--module-hint 1。
全螢幕行動選單，keyframe 展開／收合動畫並鎖定 body 捲動。

https://fakeimg.pl/1024/282828/eae0d0/?text=sample
https://fakeimg.pl/1024/282828/000000/?text=sample
https://pardn.io/image/head.png
https://pardn.io/web-template/image/20220413.jpg
/ and /blog (root-absolute header icon links)
../icon/watch/1/fff.svg, ../image/bg-l.svg, ../image/bg-m.svg (referenced by compiled CSS, not present in the folder)

Header icon links href="/" and href="/blog" are root-absolute and go to the host site root instead of the example. CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg), url(../image/bg-m.svg) point to folders that do not exist in 20220413.