feat: breakpoint system, design tokens, picture partial, inline critical CSS, DX fixes (v3.1.0)

Styles core:
- _mixins.scss: $breakpoints map + media-up/down/between, hover (any-hover),
  fluid() clamp helper
- vars.scss: semantic colors, z-index scale, --radius, --header-height;
  applied across modals/button/anchors
- normalize: [hidden] hardening, anchor offset below fixed header, body bg;
  dropped hanging-punctuation, global overscroll-behavior, no-op ::selection
- utils: .visually-hidden alias, removed WP .screen-reader-text idiom and
  duplicate .icon rule

Bug fixes:
- modals.js: modal-to-modal switching (isLocked early-return)
- headerScroll.js: sentinel-based observer (works for fixed/sticky headers)
- demo.html: fallbackCopy out-of-scope variables
- watch: shared partials outside layouts/components now rebuild pages
- dev server: real bound port logged (BrowserSync silently shifts on busy port)
- Ctrl+C on pnpm dev exits 0 instead of 1

Features:
- components/_picture.html + demo.jpg (WebP/AVIF usage example)
- critical CSS actually works: compiled and inlined into <head> when enabled
- pnpm zip (dated handoff archive), pnpm serve (no-rebuild preview)
- clean:demo asks for confirmation

Tooling:
- browserslist modernized (83 -> 36 targets), caniuse-lite refreshed
- lint:check gates warnings, format:check added (both in CI)
- package.json: private, packageManager, engines.pnpm; eslint/stylelint cache
- .gitattributes (LF + binaries), .editorconfig cleanup, VS Code extensions
- deploy.yml: workflow_dispatch, keep 404.html on Pages
- .template/paths.js pruned; narrowed Google Fonts to used weights

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

Author: hHolyMolly

.browserslistrc

@@ -1,12 +1,8 @@
-# Browsers that we support
-# https://browsersl.ist/
-
-# Production: Modern browsers with good support
-last 2 versions
-> 1%
-not dead
-not op_mini all
-
-# Safari needs special attention
-Safari >= 14
-iOS >= 14
+last 2 chrome versions
+last 2 edge versions
+last 2 firefox versions
+Firefox ESR
+last 2 safari major versions
+last 2 ios major versions
+last 2 and_chr versions
+last 2 samsung versions

.editorconfig

@@ -9,6 +9,7 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 120
 
 [*.md]
 trim_trailing_whitespace = false
@@ -21,6 +22,3 @@ indent_size = 2
 
 [*.{scss,css}]
 indent_size = 2
-
-[Makefile]
-indent_style = tab

.gitattributes

@@ -0,0 +1,18 @@
+# Normalize line endings — LF everywhere (matches .editorconfig / Prettier)
+* text=auto eol=lf
+
+# Binary files
+*.ico binary
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.webp binary
+*.avif binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.otf binary
+*.mp4 binary
+*.webm binary
+*.zip binary

.github/workflows/deploy.yml

@@ -3,6 +3,7 @@ name: Deploy to GitHub Pages
 on:
   push:
     branches: [main]
+  workflow_dispatch:
 
 concurrency:
   group: pages
@@ -23,17 +24,16 @@ jobs:
         with:
           persist-credentials: false
       - uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4
-        with:
-          version: 10
       - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 22
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm lint:check
+      - run: pnpm format:check
       - run: pnpm build:prod
       - name: Remove template pages
-        run: rm -f dist/template.html dist/404.html
+        run: rm -f dist/template.html
       - uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5
       - uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
         with:

.template/paths.js

@@ -1,68 +1,12 @@
 /**
  * Template Paths
- * Utilities for setup scripts in .template/setup/
+ * Shared helper for setup scripts in .template/setup/
  */
 
-import path from 'path';
-import { fileURLToPath } from 'url';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const rootDir = path.resolve(__dirname, '../');
+const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../');
 
-// Directory names (mirrors gulp/configs/paths.js)
-const folders = {
-  src: 'src',
-  styles: 'styles',
-  scripts: 'scripts',
-  html: 'html',
-  layouts: 'layouts',
-  pages: 'pages',
-  components: 'components',
-};
-
-// ─────────────────────────────────────────────────────────────
-// Path Helpers
-// ─────────────────────────────────────────────────────────────
-
-/**
- * Path relative to project root
- */
+/** Path relative to the project root */
 export const resolvePath = (...parts) => path.join(rootDir, ...parts);
