Minimal Blog
'Minimal' single-column blog variant (PDRenderKit 1.0.1, JS-rendered): compact nav with side menu, minimal post list, post, contact and 404 pages.
Overview
| Item | Value |
|---|---|
| Created | 2023-07-23 |
| Category | Blog Examples |
| HTML files | index.html |
| Source | target/20230723 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Top nav (#top-nav) | Menu button (opens side menu), centered 'PARDN LTD', search button. |
| Side menu (#right-tab via _LEFT_TAB) | Home dropdown (Magazine/Personal/Personal Alt/Classic link to pardn.io, Minimal = this page), List, Post 1/2, contact, 404, social icons. |
| Home (.list-min) | 4 articles each with author avatar, meta (author, date, category, comment count), title, image, excerpt, share icons; 1/2/3 pager. |
| List page | #default-header plus the same .list-min list. |
| Post 1 / Post 2 (.list-post) | Post header variant and article body with comments. |
| Contact / 404 | Contact info with Google Maps iframe and form; 404 with 'Return Home' button. |
| Footer (#bottom-footer) | Instagram image strip, copyright, social icons, 'Back to Top'. |
Interactions
- js/index.js: setHome/setList/setPost(1|2)/setContact/set404 rebuild the body with body.__child() and reset scrollTop.
- _LEFT_TAB appends the off-canvas menu; close adds 'hide' then removes it after 300ms; dropdown items toggle 'show'.
- _SVGListener() inlines span.svg images; 'ft' class removed from body after 500ms. No scroll listener in this variant.
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 |
Only three partials (_top-nav sticky nav, _bottom-footer, _header for default/post headers); index.scss itself contains the #body column (max-width 60rem), .list-min, .list-post, comments and #right-tab keyframes. 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).
cd target/20230723
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.
- Single centered column (max-width 60rem), sticky top nav, backdrop-filter, .line.r2/.r3 clamps; breakpoints 640/800/1024/1280px.
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 ... 20230722 (side menu links to sibling templates on pardn.io)
- local: image/wave.svg, image/left-ads.jpg (relative)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230723.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230723
