maverick-wave 5.15.0 → 5.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.claude/skills/mw-maverick-wave/SKILL.md +2 -2
  2. package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +2 -2
  3. package/.claude/skills/mw-maverick-wave/references/layout.md +8 -8
  4. package/.claude/skills/mw-maverick-wave/references/theming.md +2 -0
  5. package/CHANGELOG.md +6 -0
  6. package/README.md +2 -2
  7. package/maverick-wave.min.css +1 -1
  8. package/package.json +2 -2
  9. package/src/partials/palette-container.html +3 -0
  10. package/src/scss/base/_base.scss +7 -0
package/.claude/skills/mw-maverick-wave/SKILL.md CHANGED
@@ -48,14 +48,14 @@ Load the one you need - do not read them all up front.
48
48
  />
49
49
  <link
50
50
  rel="stylesheet"
51
- href="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.css"
51
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.15.0/maverick-wave.min.css"
52
52
  />
53
53
  <link
54
54
  rel="stylesheet"
55
55
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
56
56
  />
57
57
  ...
58
- <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.js"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.15.0/maverick-wave.min.js"></script>
59
59
  ```
60
60
 
61
61
  Pin the version. The JS file is optional and only for server-rendered/static pages -
package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md CHANGED
@@ -23,7 +23,7 @@ accordion FAQ.
23
23
 
24
24
  <link
25
25
  rel="stylesheet"
26
- href="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.css"
26
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.15.0/maverick-wave.min.css"
27
27
  />
28
28
  <link
29
29
  rel="stylesheet"
@@ -490,7 +490,7 @@ accordion FAQ.
490
490
  <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
491
491
  </div>
492
492
 
493
- <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.js"></script>
493
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.15.0/maverick-wave.min.js"></script>
494
494
  <script>
495
495
  // The only thing the shipped script does not cover: opening a modal.
496
496
  // Closing works through .mw-modal-close, the backdrop is wired above.
package/.claude/skills/mw-maverick-wave/references/layout.md CHANGED
@@ -196,14 +196,14 @@ pointing at the trigger in every combination.
196
196
 
197
197
  ## Sections
198
198
 
199
- | Class | Use |
200
- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
201
- | `mw-section` | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`) |
202
- | `mw-section-alternate` | Diagonal pattern background; combine with `mw-section` |
203
- | `mw-section-title` | Centered heading with a decorative primary underline, `2xl` growing to `3xl` up to 576px - landing pages |
204
- | `mw-section-intro` | The lead paragraph under a section title - centred, muted, 46rem measure |
205
- | `mw-section-subtitle` | Centered heading with a thin secondary underline, `xl` growing to `2xl` up to 576px |
206
- | `mw-section-nav` + `mw-section-btn` | Sticky single-row strip of outline-style jump links; parks under the header and scrolls sideways when it overflows |
199
+ | Class | Use |
200
+ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
201
+ | `mw-section` | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`); point it at `--mw-section-padding-fluid` for spacing that grows with the screen |
202
+ | `mw-section-alternate` | Diagonal pattern background; combine with `mw-section` |
203
+ | `mw-section-title` | Centered heading with a decorative primary underline, `2xl` growing to `3xl` up to 576px - landing pages |
204
+ | `mw-section-intro` | The lead paragraph under a section title - centred, muted, 46rem measure |
205
+ | `mw-section-subtitle` | Centered heading with a thin secondary underline, `xl` growing to `2xl` up to 576px |
206
+ | `mw-section-nav` + `mw-section-btn` | Sticky single-row strip of outline-style jump links; parks under the header and scrolls sideways when it overflows |
207
207
 
208
208
  ```html
209
209
  <section class="mw-section mw-section-alternate">
package/.claude/skills/mw-maverick-wave/references/theming.md CHANGED
@@ -82,6 +82,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
82
82
  | `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height` | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`) |
83
83
  | `--mw-container-gutter`, `--mw-container-width` | Page gutter of `mw-container` (fluid `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never below the safe-area inset) and the width derived from it (`min(1200px, 100% - 2 * gutter)`) |
