Basic (2022-04-18)

Orange-themed PDWebsitemplate page (T005, C025-C029, B001) introducing attribute breakpoints like class="resize _3" _768="2" _640="1".

Overview

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

Live Preview

Open the example in a new tab

Page Sections

Section	Description
T005 header, nav, hero	Empty fixed <nav id="nav-top"> above a background-image block with icon top bar (home / blog / store, GitHub / Email), nav with show / HIDE buttons and LIST dropdown, and hero article with Code / Github buttons.
C026 icon cards	6 icon + title + text + MORE cards, 3 / 2 / 1 columns (_768="2" _640="1").
C027 numbered list + image	Background-image block with dark overlay link, text, 4 numbered links (2 / 1 columns) and an image.
C028 text + image grid	Intro text block followed by 6 image tiles.
C029 linked icon features	Background-image block with 4 icon figures linking to joball.tw pages, each with title and text.
C025 social contact	Instagram / GitHub contact items on var(--col-sys-dark).
B001 footer	3 columns BC001 intro / BC005 links + social icons / BC002 link list, copyright bar.

Interactions

Inline script in #nav: #btn-nav-show adds 'show' to the previous sibling of the T005 block (#nav-top, a fixed bar sliding in from top: -4rem) and locks body overflow; #btn-nav-collaspe adds 'collaspe' to #nav and after 300ms removes 'show' from the T005 block and restores scrolling. #nav-top has no content in the markup.

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	`_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)`

Entry starts with @import url("./fontawesome/css/all.css"), a path that does not exist and is absent from the compiled CSS. _PDColum defines ul.resize with _1024 / _768 / _640 / _480 / _414 column-count attributes.

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

Techniques

Attribute breakpoints: class="resize _3" plus _768="2" _640="1" _480="1" set column counts per max-width breakpoint.
Theme CSS variables in inline <style> on *: orange --col-sys rgba(255,150,60), --col-sys-dark rgb(195,90,0), --max-width 1140px, --module-hint 1.
Fixed top bar with backdrop-filter blur and T005-nav-top-show / -hide keyframes; max-width breakpoints 479 / 639 / 767 / 1139px.

External Assets

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)

Known Issues

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.