maverick-wave 5.12.0 → 5.13.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.
- package/.claude/skills/mw-maverick-wave/SKILL.md +63 -8
- package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +6 -3
- package/.claude/skills/mw-maverick-wave/references/components.md +41 -27
- package/.claude/skills/mw-maverick-wave/references/javascript.md +27 -26
- package/.claude/skills/mw-maverick-wave/references/layout.md +12 -6
- package/.claude/skills/mw-maverick-wave/references/theming.md +59 -4
- package/CHANGELOG.md +12 -0
- package/README.md +45 -5
- package/index.html +5 -4
- package/maverick-wave.min.css +4 -4
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +67 -20
- package/src/partials/buttons-container.html +2 -1
- package/src/partials/get-started-container.html +52 -3
- package/src/partials/parallax-container.html +8 -5
- package/src/partials/tabs-container.html +1 -1
- package/src/partials/typography-container.html +3 -0
- package/src/scss/abstracts/_functions.scss +50 -0
- package/src/scss/abstracts/_mixins.scss +33 -0
- package/src/scss/base/_typography.scss +4 -21
- package/src/scss/components/_buttons.scss +1 -1
- package/src/scss/components/_content-slider.scss +16 -8
- package/src/scss/components/_dropdown.scss +1 -1
- package/src/scss/components/_gallery.scss +13 -2
- package/src/scss/components/_lang-switch.scss +1 -1
- package/src/scss/components/_segmented.scss +4 -0
- package/src/scss/layout/_header.scss +3 -2
- package/src/scss/layout/_parallax.scss +15 -1
- package/src/scss/layout/_section.scss +2 -10
- package/src/scss/utilities/_touch-targets.scss +22 -16
package/README.md
CHANGED
|
@@ -38,22 +38,30 @@ The result is a framework that balances utility with simplicity, offering develo
|
|
|
38
38
|
<html lang="en">
|
|
39
39
|
<head>
|
|
40
40
|
<meta charset="UTF-8" />
|
|
41
|
-
<meta
|
|
41
|
+
<meta
|
|
42
|
+
name="viewport"
|
|
43
|
+
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
|
44
|
+
/>
|
|
42
45
|
<title>My MaverickWave Project</title>
|
|
43
46
|
<link
|
|
44
47
|
rel="stylesheet"
|
|
45
|
-
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.
|
|
48
|
+
href="https://cdn.jsdelivr.net/npm/maverick-wave@5.13.0/maverick-wave.min.css"
|
|
46
49
|
/>
|
|
47
50
|
</head>
|
|
48
51
|
<body>
|
|
49
52
|
<!-- Your content here -->
|
|
50
|
-
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.
|
|
53
|
+
<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.13.0/maverick-wave.min.js"></script>
|
|
51
54
|
</body>
|
|
52
55
|
</html>
|
|
53
56
|
```
|
|
54
57
|
|
|
55
58
|
Always pin to a specific version in production for stability.
|
|
56
59
|
|
|
60
|
+
`viewport-fit=cover` is not optional. The container gutter, the mobile nav panel
|
|
61
|
+
and the modals budget for the cutout with `env(safe-area-inset-*)`, and iOS
|
|
62
|
+
resolves every one of those to `0` without it. On localhost the framework writes
|
|
63
|
+
a console warning when it is missing.
|
|
64
|
+
|
|
57
65
|
### 2. Direct Download
|
|
58
66
|
|
|
59
67
|
Download `maverick-wave.min.css` and `maverick-wave.min.js` from the [latest release](https://github.com/m1well/maverick-wave/releases) and include them manually:
|
|
@@ -418,6 +426,38 @@ For full control, clone the repository and integrate `src/scss/main.scss` into y
|
|
|
418
426
|
> Plain variable assignments before `@use` have no effect - the framework
|
|
419
427
|
> declares its root colors with `!default`, which only `@use ... with` feeds.
|
|
420
428
|
|
|
429
|
+
### Mixins and Functions
|
|
430
|
+
|
|
431
|
+
`@use 'maverick-wave/src/scss/abstracts' as *` brings these into your own rules.
|
|
432
|
+
They exist on the SCSS path only - the compiled CSS carries none of them.
|
|
433
|
+
|
|
434
|
+
- `fluid($min, $max, $from: 'xs', $to: 'md')` - a clamp between two sizes. Each
|
|
435
|
+
end is a key of `$font-sizes` or a plain rem/px length, so a hero that does not
|
|
436
|
+
sit on the scale still gets one. The rem term is the point: a vw-only clamp
|
|
437
|
+
ignores the reader's font size. The default range stops at `md`, a headline
|
|
438
|
+
passes `$to: 'xl'`.
|
|
439
|
+
- `media-up($bp)` / `media-down($bp)` - the `$breakpoints` map as a query.
|
|
440
|
+
- `touch-context($bp: 'md')` - coarse pointer _or_ narrow viewport, the condition
|
|
441
|
+
every target-size rule in the framework hangs under.
|
|
442
|
+
- `touch-floor($size: 2.75rem)` - that condition plus a `min-height`. Not for a
|
|
443
|
+
link inside a sentence: WCAG 2.5.8 exempts those, and a `min-height` there
|
|
444
|
+
pushes the lines of the paragraph apart.
|
|
445
|
+
- `hit-area($grow: 6px)` - grows the hit area through `::after` without touching
|
|
446
|
+
the silhouette, for a control whose size is the design. Neighbours need a gap
|
|
447
|
+
of at least twice `$grow`, or two hit areas overlap.
|
|
448
|
+
|
|
449
|
+
```scss
|
|
450
|
+
@use 'maverick-wave/src/scss/abstracts' as *;
|
|
451
|
+
|
|
452
|
+
.hero h1 {
|
|
453
|
+
font-size: fluid(1.95rem, 4.2rem, $to: 'xl');
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.my-close-button {
|
|
457
|
+
@include touch-floor;
|
|
458
|
+
}
|
|
459
|
+
```
|
|
460
|
+
|
|
421
461
|
### Importing Only What You Need
|
|
422
462
|
|
|
423
463
|
Every layer forwards one module per file and no `@extend` crosses a file
|
|
@@ -445,8 +485,8 @@ have no use for the marketing components (`blog-post`, `gallery`,
|
|
|
445
485
|
@use 'maverick-wave/src/scss/utilities';
|
|
446
486
|
```
|
|
447
487
|
|
|
448
|
-
A typical application subset like the one above compiles to roughly
|
|
449
|
-
|
|
488
|
+
A typical application subset like the one above compiles to roughly 113 kB raw /
|
|
489
|
+
17 kB gzipped, against 281 kB / 40 kB for the full build.
|
|
450
490
|
|
|
451
491
|
> **`base` is not optional.** It carries the `:root` custom properties - without
|
|
452
492
|
> it every component renders without colors. If you bring your own reset, use
|
package/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta
|
|
6
6
|
name="viewport"
|
|
7
|
-
content="width=device-width, minimum-scale=1, initial-scale=1"
|
|
7
|
+
content="width=device-width, minimum-scale=1, initial-scale=1, viewport-fit=cover"
|
|
8
8
|
/>
|
|
9
9
|
<meta
|
|
10
10
|
name="format-detection"
|
|
@@ -100,11 +100,12 @@
|
|
|
100
100
|
/* The travel has to sit on the animated section, the height on the block
|
|
101
101
|
inside it */
|
|
102
102
|
.parallax-band-demo {
|
|
103
|
-
--mw-parallax-slow-travel:
|
|
103
|
+
--mw-parallax-slow-travel: 72vh;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.parallax-band-demo .mw-parallax {
|
|
107
|
-
min-height:
|
|
107
|
+
min-height: 88vh;
|
|
108
|
+
--mw-parallax-depth: 18vh;
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
/* Reuses the hero picture through the token, not a second download */
|
|
@@ -724,7 +725,7 @@
|
|
|
724
725
|
<div class="mw-container">
|
|
725
726
|
<h2>The page rides over the picture</h2>
|
|
726
727
|
<p class="mw-mb-0">
|
|
727
|
-
This band travels at a
|
|
728
|
+
This band travels at a fifth of your scrolling. The components
|
|
728
729
|
close in from below.
|
|
729
730
|
</p>
|
|
730
731
|
</div>
|