# Personal Blog with Cover 'Personal Alt' blog variant (PDRenderKit 1.0.1, JS-rendered): image hero with intro and computed SVG wave, light top header, card grid with pager. ## Overview | Item | Value | |---|---| | Created | 2023-07-21 | | Category | Personal Examples | | HTML files | `index.html` | | Source | [target/20230721](https://github.com/pardnio/demo-web/tree/main/target/20230721) | ## Live Preview [Open the example in a new tab](/target/20230721/) ## Page Sections | Section | Description | |---|---| | Top header (#top-header) | Social icon row, logo block and search/menu buttons; menu button opens #right-tab. | | Top nav (#top-nav) | Dropdowns Home (links to the sibling templates 20230719-20230723 on pardn.io), List (List 1/2, Grid 1/2), Post (1/2), plus Author, contact, 404. | | Home header | #default-header.home hero on a fakeimg background: 'I'm Pardn Chiu.' heading, intro text, GitHub/Email buttons and an inline SVG wave whose bezier paths are computed from viewport width. | | Home main column | Blog block, sponsored ad (image/left-ads.jpg to joball.tw) and a 4-card .grid-2 (tag badge, excerpt, share icons, 'More' button) with a 1/2/3 pager. | | Right sidebar (#section-right) | Popular/Recent tabs (home only), About with earth background and wave SVG, Popular Posts, Explore Topics, Newsletter input, Hot Tags. | | Inner pages | setList1/setList2/setGrid1/setGrid2 (list and grid layouts), setPost(1\|2) (article, share, tags, author box, comments/form), setAuthor (#user-header + posts), setContact (info, Google Maps iframe, form), set404. | | Footer (#bottom-footer) | 6-image Instagram strip, copyright, social icons and 'Back to Top' button. | ## Interactions - js/index.js: setHome/setList1/setList2/setGrid1/setGrid2/setPost/setAuthor/setContact/set404 rebuild the body via body.__child() and reset scrollTop (JS-only page switching, no URL change). - _RIGHT_TAB appends an off-canvas #right-tab menu; close button adds 'hide' and removes it after 300ms; submenu items toggle 'show' on click. - done(): body scroll listener shows #top-nav after scrolling past #top-header and writes a percent attribute (0-1000) as reading progress; #section-right top is set from viewport vs sidebar height. - _SVGListener() is called on load to inline span.svg[src] images; body class 'ft' is removed after 500ms. - setHome computes p1-p5 from body.clientWidth to generate three layered SVG wave <path>s for the hero bottom edge. ## 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 | | PDRenderKit | 1.0.1 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.1/dist/PDRenderKit.js | | Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX | | Noto Sans TC (font-family only) | - | declared in SCSS; no font stylesheet is linked, so it relies on a locally installed font or the sans-serif fallback | ## Styling | Item | Value | |---|---| | SCSS entry | `sass/index.scss` | | Output CSS | `css/index.css` | | Partials | `_top-nav.scss`, `_bottom-footer.scss`, `_header.scss`, `left/_index.scss`, `left/_topest.scss`, `left/_blog.scss`, `left/_list-1.scss`, `left/_list-2.scss`, `left/_grid-1.scss`, `left/_grid-2.scss`, `left/_post.scss`, `left/_comment.scss`, `left/_form.scss`, `left/_ads.scss`, `right/_index.scss`, `right/_button.scss`, `right/_list.scss`, `right/_topic.scss`, `right/_tag.scss (empty)`, `right/_contact.scss (empty)` | index.scss holds reset, shared components and #right-tab keyframes, then imports _top-nav, _bottom-footer, _header and the left (main column: blog, lists, grids, post, comment, form, ads) and right (sidebar) partial groups. _header styles the background-image #default-header (home hero variant) and post header; _top-nav uses a light (.light) contact style. Color/size tokens var(--color-dark-*), var(--color-light-*), var(--color-brand-*), var(--width-max), var(--bgcolor) are used but not defined in this folder (20230719 defines them in an inline <style>; here they are absent). ```bash cd target/20230721 npx sass sass/index.scss css/index.css --no-source-map || exit 1 ``` ## Techniques - Entire page built in JS with PDRenderKit string-tag syntax (('section' + '#id')._([...]), ._$(), ._click(), ._open(), 'fa-...'._fa), tag names assembled from single-letter globals passed to an IIFE. - Attribute-driven state: ul[index][sub-index] highlights menus, [percent] drives the scroll progress bar, [index] on carousels selects the visible slide via SCSS @for loops. - Flexbox layouts (no CSS grid), position: sticky in _top-nav and right/_index, backdrop-filter, multi-line clamp classes .line.r2/.r3, keyframe slide-in menu. - Inline style background via ._({ style: $bg }); runtime-generated SVG paths; breakpoints 640/800/1024/1140px. ## External Assets - https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images) - https://www.google.com/maps/embed?... (contact page iframe) - https://pardn.io/web-template/target/20230719 ... 20230723 (Home menu links to sibling templates on pardn.io) - local: image/wave.svg, image/eath.svg, image/left-ads.jpg (relative) - https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230721.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230721 ## Related - [Project Structure](/project-structure) - [Styling Workflow](/styling-workflow) - [Frameworks](/frameworks)