# 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](https://github.com/pardnio/demo-web/tree/main/target/20220413) |

## Live Preview

<iframe src="/target/20220413/" title="Basic (2022-04-13)" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20220413/)

## 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&amp;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.

```bash
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 &lt;style&gt; 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.

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)