基礎版型 220412

紅色主題 PDWebsitemplate 模組靜態頁（T003、C012、C010、C008、C011、B003）：聯絡資訊頁首、日期文章、人物卡、圖庫與頁尾。

概要

區塊	說明
T003 頁首、導覽與主視覺	背景圖頁首：品牌區、GitHub / Email 聯絡資訊、含 hover 下拉（LIST）的導覽列，接主視覺文字與 Code / Github 按鈕。
C012 日期文章	兩則文章，含日期標記（01 / 一月）、資訊列（作者／群組／標籤）、標題、摘要、MORE 連結與「My Page」按鈕。
C010 人物卡	var(--col-sys) 背景上的 4 張卡（圖片、名稱、職稱、內文）。
C008 圖庫	4 欄共 8 張 figure 卡，附說明標題與內文。
C011 圖示特色	var(--col-hint) 背景上 4 個圖示＋標題＋內文項目。
B003 頁尾	頂部社群圖示列，下方 4 欄：BC004 3x3 模板縮圖、BC006 連結與日期列表、BC002 GitHub 連結、BC003 聯絡表單（名稱／信箱＋送出），最後版權列。

名稱	版本	來源
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

項目	內容
SCSS 入口	`sass/PDWebsitemplate.min.scss`
輸出 CSS	`css/PDWebsitemplate.min.css`
Partials	`_PDModuleTop.scss (top/_T-001, _T-002, _T-003, _T004)`, `_PDModuleColum.scss (colum/_C001..._C019)`, `_PDModuleBottom.scss (bottom/_B001-_B003, _BC001-_BC006)`, `_PDModuleAnimation.scss`, `_PDModuleComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)`

與 20220409 相同的模組庫（reset 直接寫在入口檔，無 _init / function 引入）；各模組以 div[sn=XXXX] 為範圍，頁面僅使用 6 個。

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

屬性驅動模組系統：sn 模組代號、df="x2/x4" 欄格、df="btn col fff xxl" 按鈕、wh="1" 圖框、df="bg" 背景區塊。
inline <style> 於 * 設定 CSS 變數：紅色 --col-sys rgb(200,30,60)、--col-sys-light/hint/dark、--max-width 1140px、--default-radius 0.5rem、--module-hint 1（顯示模組標籤）。
桌面優先 max-width 斷點（479 / 639 / 767 / 1023px），pointer-fine hover 搭配 keyframe 顏色過場；純 CSS hover 下拉選單。

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

CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg) and url(../image/bg-m.svg) resolve to <folder>/icon and <folder>/image, which do not exist (the [wh] hover overlay icon will 404; bg-l.svg is overridden by inline background-image). No other path depends on the host.