Basic (2022-04-13)

Purple-themed PDWebsitemplate page (T004, C020-C024, B004) adding a full-screen mobile nav, responsive w_* grids and CSS-only percentage pie charts.

Overview

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

Live Preview

Open the example in a new tab

Page Sections

Section	Description
T004 header, nav, hero	Background-image block: top bar with home / blog / store icons and GitHub / Email links; nav with title, ellipsis 'show' button, items and LIST dropdown, HIDE collapse button; hero article with Code / Github buttons.
C023 image cards	6 shadow cards with image and caption + arrow icon in a w_3_2_1 grid.
C021 icon features	Background-image block with 4 icon + title + text items (w_4_2_1).
C022 pie charts	4 circular percentage charts (percent=0/30/60/90) with MORE buttons.
C020 text cards with icon	Background-image block with 6 article cards each paired with an icon link (w_3_2_1).
C024 call to action	Purple band with heading and 'My Page' button.
B004 footer	Social contact row (Instagram / GitHub), then 4 columns BC006 / BC002 / BC003 contact form / BC004 thumbnails, copyright bar.

Interactions

Inline script in T004 nav: #btn-nav-show adds 'show' to the T004 block and locks body overflow; #btn-nav-collaspe adds 'collaspe', then after 300ms removes it and 'show' and restores scrolling (T004-nav-show / T004-nav-collaspe keyframes).
js/PDWebsitemplate.js (IntersectionObserver hover / tap 'act' + 'unhover' helper) exists in the folder but index.html does not load it.

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
js/PDWebsitemplate.js (local, not referenced)	-	js/PDWebsitemplate.js

Styling

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

Module library renamed to _PD*.scss; _PDColum adds ul.resize[df=w_2 / w_3_2_1 / w_4_2 / w_4_2_1 / w_5_3_2] responsive column widths; C022 generates percent="1..100" rules with a Sass @for loop.

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

Techniques

CSS-only pie chart: two half-circle layers rotated by calc(3.6deg * N) per percent attribute, value shown with content: attr(percent).
Responsive column naming df="w_3_2_1" = 3 / 2 / 1 columns across breakpoints using calc(100% / n - 2rem).
Theme CSS variables in inline <style> on *: --col-sys rgb(185,120,200), --default-radius 1rem, --max-width 1140px, --module-hint 1.
Full-screen mobile nav with keyframe show / collapse animations and body overflow lock.

External Assets

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)

Known Issues

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.