84
84
  | `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (3.3rem, stepping down to 2.5rem below `md` and 1.75rem below `sm`) |
85
+ | `--mw-section-padding-fluid` | The fluid alternative to the value above - 1.75rem on a phone up to 5.5rem at `xl`. Not applied by itself: set `--mw-section-padding-block: var(--mw-section-padding-fluid)` |
85
86
  | `--mw-section-nav-height` | Height the sticky `mw-section-nav` reserves (3.7rem). Add it to `--mw-header-height` for the `scroll-margin-top` of anything the strip can cover |
86
87
  | `--mw-root-font-size` | Percentage the whole rem scale is built on (`100%`). Type, spacing and control heights move with it; px breakpoints do not |
87
88
  | `--mw-calendar-dot` | Colour of a single calendar dot - set it per dot or per cell; the `mw-calendar-dot-*` classes are presets for it |
@@ -239,6 +240,7 @@ URL carries the choice - a link is how a look gets agreed on before it is built.
239
240
  | `--mw-font-family-heading` | Headline typeface; body copy is untouched |
240
241
  | `--mw-container-width` | Where the content stops growing |
241
242
  | `--mw-section-padding-block` | Air above and below each section |
243
+ | `--mw-section-padding-fluid` | The same, but growing with the screen - point the line above at it |
242
244
  | `--mw-motion-scale` | Multiplies all six duration tokens - `0.6` brisk, `1.6` relaxed. `prefers-reduced-motion` still overrides it |
243
245
 
244
246
  **Writing your own.** A variant that retunes a _theme-bound_ token - anything in
package/CHANGELOG.md CHANGED
@@ -6,6 +6,12 @@ Patch releases are only for test purposes - here I only document major and minor
6
6
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
7
7
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
8
8
 
9
+ ## [5.16.0] - 2026-09-15
10
+
11
+ ### Added
12
+
13
+ - `--mw-section-padding-fluid` - section spacing that grows with the screen
14
+
9
15
  ## [5.15.0] - 2026-09-15
10
16
 
11
17
  ### Fixed
package/README.md CHANGED
@@ -45,12 +45,12 @@ The result is a framework that balances utility with simplicity, offering develo
45
45
  <title>My MaverickWave Project</title>
46
46
  <link
47
47
  rel="stylesheet"
48
- href="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.css"
48
+ href="https://cdn.jsdelivr.net/npm/maverick-wave@5.15.0/maverick-wave.min.css"
49
49
  />
50
50
  </head>
51
51
  <body>
52
52
  <!-- Your content here -->
53
- <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.14.0/maverick-wave.min.js"></script>
53
+ <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.15.0/maverick-wave.min.js"></script>
54
54
  </body>
55
55
  </html>
56
56
  ```