-
-/**
- * Path to source files
- */
-export const srcPath = (...parts) => resolvePath(folders.src, ...parts);
-
-/**
- * Path to gulp tasks
- */
-export const gulpPath = (...parts) => resolvePath('gulp', ...parts);
-
-// ─────────────────────────────────────────────────────────────
-// Export
-// ─────────────────────────────────────────────────────────────
-
-export const templatePaths = {
-  root: rootDir,
-  template: __dirname,
-
-  // Computed paths
-  src: srcPath(),
-  srcStyles: srcPath(folders.styles),
-  srcScripts: srcPath(folders.scripts),
-  srcHtml: srcPath(folders.html),
-  srcHtmlLayouts: srcPath(folders.html, folders.layouts),
-  srcHtmlPages: srcPath(folders.html, folders.pages),
-  srcHtmlComponents: srcPath(folders.html, folders.components),
-
-  // Gulp
-  gulpTasks: gulpPath('tasks'),
-  gulpConfigs: gulpPath('configs'),
-  gulpUtils: gulpPath('utils'),
-
-  // Helpers
-  resolvePath,
-  srcPath,
-  gulpPath,
-};

.template/setup/clean-demo.js

@@ -6,6 +6,7 @@
  */
 
 import fs from 'node:fs';
+import readline from 'node:readline';
 import { resolvePath } from '../paths.js';
 
 const DEMO_COMPONENT = 'src/html/components/demo.html';
@@ -49,7 +50,29 @@ function log(message, type = 'success') {
   console.log(`    ${icons[type]} ${message}`);
 }
 
+function confirm(question) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+
+    rl.question(`  ${question} (y/N): `, (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+}
+
 console.log('\n  🧹 Demo cleanup\n');
+console.log(`  This will DELETE ${DEMO_COMPONENT}`);
+console.log(`  and OVERWRITE ${INDEX_PAGE} with a clean skeleton.\n`);
+
+const confirmed = await confirm('Do you want to continue?');
+
+if (!confirmed) {
+  console.log('\n  ❌ Cancelled.\n');
+  process.exit(0);
+}
+
+console.log('');
 
 if (fs.existsSync(resolvePath(DEMO_COMPONENT))) {
   fs.rmSync(resolvePath(DEMO_COMPONENT));

.template/setup/tailwind/setup.js

@@ -86,7 +86,7 @@ async function setup() {
 
   try {
     log(`Installing ${config.packages.join(', ')}...`);
-    execSync(`pnpm add -D ${config.packages.join(' ')}`, { stdio: 'pipe' });
+    execSync(`pnpm add -D ${config.packages.join(' ')}`, { stdio: 'inherit' });
     log('Packages installed.', 'success');
   } catch (error) {
     log(`Install failed: ${error.message}`, 'error');

.template/setup/zip.js

@@ -0,0 +1,44 @@
+/**
+ * Handoff Archive Script
+ * Run: pnpm zip (builds prod first)
+ *
+ * Archives dist/ into <project-name>-<YYYY-MM-DD>.zip at the project root.
+ * No dependencies: system `zip` on macOS/Linux, Compress-Archive on Windows.
+ */
+
+import { execFileSync } from 'node:child_process';
+import { existsSync, rmSync, statSync, readFileSync } from 'node:fs';
+import { resolvePath } from '../paths.js';
+
+const dist = resolvePath('dist');
+
+if (!existsSync(dist)) {
+  console.error('\n  ✗ dist/ not found — run pnpm build:prod first\n');
+  process.exit(1);
+}
+
+const pkg = JSON.parse(readFileSync(resolvePath('package.json'), 'utf8'));
+const date = new Date().toISOString().slice(0, 10);
+const archiveName = `${pkg.name}-${date}.zip`;
+const archivePath = resolvePath(archiveName);
+
+rmSync(archivePath, { force: true });
+
+try {
+  if (process.platform === 'win32') {
+    execFileSync(
+      'powershell',
+      ['-NoProfile', '-Command', `Compress-Archive -Path dist\\* -DestinationPath '${archivePath}' -Force`],
+      { stdio: 'inherit' }
+    );
+  } else {
+    // cwd: dist — archive contents land at the zip root (no dist/ prefix)
+    execFileSync('zip', ['-r', '-q', archivePath, '.'], { cwd: dist, stdio: 'inherit' });
+  }
+} catch (error) {
+  console.error(`\n  ✗ Archiving failed: ${error.message}\n`);
+  process.exit(1);
+}
+
+const sizeKb = Math.round(statSync(archivePath).size / 1024);
+console.log(`\n  ✓ ${archiveName} (${sizeKb} KB)\n`);

.vscode/extensions.json

@@ -3,10 +3,12 @@
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
     "formulahendry.auto-rename-tag",
     "streetsidesoftware.code-spell-checker",
     "streetsidesoftware.code-spell-checker-russian",
     "csstools.postcss",
-    "editorconfig.editorconfig"
+    "editorconfig.editorconfig",
+    "mikestead.dotenv"
   ]
 }

.vscode/settings.json

@@ -4,7 +4,6 @@
   "editor.formatOnSave": true,
 
   // ── ESLint ─────────────────────────────────────────────────
-  "eslint.useFlatConfig": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.fixAll.stylelint": "explicit"
@@ -16,6 +15,9 @@
   "scss.validate": false,
 
   // ── File Associations ──────────────────────────────────────
+  "files.associations": {
+    ".env.*": "dotenv"
+  },
 
   // ── Files ──────────────────────────────────────────────────
   "files.eol": "\n",