基礎版型 220409

以 PDWebsitemplate 模組（T002、C004、C013、C006、C014、C007、B001）透過 sn 屬性組成的靜態形象頁，綠色主題。

概要

區塊	說明
T002 主視覺與固定導覽列	背景圖主視覺，固定 4rem 導覽列（標題、連結、hover 下拉「列表」），副標、標題、內文與 Code / GitHub 按鈕。
C004 圖示卡片	3 欄（df="x3"）共 6 張卡，各含 Font Awesome 圖示、標題與內文。
C013 服務項目	背景圖區塊，4 個圖示文字服務項目與一張圖片並排。
C006 價格方案	三種 VPS 方案（每月 888 / 1688 / 3360），列出規格並附 Email 按鈕。
C014 雙宣傳卡	背景圖上兩張 figure 卡（圖片＋說明）與描述文字。
C007 文章卡片	兩張文章卡：圖片、標題連結、作者／公司／標籤資訊列與摘要。
B001 頁尾	3 欄頁尾：BC001 公司介紹、BC005 連結與社群圖示、BC002 連結列表，下方版權列。

名稱	版本	來源
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	`function/_hsbTohsl.scss`, `_init.scss`, `_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)`, `_header-0.scss`, `_section-1.scss`

即使頁面只用 7 個模組仍編譯整套模組庫；每個模組以 div[sn=XXXX] 為範圍，並以 ::after 依 --module-hint 顯示模組代號。sass/index.scss（含 _header-0、_section-1）是頁面未引用的另一個殘留入口。

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

屬性驅動模組：sn="T002" 等選擇模組樣式；df="x2/x3" 欄數、df="btn fff col xl" 按鈕變化、wh="1" 圖片外框、df="sd" 陰影卡。
主題以 inline <style> 於 * 設定 CSS 變數：--col-sys（綠 rgb(30,120,50)）、--max-width 1140px、--default-radius 0.25rem、--module-hint 1。
桌面優先 max-width 斷點（413 / 479 / 639 / 767 / 959 / 1023px），並以 (hover: hover) and (pointer: fine) 搭配 keyframe 顏色過場處理 hover。
導覽列為純 CSS hover 下拉；640px 以下連結隱藏（display: none）。

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

Nav links /sample2, /sample2/gallery and /sample2/blog are root-absolute and point to pages that do not exist. 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 are not in the folder (bg-l.svg is overridden by inline background-image). The mobile menu <img df="nvb"> has an empty src, its icon CSS is commented out and no JS is loaded, so links are unreachable below 640px.