maverick-wave 4.6.0 → 4.7.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 (26) hide show
  1. package/.claude/skills/maverick-wave/references/components.md +11 -4
  2. package/.claude/skills/maverick-wave/references/layout.md +9 -6
  3. package/.claude/skills/maverick-wave/references/theming.md +7 -6
  4. package/CHANGELOG.md +6 -0
  5. package/gulpfile.js +7 -5
  6. package/index.html +5 -0
  7. package/maverick-wave.min.css +9 -2
  8. package/package.json +5 -5
  9. package/src/partials/tables-container.html +38 -35
  10. package/src/scss/base/_base.scss +21 -5
  11. package/src/scss/base/_reset.scss +1 -1
  12. package/src/scss/base/_typography.scss +11 -0
  13. package/src/scss/components/_blog-post.scss +8 -1
  14. package/src/scss/components/_cards.scss +41 -2
  15. package/src/scss/components/_meta-info.scss +10 -0
  16. package/src/scss/components/_modals.scss +19 -1
  17. package/src/scss/components/_tables.scss +3 -0
  18. package/src/scss/components/_tiles.scss +10 -3
  19. package/src/scss/components/_timelines.scss +4 -0
  20. package/src/scss/form-elements/_form.scss +12 -0
  21. package/src/scss/form-elements/_login.scss +4 -0
  22. package/src/scss/layout/_footer.scss +8 -9
  23. package/src/scss/layout/_header.scss +7 -1
  24. package/src/scss/layout/_main.scss +21 -9
  25. package/src/scss/layout/_section.scss +1 -2
  26. package/src/scss/utilities/_touch-targets.scss +12 -0
package/.claude/skills/maverick-wave/references/components.md CHANGED
@@ -149,13 +149,20 @@ picker.
149
149
  - `mw-card-simple` is the flat variant with even padding for arbitrary content.
150
150
  Use it when you only need a padded surface - it stays a block container, so
151
151
  inline children keep flowing side by side.
152
- - Image height: 210px, `mw-card-lg` 340px, `mw-card-xl` 480px. Set
153
- `--mw-card-img-height` on the card for any other height.
152
+ - Image height: 210px, `mw-card-lg` 340px, `mw-card-xl` 480px (260px/340px below
153
+ `sm`). Set `--mw-card-img-height` on the card for any other height.
154
154
  `mw-card-img-contain` shows the whole image instead of cropping it.
155
155
  - `mw-card-footer` pushes its last child to the right - with a single child that
156
156
  means it sits right, not left. Everything is vertically centered, so plain text
157
- lines up with a button next to it. Below `lg` the footer stacks and children go
158
- full width.
157
+ lines up with a button next to it. Actions that no longer fit next to each
158
+ other wrap.
159
+ - The footer stacks to full-width children once the **card** is narrower than
160
+ 360px, not once the window is - a card in a three-column grid is just as narrow
161
+ on a 1200px desktop as it is on a phone, and now looks the same in both. This
162
+ is a container query: a card that has a footer declares
163
+ `container: mw-card / inline-size` and takes `width: 100%`, so it fills its
164
+ slot instead of sizing to its content. Give such a card an explicit width if
165
+ you need it to hug its content.
159
166
  - `mw-card-badge` (top right corner) and `mw-card-ribbon` (diagonal banner) are
160
167
  absolutely positioned overlays; colour them with `mw-card-addon-primary`,
161
168
  `-secondary`, `-success`, `-warning`, `-danger`, `-info`.
package/.claude/skills/maverick-wave/references/layout.md CHANGED
@@ -25,12 +25,15 @@
25
25
 
26
26
  - `mw-main` is a full-height flex column - the footer stays at the bottom on
27
27
  short pages.
28
- - `mw-container` is `min(1200px, 89%)`, horizontally centered. Nest it inside
29
- every full-bleed band (header, section, footer), never around them. Below
30
- 576px it switches to a fixed 1rem gutter instead of the percentage - 89% of a
31
- 375px screen leaves 41px of nothing on a card that has to fit an amount, a
32
- status and two labels into one row. Both widths are tokens,
33
- `--mw-container-width` and `--mw-container-width-sm`.
28
+ - `mw-container` is `min(1200px, 100% - 2 * gutter)`, horizontally centered.
29
+ Nest it inside every full-bleed band (header, section, footer), never around
30
+ them. The gutter is fluid - `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never smaller
31
+ than the safe-area inset - so it lands on ~24px at 375px, ~32px at 576px,
32
+ ~40px on a tablet and tops out at 64px, where the 1200px cap takes over. A
33
+ percentage alone keeps too little on a phone and throws away too much on a
34
+ desktop; stepping the gutter at a breakpoint instead would make the container
35
+ jump backwards at the step. Both values are tokens,
36
+ `--mw-container-gutter` and `--mw-container-width`.
34
37
  - `mw-content` (`flex: 1` + top padding) is the alternative to `mw-section` when
35
38
  a page has one single content area. `mw-content-centered` centers it
36
39
  vertically over the full viewport - login pages, error pages.
package/.claude/skills/maverick-wave/references/theming.md CHANGED
@@ -68,22 +68,23 @@ Safari 16.4+, Firefox 128+.
68
68
  | `--mw-font-family-base`, `-heading`, `-mono` | Font stacks - system stacks by default (`-mono` leads with Fira Code); no font is bundled. Configurable in SCSS, see below |
69
69
  | `--mw-hero-background` | Hero image (`url(...)`) |
70
70
  | `--mw-transition` | Global transition (`all 0.3s ease`) |
71
- | `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px) |
71
+ | `--mw-card-img-height` | Per-card image height (default `210px`; `mw-card-lg`/`-xl` set it to 340px/480px, 260px/340px below `sm`) |
72
72
  | `--mw-card-addon-color` | Background of `mw-card-badge` / `mw-card-ribbon`; the `mw-card-addon-*` classes set it, override it for a custom colour |
