# 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](https://github.com/pardnio/demo-web/tree/main/target/20220418) | ## Live Preview [Open the example in a new tab](/target/20220418/) ## 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. ```bash 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. ## Related - [Project Structure](/project-structure) - [Styling Workflow](/styling-workflow) - [Frameworks](/frameworks)