Restaurant Introduction (2023-06-04)
Single-page landing site for a vegetarian brunch restaurant (耕園7293 / G-Burger) with hero, featured dishes, menu cards and contact footer.
Overview
Live Preview
Open the example in a new tab
Page Sections
Interactions
- js/index.js: scroll listener on body sets #view-tab sel=0..3 based on precomputed section offsets (scroll-spy) to highlight the active tab.
- js/index.js scrollTo(top): custom eased smooth scroll via setInterval (30ms steps, 1/5 of remaining distance) triggered by clicking each tab.
- #button-tab toggles the .show class on #view-tab to open a full-screen mobile menu; clicking an item closes it.
- Inline onclick window.open() on buttons to Uber Eats and Instagram.
Dependencies
Styling
index.scss holds reset, :root vars (--max-width 1024px, --col-sys #FF6B18) and the contact block; partials are @imported nested inside body selectors: _nav (fixed bar, sel-based active tab, mobile .show overlay), _top (hero, rotating bg keyframes, 25s cross-fade tiles), _hot (numbered glass cards via ::before), _menu (menu card grid with hover).
cd target/20230604
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- PDRenderKit 1.0 String-prototype DOM helpers: "id".$, ._attr(), ._click(), .class(), .class(), .$$class(), .$child().
- Attribute-driven state: ul[sel="n"] > li:nth-child(n+1) styles the active tab.
- Pure-CSS image carousel: stacked images with staggered animation-delay (0/5/10/15/20s) on a 25s opacity keyframe.
- backdrop-filter blur glass cards; flex-wrap with calc() widths for 1/2/3 columns.
- Breakpoints 480px, 640px, 768px, 800px; @media (hover: hover) and (pointer: fine) for hover effects.
- html fixed with body as the scroll container (overflow: hidden scroll), hidden scrollbars.
External Assets
