fix(styles): complete the rem pattern, kill rubber-band white edges, drop demo image (v3.2.1)

- --header-height removed from :root (bare 0 would break calc; JS
  setProperty ignores the initial unit anyway) — commented rem() example
  left in vars.scss, calc fallback is now var(--header-height, 0rem)
- restore overscroll-behavior: none + background on html — no more white
  rubber-band edges around the page
- remove demo placeholder image and its picture block from the demo page
  (docs examples now use a neutral path)
- pattern sweep verified: no px/rem/em literals left in src/styles outside
  the converter functions and the typed zero fallback

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: hHolyMolly

AGENTS.md

@@ -39,8 +39,9 @@ hand-editable. Keep it that way.
   Design tokens (colors/z-index/radius/header-height) in `styles/vars.scss`.
 - **Sizing pattern**: all sizes are written in pixels through `rem()` / `em()`
   (`rem(18)`, `rem(12 24)`, `rem(0 auto)`, `rem(320px)`, `em(20)`) — never raw
-  `px`/`rem` literals in declarations. Exceptions: media queries inside
-  `_mixins.scss` (px by design) and `--header-height` (px — set from JS).
+  `px`/`rem` literals in declarations. Only exceptions: media queries inside
+  `_mixins.scss` (px by design) and the typed zero fallback in
+  `var(--header-height, 0rem)` (bare 0 breaks calc()).
 - **Critical CSS**: `optimization.criticalCSS: true` inlines compiled
   `critical.scss` into `<head>` (html task, `__CRITICAL_CSS__` placeholder) —
   it never compiles to a standalone file.

README.md

@@ -117,7 +117,7 @@ Icons size from `font-size` and color from `currentColor` (`.icon` in `ui/_icon.
 The build creates a `.webp` sibling for every jpg/png (AVIF — opt-in via `images.avif`):
 
 ```html
-@@include('components/_picture.html', { "src": "./assets/img/demo", "ext": "jpg", "alt": "…", "class": "", "loading":
+@@include('components/_picture.html', { "src": "./assets/img/photo", "ext": "jpg", "alt": "…", "class": "", "loading":
 "lazy", "width": "1200", "height": "675" })
 ```
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gulp-template",
   "description": "Modern Gulp 5 template for fast frontend development",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "private": true,
   "type": "module",
   "author": "HolyMolly",

src/assets/img/demo.jpg

@@ -56,7 +56,7 @@ Add an SVG to `src/assets/sprites/`, then:
 All params required; the `.webp` sibling is generated by the build:
 
 ```html
-@@include('components/_picture.html', { "src": "./assets/img/demo", "ext": "jpg", "alt": "…", "class": "", "loading":
+@@include('components/_picture.html', { "src": "./assets/img/photo", "ext": "jpg", "alt": "…", "class": "", "loading":
 "lazy", "width": "1200", "height": "675" })
 ```
 

src/html/README.md

@@ -226,16 +226,6 @@
     flex-shrink: 0;
   }
 
-  .demo__media {
-    margin-top: 2.5rem;
-  }
-
-  .demo__media img {
-    width: 100%;
-    height: auto;
-    border-radius: 12px;
-  }
-
   .demo__footer {
     position: absolute;
     bottom: 1rem;
@@ -456,20 +446,6 @@ <h1 class="demo__title">
         Prettier
       </span>
     </div>
-
-    <!-- Responsive image demo: build generates the .webp sibling automatically -->
-    <div class="demo__media">
-      <!-- prettier-ignore -->
-      @@include('components/_picture.html', {
-        "src": "./assets/img/demo",
-        "ext": "jpg",
-        "alt": "Auto-generated WebP demo image",
-        "class": "",
-        "loading": "lazy",
-        "width": "1200",
-        "height": "675"
-      })
-    </div>
   </div>
 
   <div class="demo__footer">

src/html/components/demo.html

@@ -12,10 +12,13 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Smooth scroll with reduced motion support */
+/* Smooth scroll with reduced motion support.
+   overscroll-behavior + background kill the white rubber-band edges */
 html {
   scroll-behavior: smooth;
   text-size-adjust: 100%;
+  overscroll-behavior: none;
+  background-color: var(--color-bg, #fff);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -176,7 +179,7 @@ ol {
 
 /* Anchor targets stop below a fixed header (--header-height in vars.scss) */
 :target {
-  scroll-margin-block-start: calc(var(--header-height, 0px) + #{rem(16)});
+  scroll-margin-block-start: calc(var(--header-height, 0rem) + #{rem(16)});
 }
 
 /* Tables */

src/styles/normalize.scss

@@ -16,9 +16,11 @@
   /* Layout */
   --container-width: #{rem(1230)};
   --container-padding: #{rem(15)};
-  --header-height: 0px; /* stays in px — usually set from JS (getBoundingClientRect) for anchor offsets */
   --radius: #{rem(8)};
 
+  // Uncomment when the header is fixed/sticky — anchors offset by it (normalize.scss :target)
+  // --header-height: #{rem(80)};
+
   /* Z-index scale */
   --z-header: 100;
   --z-dropdown: 200;