Basic (2022-04-12)

Static PDWebsitemplate module page (T003, C012, C010, C008, C011, B003) with a red theme: header with contact chips, news timeline, team cards, gallery, footer.

Overview

Item	Value
Created	2022-04-12
Category	Business Examples
HTML files	`index.html`
Source	target/20220412

Live Preview

Open the example in a new tab

Page Sections

Section	Description
T003 header + nav + hero	Background-image header: brand block, GitHub / Email contact chips, inline nav with a hover dropdown (LIST), then hero text with Code / Github buttons.
C012 dated posts	Two post items with a date badge (01 / 一月), meta list (user / group / tag), title, excerpt, MORE link, plus a 'My Page' button.
C010 profile cards	4 cards (image, name, role, text) on a var(--col-sys) background.
C008 gallery	8 figure cards in 4 columns with caption title and text.
C011 icon features	4 icon + title + text items on var(--col-hint) background.
B003 footer	Top bar with social icons, then 4 columns: BC004 3x3 template thumbnails, BC006 link + date list, BC002 GitHub links, BC003 contact form (name / email inputs + submit), copyright bar.

Dependencies

Name	Version	Source
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

Styling

Item	Value
SCSS entry	`sass/PDWebsitemplate.min.scss`
Output 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)`

Same module library as 20220409 (reset inlined at top of the entry, no _init / function imports); each module is scoped by div[sn=XXXX]. Only 6 modules are used by the page.

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

Techniques

Attribute-driven module system: sn module ids, df="x2/x4" column grids, df="btn col fff xxl" buttons, wh="1" image frames, df="bg" background blocks.
Theme set by CSS variables in inline <style> on *: red --col-sys rgb(200,30,60), --col-sys-light/hint/dark, --max-width 1140px, --default-radius 0.5rem, --module-hint 1 (shows module labels).
Desktop-first max-width media queries (479 / 639 / 767 / 1023px) and pointer-fine hover with keyframe color transitions; CSS-only hover dropdown.

External Assets

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)

Known Issues

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.