package/maverick-wave.min.css CHANGED
@@ -7,7 +7,7 @@
7
7
  );--mw-container-width:min(
8
8
  1200px,
9
9
  calc(100% - 2 * var(--mw-container-gutter))
10
- );--mw-section-padding-block:3.3rem;--mw-section-title-gap:1.75rem;--mw-scroll-hint-offset:2.5rem;--mw-scroll-hint-inline:var(--mw-container-gutter);--mw-scroll-hint-reserve:3.3rem;--mw-page-background:var(--mw-dark-page-background);--mw-hero-image-filter:var(--mw-dark-hero-image-filter);--mw-card-background:var(--mw-dark-card-background);--mw-footer-background:var(--mw-dark-footer-background);--mw-border:var(--mw-dark-border);--mw-shadow:var(--mw-dark-shadow);--mw-shadow-near:var(--mw-dark-shadow-near);--mw-shadow-far:var(--mw-dark-shadow-far);--mw-text-color:var(--mw-dark-text-color);--mw-text-muted-color:var(--mw-dark-text-muted-color);--mw-primary-text-color:var(--mw-dark-primary-text-color);--mw-secondary-text-color:var(--mw-dark-secondary-text-color);--mw-success-text-color:var(--mw-dark-success-text-color);--mw-warning-text-color:var(--mw-dark-warning-text-color);--mw-danger-text-color:var(--mw-dark-danger-text-color);--mw-info-text-color:var(--mw-dark-info-text-color);--mw-border-accent:var(--mw-dark-border-accent);--mw-corner-accent:var(--mw-dark-corner-accent);--mw-corner-accent-hover:var(--mw-dark-corner-accent-hover)}.mw-theme-light{--mw-page-background:var(--mw-light-page-background);--mw-hero-image-filter:var(--mw-light-hero-image-filter);--mw-card-background:var(--mw-light-card-background);--mw-footer-background:var(--mw-light-footer-background);--mw-border:var(--mw-light-border);--mw-shadow:var(--mw-light-shadow);--mw-shadow-near:var(--mw-light-shadow-near);--mw-shadow-far:var(--mw-light-shadow-far);--mw-text-color:var(--mw-light-text-color);--mw-text-muted-color:var(--mw-light-text-muted-color);--mw-primary-text-color:var(--mw-light-primary-text-color);--mw-secondary-text-color:var(--mw-light-secondary-text-color);--mw-success-text-color:var(--mw-light-success-text-color);--mw-warning-text-color:var(--mw-light-warning-text-color);--mw-danger-text-color:var(--mw-light-danger-text-color);--mw-info-text-color:var(--mw-light-info-text-color);--mw-border-accent:var(--mw-light-border-accent);--mw-corner-accent:var(--mw-light-corner-accent);--mw-corner-accent-hover:var(--mw-light-corner-accent-hover);color-scheme:light}@supports (color:light-dark(#000,#fff)){.mw-theme-light,:root{--mw-page-background:light-dark(
10
+ );--mw-section-padding-block:3.3rem;--mw-section-padding-fluid:clamp(1.75rem, 0.0455rem + 7.2727vw, 5.5rem);--mw-section-title-gap:1.75rem;--mw-scroll-hint-offset:2.5rem;--mw-scroll-hint-inline:var(--mw-container-gutter);--mw-scroll-hint-reserve:3.3rem;--mw-page-background:var(--mw-dark-page-background);--mw-hero-image-filter:var(--mw-dark-hero-image-filter);--mw-card-background:var(--mw-dark-card-background);--mw-footer-background:var(--mw-dark-footer-background);--mw-border:var(--mw-dark-border);--mw-shadow:var(--mw-dark-shadow);--mw-shadow-near:var(--mw-dark-shadow-near);--mw-shadow-far:var(--mw-dark-shadow-far);--mw-text-color:var(--mw-dark-text-color);--mw-text-muted-color:var(--mw-dark-text-muted-color);--mw-primary-text-color:var(--mw-dark-primary-text-color);--mw-secondary-text-color:var(--mw-dark-secondary-text-color);--mw-success-text-color:var(--mw-dark-success-text-color);--mw-warning-text-color:var(--mw-dark-warning-text-color);--mw-danger-text-color:var(--mw-dark-danger-text-color);--mw-info-text-color:var(--mw-dark-info-text-color);--mw-border-accent:var(--mw-dark-border-accent);--mw-corner-accent:var(--mw-dark-corner-accent);--mw-corner-accent-hover:var(--mw-dark-corner-accent-hover)}.mw-theme-light{--mw-page-background:var(--mw-light-page-background);--mw-hero-image-filter:var(--mw-light-hero-image-filter);--mw-card-background:var(--mw-light-card-background);--mw-footer-background:var(--mw-light-footer-background);--mw-border:var(--mw-light-border);--mw-shadow:var(--mw-light-shadow);--mw-shadow-near:var(--mw-light-shadow-near);--mw-shadow-far:var(--mw-light-shadow-far);--mw-text-color:var(--mw-light-text-color);--mw-text-muted-color:var(--mw-light-text-muted-color);--mw-primary-text-color:var(--mw-light-primary-text-color);--mw-secondary-text-color:var(--mw-light-secondary-text-color);--mw-success-text-color:var(--mw-light-success-text-color);--mw-warning-text-color:var(--mw-light-warning-text-color);--mw-danger-text-color:var(--mw-light-danger-text-color);--mw-info-text-color:var(--mw-light-info-text-color);--mw-border-accent:var(--mw-light-border-accent);--mw-corner-accent:var(--mw-light-corner-accent);--mw-corner-accent-hover:var(--mw-light-corner-accent-hover);color-scheme:light}@supports (color:light-dark(#000,#fff)){.mw-theme-light,:root{--mw-page-background:light-dark(
11
11
  var(--mw-light-page-background),
12
12
  var(--mw-dark-page-background)
13
13
  );--mw-card-background:light-dark(
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "maverick-wave",
3
- "version": "5.15.0",
3
+ "version": "5.16.0",
4
4
  "config": {
5
- "version_short": "5.15"
5
+ "version_short": "5.16"
6
6
  },
7
7
  "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
8
8
  "main": "src/js/main.js",
package/src/partials/palette-container.html CHANGED
@@ -453,6 +453,9 @@
453
453
  <option value="2rem">Compact</option>
454
454
  <option value="" selected>Default</option>
455
455
  <option value="5.5rem">Airy</option>
456
+ <option value="var(--mw-section-padding-fluid)">
457
+ Fluid - grows with the screen
458
+ </option>
456
459
  </select>
457
460
  </label>
458
461
  </div>
package/src/scss/base/_base.scss CHANGED
@@ -152,6 +152,13 @@
152
152
  calc(100% - 2 * var(--mw-container-gutter))
153
153
  );
154
154
  --mw-section-padding-block: #{spacing('10')};
155
+ // The third regime beside the stepped default and the two flat presets:
156
+ // spacing that grows with the screen. It starts at the value a phone already
157
+ // gets below `sm` and reaches the airy preset at `xl`, so a desktop pushes
158
+ // less content past per wheel notch while the phone carries none of that air.
159
+ // Point `--mw-section-padding-block` at it to switch a page over - a choice
160
+ // like the presets are, not the default.
161
+ --mw-section-padding-fluid: #{fluid(spacing('7'), spacing('12'), $to: 'xl')};
155
162
  --mw-section-title-gap: #{spacing('7')};
156
163
  --mw-scroll-hint-offset: #{spacing('9')};
157
164
  --mw-scroll-hint-inline: var(--mw-container-gutter);