maverick-wave 5.29.0 → 5.31.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/README.md +2 -2
- package/maverick-wave.min.css +2 -2
- package/package.json +8 -2
- package/src/scss/components/_avatars.scss +35 -3
- package/src/scss/components/_dropdown.scss +24 -1
- package/src/scss/components/_lang-switch.scss +4 -8
- package/src/scss/components/_modals.scss +33 -5
- package/.claude/settings.local.json +0 -43
- package/.claude/skills/mw-maverick-wave/SKILL.md +0 -532
- package/.claude/skills/mw-maverick-wave/examples/angular-form.md +0 -279
- package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md +0 -309
- package/.claude/skills/mw-maverick-wave/examples/angular-services.md +0 -538
- package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +0 -530
- package/.claude/skills/mw-maverick-wave/references/components.md +0 -2169
- package/.claude/skills/mw-maverick-wave/references/forms.md +0 -358
- package/.claude/skills/mw-maverick-wave/references/javascript.md +0 -164
- package/.claude/skills/mw-maverick-wave/references/layout.md +0 -764
- package/.claude/skills/mw-maverick-wave/references/theming.md +0 -528
- package/.github/workflows/ci.yml +0 -41
- package/.idea/codeStyles/Project.xml +0 -59
- package/.idea/codeStyles/codeStyleConfig.xml +0 -5
- package/.idea/maverick-wave.iml +0 -12
- package/.idea/modules.xml +0 -8
- package/.idea/prettier.xml +0 -6
- package/.idea/vcs.xml +0 -6
- package/.prettierignore +0 -8
- package/.prettierrc.json +0 -7
- package/CHANGELOG.md +0 -950
- package/CLAUDE.md +0 -60
- package/gulpfile.js +0 -167
- package/index.html +0 -1730
- package/release.sh +0 -31
- package/scripts/verify.js +0 -252
- package/src/assets/favicon/apple-touch-icon.png +0 -0
- package/src/assets/favicon/favicon-96x96.png +0 -0
- package/src/assets/favicon/favicon.svg +0 -1
- package/src/assets/favicon/site.webmanifest +0 -37
- package/src/assets/favicon/web-app-manifest-192x192.png +0 -0
- package/src/assets/favicon/web-app-manifest-512x512.png +0 -0
- package/src/assets/favicon.ico +0 -0
- package/src/assets/header-logo.svg +0 -24
- package/src/assets/images/gallery-city.svg +0 -49
- package/src/assets/images/gallery-desert.svg +0 -25
- package/src/assets/images/gallery-forest.svg +0 -46
- package/src/assets/images/gallery-lake.svg +0 -26
- package/src/assets/images/gallery-mountain.svg +0 -19
- package/src/assets/images/gallery-ocean.svg +0 -26
- package/src/assets/images/gallery-oldtown.svg +0 -41
- package/src/assets/images/gallery-snow.svg +0 -39
- package/src/assets/images/photo-balloon.svg +0 -35
- package/src/assets/images/photo-forest-path.svg +0 -31
- package/src/assets/images/photo-lighthouse.svg +0 -42
- package/src/assets/images/photo-palm.svg +0 -27
- package/src/assets/images/photo-peak.svg +0 -27
- package/src/assets/images/photo-tower.svg +0 -34
- package/src/assets/images/photo-waterfall.svg +0 -32
- package/src/assets/images/slider-field.svg +0 -124
- package/src/assets/images/slider-forest.svg +0 -33
- package/src/assets/images/slider-lake.svg +0 -35
- package/src/assets/images/slider-mountains.svg +0 -29
- package/src/assets/images/slider-trees.svg +0 -41
- package/src/assets/images/story-aurora.svg +0 -36
- package/src/assets/images/story-beach.svg +0 -34
- package/src/assets/images/story-stars.svg +0 -35
- package/src/assets/images/tile-analytics.svg +0 -22
- package/src/assets/images/tile-cloud.svg +0 -19
- package/src/assets/images/tile-ecommerce.svg +0 -14
- package/src/assets/images/tile-enterprise.svg +0 -22
- package/src/assets/images/tile-marketing.svg +0 -16
- package/src/assets/media/demo-chime.wav +0 -0
- package/src/assets/media/story-sunrise.jpg +0 -0
- package/src/assets/media/story-sunrise.mp4 +0 -0
- package/src/partials/accordions-container.html +0 -179
- package/src/partials/alerts-container.html +0 -151
- package/src/partials/announcement-container.html +0 -67
- package/src/partials/avatars-container.html +0 -229
- package/src/partials/badges-container.html +0 -114
- package/src/partials/blog-posts-container.html +0 -158
- package/src/partials/breadcrumbs-container.html +0 -126
- package/src/partials/button-bar-container.html +0 -175
- package/src/partials/buttons-container.html +0 -272
- package/src/partials/calendar-container.html +0 -203
- package/src/partials/cards-container.html +0 -727
- package/src/partials/code-container.html +0 -194
- package/src/partials/colors-container.html +0 -263
- package/src/partials/coming-soon-container.html +0 -10
- package/src/partials/contact-container.html +0 -85
- package/src/partials/content-slider-container.html +0 -36
- package/src/partials/divider-container.html +0 -70
- package/src/partials/documentation-container.html +0 -204
- package/src/partials/dropdown-container.html +0 -119
- package/src/partials/empty-state-container.html +0 -79
- package/src/partials/feed-container.html +0 -506
- package/src/partials/footer-container.html +0 -113
- package/src/partials/form-container.html +0 -262
- package/src/partials/form-elements-container.html +0 -616
- package/src/partials/form-field-container.html +0 -166
- package/src/partials/gallery-container.html +0 -62
- package/src/partials/get-started-container.html +0 -423
- package/src/partials/grid-container.html +0 -191
- package/src/partials/header-container.html +0 -69
- package/src/partials/header-utilities-container.html +0 -331
- package/src/partials/highlights-container.html +0 -71
- package/src/partials/history-container.html +0 -67
- package/src/partials/home-container.html +0 -31
- package/src/partials/html-lists-container.html +0 -63
- package/src/partials/info-container.html +0 -104
- package/src/partials/input-group-container.html +0 -299
- package/src/partials/item-lists-container.html +0 -368
- package/src/partials/kanban-container.html +0 -459
- package/src/partials/kbd-container.html +0 -63
- package/src/partials/leader-row-container.html +0 -139
- package/src/partials/login-container.html +0 -65
- package/src/partials/lunch-menu-container.html +0 -341
- package/src/partials/media-container.html +0 -27
- package/src/partials/meta-info-container.html +0 -21
- package/src/partials/modals-container.html +0 -199
- package/src/partials/mosaic-container.html +0 -173
- package/src/partials/page-header-container.html +0 -78
- package/src/partials/pagination-container.html +0 -64
- package/src/partials/palette-container.html +0 -480
- package/src/partials/panels-container.html +0 -126
- package/src/partials/parallax-container.html +0 -147
- package/src/partials/portrait-gallery-container.html +0 -175
- package/src/partials/preview-container.html +0 -136
- package/src/partials/pricing-container.html +0 -523
- package/src/partials/progress-container.html +0 -230
- package/src/partials/prose-container.html +0 -43
- package/src/partials/ratings-container.html +0 -104
- package/src/partials/section-head-container.html +0 -77
- package/src/partials/segmented-container.html +0 -66
- package/src/partials/skeleton-container.html +0 -87
- package/src/partials/spinners-container.html +0 -96
- package/src/partials/stepper-container.html +0 -111
- package/src/partials/stories-container.html +0 -182
- package/src/partials/tables-container.html +0 -309
- package/src/partials/tabs-container.html +0 -290
- package/src/partials/tags-container.html +0 -242
- package/src/partials/techstack-bucket-container.html +0 -187
- package/src/partials/testimonials-container.html +0 -88
- package/src/partials/tiles-container.html +0 -247
- package/src/partials/timelines-container.html +0 -196
- package/src/partials/typography-container.html +0 -74
- package/src/partials/utilities-container.html +0 -553
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
<h3 class="mw-section-subtitle">Loading Spinners</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure">
|
|
3
|
-
Three shapes for the same job. Each one needs its shape class:
|
|
4
|
-
<code>mw-spinner-primary</code> on its own renders nothing at all.
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
<h3 class="mw-mt-4">Basic Spinners</h3>
|
|
8
|
-
<div class="mw-grid-3 mw-mt-4">
|
|
9
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
10
|
-
<h4 class="mw-mb-2">Border Spinner</h4>
|
|
11
|
-
<div class="mw-spinner-container">
|
|
12
|
-
<div class="mw-spinner-border"></div>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
|
|
16
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
17
|
-
<h4 class="mw-mb-2">Dots Spinner</h4>
|
|
18
|
-
<div class="mw-spinner-container">
|
|
19
|
-
<div class="mw-spinner-dots">
|
|
20
|
-
<div></div>
|
|
21
|
-
<div></div>
|
|
22
|
-
<div></div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
28
|
-
<h4 class="mw-mb-2">Dual Ring Spinner</h4>
|
|
29
|
-
<div class="mw-spinner-container">
|
|
30
|
-
<div class="mw-spinner-dual-ring"></div>
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
<h3 class="mw-mt-6">Spinner Sizes</h3>
|
|
36
|
-
<div class="mw-grid-3 mw-mt-4">
|
|
37
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
38
|
-
<h4 class="mw-mb-2">Small</h4>
|
|
39
|
-
<div class="mw-spinner-container">
|
|
40
|
-
<div class="mw-spinner-border mw-spinner-sm"></div>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
45
|
-
<h4 class="mw-mb-2">Default</h4>
|
|
46
|
-
<div class="mw-spinner-container">
|
|
47
|
-
<div class="mw-spinner-border"></div>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
52
|
-
<h4 class="mw-mb-2">Large</h4>
|
|
53
|
-
<div class="mw-spinner-container">
|
|
54
|
-
<div class="mw-spinner-border mw-spinner-lg"></div>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<h3 class="mw-mt-6">Spinner Colors</h3>
|
|
60
|
-
<div class="mw-grid-3 mw-mt-4">
|
|
61
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
62
|
-
<h4 class="mw-mb-2">Default</h4>
|
|
63
|
-
<div class="mw-spinner-container">
|
|
64
|
-
<div class="mw-spinner-border"></div>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
69
|
-
<h4 class="mw-mb-2">Primary</h4>
|
|
70
|
-
<div class="mw-spinner-container">
|
|
71
|
-
<div class="mw-spinner-border mw-spinner-primary"></div>
|
|
72
|
-
</div>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="mw-card mw-card-simple" style="height: 250px">
|
|
76
|
-
<h4 class="mw-mb-2">Secondary</h4>
|
|
77
|
-
<div class="mw-spinner-container">
|
|
78
|
-
<div class="mw-spinner-border mw-spinner-secondary"></div>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
|
|
83
|
-
<h3 class="mw-mt-6">Spinner in Context</h3>
|
|
84
|
-
<div class="mw-grid-2 mw-mt-4">
|
|
85
|
-
<div class="mw-card mw-card-simple" style="position: relative; height: 280px">
|
|
86
|
-
<div class="mw-spinner-container-overlay">
|
|
87
|
-
<div class="mw-spinner-dual-ring mw-spinner-primary"></div>
|
|
88
|
-
</div>
|
|
89
|
-
<h4 class="mw-mb-2">Overlay Spinner</h4>
|
|
90
|
-
<p>This card demonstrates a loading overlay with a spinner.</p>
|
|
91
|
-
<p>
|
|
92
|
-
The content remains visible but appears disabled during loading states,
|
|
93
|
-
providing clear visual feedback to users while data is being processed.
|
|
94
|
-
</p>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
<h3 class="mw-section-subtitle">Stepper</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure">
|
|
3
|
-
A process with a known number of steps and a current one. Horizontal where
|
|
4
|
-
there is width for it, vertical where the labels need the room.
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
<div class="mw-grid-2 mw-gap-6">
|
|
8
|
-
<!-- LEFT: Horizontal steppers -->
|
|
9
|
-
<div>
|
|
10
|
-
<h3 class="mw-card-title mw-mb-4">Horizontal</h3>
|
|
11
|
-
<div class="mw-card mw-card-simple">
|
|
12
|
-
<h4 class="mw-text-medium mw-mb-4">In Progress (step 2 active)</h4>
|
|
13
|
-
<div class="mw-stepper mw-mb-5">
|
|
14
|
-
<div class="mw-stepper-step">
|
|
15
|
-
<div class="mw-stepper-indicator mw-done">
|
|
16
|
-
<i class="fas fa-check"></i>
|
|
17
|
-
</div>
|
|
18
|
-
<span class="mw-stepper-label mw-done">Account</span>
|
|
19
|
-
</div>
|
|
20
|
-
<div class="mw-stepper-connector mw-done"></div>
|
|
21
|
-
<div class="mw-stepper-step">
|
|
22
|
-
<div class="mw-stepper-indicator mw-active">2</div>
|
|
23
|
-
<span class="mw-stepper-label mw-active">Details</span>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="mw-stepper-connector"></div>
|
|
26
|
-
<div class="mw-stepper-step">
|
|
27
|
-
<div class="mw-stepper-indicator">3</div>
|
|
28
|
-
<span class="mw-stepper-label">Payment</span>
|
|
29
|
-
</div>
|
|
30
|
-
<div class="mw-stepper-connector"></div>
|
|
31
|
-
<div class="mw-stepper-step">
|
|
32
|
-
<div class="mw-stepper-indicator">4</div>
|
|
33
|
-
<span class="mw-stepper-label">Confirm</span>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
<h4 class="mw-text-medium mw-mb-4">Completed</h4>
|
|
38
|
-
<div class="mw-stepper">
|
|
39
|
-
<div class="mw-stepper-step">
|
|
40
|
-
<div class="mw-stepper-indicator mw-done">
|
|
41
|
-
<i class="fas fa-check"></i>
|
|
42
|
-
</div>
|
|
43
|
-
<span class="mw-stepper-label mw-done">Setup</span>
|
|
44
|
-
</div>
|
|
45
|
-
<div class="mw-stepper-connector mw-done"></div>
|
|
46
|
-
<div class="mw-stepper-step">
|
|
47
|
-
<div class="mw-stepper-indicator mw-done">
|
|
48
|
-
<i class="fas fa-check"></i>
|
|
49
|
-
</div>
|
|
50
|
-
<span class="mw-stepper-label mw-done">Review</span>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="mw-stepper-connector mw-done"></div>
|
|
53
|
-
<div class="mw-stepper-step">
|
|
54
|
-
<div class="mw-stepper-indicator mw-done">
|
|
55
|
-
<i class="fas fa-check"></i>
|
|
56
|
-
</div>
|
|
57
|
-
<span class="mw-stepper-label mw-done">Deploy</span>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<!-- RIGHT: Vertical stepper -->
|
|
64
|
-
<div>
|
|
65
|
-
<h3 class="mw-card-title mw-mb-4">Vertical</h3>
|
|
66
|
-
<div class="mw-card mw-card-simple">
|
|
67
|
-
<div class="mw-stepper-vertical">
|
|
68
|
-
<div class="mw-stepper-step mw-done">
|
|
69
|
-
<div class="mw-stepper-indicator mw-done">
|
|
70
|
-
<i class="fas fa-check"></i>
|
|
71
|
-
</div>
|
|
72
|
-
<div class="mw-stepper-content">
|
|
73
|
-
<p class="mw-stepper-content-title">Project Initialized</p>
|
|
74
|
-
<p class="mw-stepper-content-desc">
|
|
75
|
-
Repository created and base structure set up.
|
|
76
|
-
</p>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
<div class="mw-stepper-step mw-done">
|
|
80
|
-
<div class="mw-stepper-indicator mw-done">
|
|
81
|
-
<i class="fas fa-check"></i>
|
|
82
|
-
</div>
|
|
83
|
-
<div class="mw-stepper-content">
|
|
84
|
-
<p class="mw-stepper-content-title">Dependencies Installed</p>
|
|
85
|
-
<p class="mw-stepper-content-desc">
|
|
86
|
-
All npm packages resolved successfully.
|
|
87
|
-
</p>
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
<div class="mw-stepper-step mw-active">
|
|
91
|
-
<div class="mw-stepper-indicator mw-active">3</div>
|
|
92
|
-
<div class="mw-stepper-content">
|
|
93
|
-
<p class="mw-stepper-content-title">Running Tests</p>
|
|
94
|
-
<p class="mw-stepper-content-desc">
|
|
95
|
-
Unit and integration tests in progress...
|
|
96
|
-
</p>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="mw-stepper-step">
|
|
100
|
-
<div class="mw-stepper-indicator">4</div>
|
|
101
|
-
<div class="mw-stepper-content">
|
|
102
|
-
<p class="mw-stepper-content-title">Deploy to Production</p>
|
|
103
|
-
<p class="mw-stepper-content-desc">
|
|
104
|
-
Awaiting test completion before release.
|
|
105
|
-
</p>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
<h3 class="mw-section-subtitle">Story Archive</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure">
|
|
3
|
-
Stories that stay. A circle opens its story full screen on a phone and
|
|
4
|
-
phone-shaped on a desktop; every frame shows for five seconds and a bar at the
|
|
5
|
-
top counts them off - that part is CSS alone. A few lines of script add the
|
|
6
|
-
rest: a tap on the right moves on, on the left goes back (arrows under a
|
|
7
|
-
mouse), a video starts when its frame comes up, the story closes at its end.
|
|
8
|
-
Holding a finger on it or the pause button stops it; Escape, the cross or a
|
|
9
|
-
click beside it close it. With reduced motion set in the system nothing plays
|
|
10
|
-
by itself - the frames become a strip to swipe through instead.
|
|
11
|
-
</p>
|
|
12
|
-
|
|
13
|
-
<div class="mw-stories" aria-label="Story archive">
|
|
14
|
-
<button type="button" class="mw-story" popovertarget="story-coast">
|
|
15
|
-
<span class="mw-story-cover"
|
|
16
|
-
><img src="images/story-beach.svg" alt=""
|
|
17
|
-
/></span>
|
|
18
|
-
<span class="mw-story-label">Coast</span>
|
|
19
|
-
</button>
|
|
20
|
-
<div class="mw-story-reel" id="story-coast" popover>
|
|
21
|
-
<div class="mw-story-reel-head">
|
|
22
|
-
<span>Coast</span>
|
|
23
|
-
<label class="mw-overlay-btn mw-story-reel-pause"
|
|
24
|
-
><input type="checkbox" aria-label="Pause"
|
|
25
|
-
/></label>
|
|
26
|
-
<button
|
|
27
|
-
type="button"
|
|
28
|
-
class="mw-overlay-btn"
|
|
29
|
-
popovertarget="story-coast"
|
|
30
|
-
popovertargetaction="hide"
|
|
31
|
-
aria-label="Close"
|
|
32
|
-
>
|
|
33
|
-
𝗫
|
|
34
|
-
</button>
|
|
35
|
-
</div>
|
|
36
|
-
<img
|
|
37
|
-
src="images/story-beach.svg"
|
|
38
|
-
alt="Beach at sunset with waves running up the sand"
|
|
39
|
-
loading="lazy"
|
|
40
|
-
/>
|
|
41
|
-
<video
|
|
42
|
-
src="media/story-sunrise.mp4"
|
|
43
|
-
poster="media/story-sunrise.jpg"
|
|
44
|
-
autoplay
|
|
45
|
-
muted
|
|
46
|
-
loop
|
|
47
|
-
playsinline
|
|
48
|
-
></video>
|
|
49
|
-
<img
|
|
50
|
-
src="images/photo-lighthouse.svg"
|
|
51
|
-
alt="Lighthouse on a cliff at dusk"
|
|
52
|
-
loading="lazy"
|
|
53
|
-
/>
|
|
54
|
-
</div>
|
|
55
|
-
<button type="button" class="mw-story" popovertarget="story-nights">
|
|
56
|
-
<span class="mw-story-cover"
|
|
57
|
-
><img src="images/story-stars.svg" alt=""
|
|
58
|
-
/></span>
|
|
59
|
-
<span class="mw-story-label">Nights</span>
|
|
60
|
-
</button>
|
|
61
|
-
<div class="mw-story-reel" id="story-nights" popover>
|
|
62
|
-
<div class="mw-story-reel-head">
|
|
63
|
-
<span>Nights</span>
|
|
64
|
-
<label class="mw-overlay-btn mw-story-reel-pause"
|
|
65
|
-
><input type="checkbox" aria-label="Pause"
|
|
66
|
-
/></label>
|
|
67
|
-
<button
|
|
68
|
-
type="button"
|
|
69
|
-
class="mw-overlay-btn"
|
|
70
|
-
popovertarget="story-nights"
|
|
71
|
-
popovertargetaction="hide"
|
|
72
|
-
aria-label="Close"
|
|
73
|
-
>
|
|
74
|
-
𝗫
|
|
75
|
-
</button>
|
|
76
|
-
</div>
|
|
77
|
-
<img
|
|
78
|
-
src="images/story-stars.svg"
|
|
79
|
-
alt="Tent glowing under the milky way"
|
|
80
|
-
loading="lazy"
|
|
81
|
-
/>
|
|
82
|
-
<img
|
|
83
|
-
src="images/photo-tower.svg"
|
|
84
|
-
alt="Television tower above the city at night"
|
|
85
|
-
loading="lazy"
|
|
86
|
-
/>
|
|
87
|
-
</div>
|
|
88
|
-
<button type="button" class="mw-story" popovertarget="story-north">
|
|
89
|
-
<span class="mw-story-cover"
|
|
90
|
-
><img src="images/story-aurora.svg" alt=""
|
|
91
|
-
/></span>
|
|
92
|
-
<span class="mw-story-label">North</span>
|
|
93
|
-
</button>
|
|
94
|
-
<div class="mw-story-reel" id="story-north" popover>
|
|
95
|
-
<div class="mw-story-reel-head">
|
|
96
|
-
<span>North</span>
|
|
97
|
-
<label class="mw-overlay-btn mw-story-reel-pause"
|
|
98
|
-
><input type="checkbox" aria-label="Pause"
|
|
99
|
-
/></label>
|
|
100
|
-
<button
|
|
101
|
-
type="button"
|
|
102
|
-
class="mw-overlay-btn"
|
|
103
|
-
popovertarget="story-north"
|
|
104
|
-
popovertargetaction="hide"
|
|
105
|
-
aria-label="Close"
|
|
106
|
-
>
|
|
107
|
-
𝗫
|
|
108
|
-
</button>
|
|
109
|
-
</div>
|
|
110
|
-
<img
|
|
111
|
-
src="images/story-aurora.svg"
|
|
112
|
-
alt="Northern lights over a snowy forest"
|
|
113
|
-
loading="lazy"
|
|
114
|
-
/>
|
|
115
|
-
<img
|
|
116
|
-
src="images/photo-peak.svg"
|
|
117
|
-
alt="Snowy mountain peak under a starry sky"
|
|
118
|
-
loading="lazy"
|
|
119
|
-
/>
|
|
120
|
-
</div>
|
|
121
|
-
<button type="button" class="mw-story" popovertarget="story-hikes">
|
|
122
|
-
<span class="mw-story-cover"
|
|
123
|
-
><img src="images/photo-forest-path.svg" alt=""
|
|
124
|
-
/></span>
|
|
125
|
-
<span class="mw-story-label">Hikes</span>
|
|
126
|
-
</button>
|
|
127
|
-
<div class="mw-story-reel" id="story-hikes" popover>
|
|
128
|
-
<div class="mw-story-reel-head">
|
|
129
|
-
<span>Hikes</span>
|
|
130
|
-
<label class="mw-overlay-btn mw-story-reel-pause"
|
|
131
|
-
><input type="checkbox" aria-label="Pause"
|
|
132
|
-
/></label>
|
|
133
|
-
<button
|
|
134
|
-
type="button"
|
|
135
|
-
class="mw-overlay-btn"
|
|
136
|
-
popovertarget="story-hikes"
|
|
137
|
-
popovertargetaction="hide"
|
|
138
|
-
aria-label="Close"
|
|
139
|
-
>
|
|
140
|
-
𝗫
|
|
141
|
-
</button>
|
|
142
|
-
</div>
|
|
143
|
-
<img
|
|
144
|
-
src="images/photo-forest-path.svg"
|
|
145
|
-
alt="Path through a sunlit forest"
|
|
146
|
-
loading="lazy"
|
|
147
|
-
/>
|
|
148
|
-
<img
|
|
149
|
-
src="images/photo-waterfall.svg"
|
|
150
|
-
alt="Waterfall between mossy cliffs"
|
|
151
|
-
loading="lazy"
|
|
152
|
-
/>
|
|
153
|
-
</div>
|
|
154
|
-
<button type="button" class="mw-story" popovertarget="story-sky">
|
|
155
|
-
<span class="mw-story-cover"
|
|
156
|
-
><img src="images/photo-balloon.svg" alt=""
|
|
157
|
-
/></span>
|
|
158
|
-
<span class="mw-story-label">Up high</span>
|
|
159
|
-
</button>
|
|
160
|
-
<div class="mw-story-reel" id="story-sky" popover>
|
|
161
|
-
<div class="mw-story-reel-head">
|
|
162
|
-
<span>Up high</span>
|
|
163
|
-
<label class="mw-overlay-btn mw-story-reel-pause"
|
|
164
|
-
><input type="checkbox" aria-label="Pause"
|
|
165
|
-
/></label>
|
|
166
|
-
<button
|
|
167
|
-
type="button"
|
|
168
|
-
class="mw-overlay-btn"
|
|
169
|
-
popovertarget="story-sky"
|
|
170
|
-
popovertargetaction="hide"
|
|
171
|
-
aria-label="Close"
|
|
172
|
-
>
|
|
173
|
-
𝗫
|
|
174
|
-
</button>
|
|
175
|
-
</div>
|
|
176
|
-
<img
|
|
177
|
-
src="images/photo-balloon.svg"
|
|
178
|
-
alt="Hot air balloon in a morning sky"
|
|
179
|
-
loading="lazy"
|
|
180
|
-
/>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|