73
73
  | `--mw-card-addon-text-color` | Label on that badge/ribbon; the `mw-card-addon-*` classes point it at the matching `--mw-*-accent-text-color` |
74
74
  | `--mw-progress-ink` | Label inside `mw-progress-inline-label`; the `mw-progress-*` colour classes point it at the matching `--mw-*-accent-text-color` |
75
75
  | `--mw-table-scroll-height` | Per-table height cap for `mw-table-responsive-scroll` |
76
76
  | `--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`) |
77
- | `--mw-container-width`, `--mw-container-width-sm` | Content width of `mw-container` (`min(1200px, 89%)`, below 576px a 1rem gutter) |
77
+ | `--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)`) |
78
78
  | `--mw-section-padding-block` | Top/bottom rhythm of `mw-section` (1.75rem) |
79
79
  | `--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 |
80
80
  | `--mw-scroll-hint-cover` | Colour the scroll hint on a tab bar fades into. Preset to the page, re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`, `mw-tile`, `mw-calendar` |
81
81
  | `--mw-internal-theme-mode` | Read-only: what `$mw-theme-mode` was compiled to |
82
82
 
83
- `--mw-container-width`, `--mw-container-width-sm` and
84
- `--mw-section-padding-block` are the knobs a good default cannot settle, because
85
- the right answer differs per project: what reads as generous on a landing page
86
- costs visible content in an application with a sticky header.
83
+ `--mw-container-gutter`, `--mw-container-width` and `--mw-section-padding-block`
84
+ are the knobs a good default cannot settle, because the right answer differs per
85
+ project: what reads as generous on a landing page costs visible content in an
86
+ application with a sticky header. Override the gutter, not the width - the width
87
+ is derived from it and keeps the 1200px cap.
87
88
 
88
89
  Two rules that prevent most colour bugs:
89
90
 
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
+ ## [4.7.0] - 2026-08-22
10
+
11
+ ### Changed
12
+
13
+ - mobile breakpoints view adjustments
14
+
9
15
  ## [4.6.0] - 2026-08-22
10
16
 
11
17
  ### Changed
package/gulpfile.js CHANGED
@@ -3,7 +3,11 @@ const fileinclude = require('gulp-file-include');
3
3
  const sass = require('gulp-sass')(require('sass'));
4
4
  const postcss = require('gulp-postcss');
5
5
  const autoprefixer = require('autoprefixer');
6
- const cleanCSS = require('gulp-clean-css');
6
+ // clean-css 4 is the last release gulp-clean-css pins, and it predates
7
+ // @container, @layer and @starting-style: it drops those blocks or eats their
8
+ // selectors without an error. cssnano runs in the postcss pass that is already
9
+ // here and understands them.
10
+ const cssnano = require('cssnano');
7
11
  const terser = require('gulp-terser');
8
12
  const fs = require('fs');
9
13
  const path = require('path');
@@ -47,8 +51,7 @@ gulp.task('scss-build', function () {
47
51
  return gulp
48
52
  .src(paths.scss)
49
53
  .pipe(sass().on('error', sass.logError))
50
- .pipe(postcss([autoprefixer()]))
51
- .pipe(cleanCSS())
54
+ .pipe(postcss([autoprefixer(), cssnano({ preset: 'default' })]))
52
55
  .pipe(rename('maverick-wave.min.css'))
53
56
  .pipe(gulp.dest(path.join(paths.dist)));
54
57
  });
@@ -56,8 +59,7 @@ gulp.task('scss-release', function () {
56
59
  return gulp
57
60
  .src(paths.scss)
58
61
  .pipe(sass().on('error', sass.logError))
59
- .pipe(postcss([autoprefixer()]))
60
- .pipe(cleanCSS())
62
+ .pipe(postcss([autoprefixer(), cssnano({ preset: 'default' })]))
61
63
  .pipe(rename('maverick-wave.min.css'))
62
64
  .pipe(gulp.dest(path.join(paths.root)));
63
65
  });
package/index.html CHANGED
@@ -94,8 +94,13 @@
94
94
 
95
95
  /* Small screens */
96
96
  @media (max-width: 576px) {
97
+ /* The h1 drops to 2.2rem down here, so the sticker has to move up with
98
+ it or it lands on the word instead of next to it */
97
99
  .version-corner {
100
+ top: -32px;
98
101
  right: 4%;
102
+ font-size: 0.9rem;
103
+ padding: 0.25rem 0.55rem;
99
104
  }
100
105
 
101
106
  .color-swatch {