基礎版型 220418

橘色主題 PDWebsitemplate 頁面（T005、C025-C029、B001），導入 resize _3 搭配 _768 等屬性式斷點欄數。

概要

區塊	說明
T005 頁首、導覽、主視覺	空的固定 <nav id="nav-top">，其下為背景圖區塊：圖示頂列（首頁／部落格／商店、GitHub / Email）、含展開／HIDE 按鈕與 LIST 下拉的導覽列，以及附 Code / Github 按鈕的主視覺文章。
C026 圖示卡	6 張圖示＋標題＋內文＋MORE 卡，3 / 2 / 1 欄（_768="2" _640="1"）。
C027 編號列表＋圖片	背景圖區塊加深色遮罩，文字、4 個編號連結（2 / 1 欄）與一張圖片。
C028 文字＋圖片格	介紹文字區塊後接 6 張圖片格。
C029 圖示連結特色	背景圖區塊，4 個連到 joball.tw 頁面的圖示 figure，各含標題與內文。
C025 社群聯絡	var(--col-sys-dark) 背景上的 Instagram / GitHub 聯絡項目。
B001 頁尾	3 欄 BC001 介紹／BC005 連結與社群圖示／BC002 連結列表，版權列。

#nav 內 inline script：#btn-nav-show 對 T005 區塊的前一個兄弟（#nav-top，從 top: -4rem 滑入的固定列）加 show 並鎖定 body 捲動；#btn-nav-collaspe 對 #nav 加 collaspe，300ms 後移除 T005 區塊的 show 並恢復捲動。#nav-top 在標記中沒有內容。

名稱	版本	來源
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	`_PDTop.scss (top/_T001-_T005)`, `_PDColum.scss (ul.resize attribute breakpoints + colum/_C001..._C029)`, `_PDBottom.scss (bottom/_B001-_B004, _BC001-_BC006)`, `_PDAnimation.scss`, `_PDComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)`

入口開頭有 @import url("./fontawesome/css/all.css")，該路徑不存在且未出現在編譯後 CSS。_PDColum 定義 ul.resize 搭配 _1024 / _768 / _640 / _480 / _414 欄數屬性。

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

屬性式斷點：class="resize _3" 搭配 _768="2" _640="1" _480="1" 依 max-width 斷點設定欄數。
inline <style> 於 * 設定主題變數：橘色 --col-sys rgba(255,150,60)、--col-sys-dark rgb(195,90,0)、--max-width 1140px、--module-hint 1。
固定頂列使用 backdrop-filter 模糊與 T005-nav-top-show / -hide keyframes；max-width 斷點 479 / 639 / 767 / 1139px。

https://fakeimg.pl/1024/282828/eae0d0/?text=sample
https://pardn.io/image/head.png
https://pardn.io/web-template/image/20220418.jpg
https://joball.tw, /album, /case, /post (C029 links)
../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), url(../image/bg-m.svg) point to <folder>/icon and <folder>/image, which do not exist. Links are otherwise relative or absolute URLs.