@gemboss/website-ui 0.9.0 → 0.11.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/CHANGELOG.md +109 -0
- package/README.md +2 -2
- package/bin/lib/check.mjs +6 -2
- package/css/base.css +2 -1
- package/css/effects.css +1 -1
- package/css/footer.css +74 -58
- package/css/header.css +347 -115
- package/css/tokens.css +24 -5
- package/demo/article.html +58 -70
- package/demo/blog.html +58 -70
- package/demo/brand-profiles.html +57 -27
- package/demo/footer.html +59 -71
- package/demo/forms.html +58 -70
- package/demo/header.html +58 -108
- package/demo/index.html +58 -70
- package/demo/spotlight.html +58 -71
- package/demo/theme-example.html +1 -1
- package/docs/components.md +31 -21
- package/docs/markup-contract.md +53 -22
- package/js/website.js +285 -42
- package/js/website.mjs +319 -47
- package/package.json +1 -1
- package/system.json +23 -8
- package/templates/footer.html +11 -9
- package/templates/header.html +47 -24
- package/templates/page.html +54 -20
- package/website.css +449 -181
- package/website.min.css +1 -1
package/templates/header.html
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
Header: one per site, the same on every page. Keep it in one partial or component, never copied per page.
|
|
3
|
-
|
|
4
|
-
class="gw-header gw-header--float" (an inset card from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
Header: one per site, the same on every page. Keep it in one partial or component, never copied per page. It is
|
|
3
|
+
gemboss.ai's header (0.11.0, 1:1): a flat 64px bar with one hairline, 12px wider than the page's wrap. A brand that
|
|
4
|
+
chose the floating header adds one class to the <header>: class="gw-header gw-header--float" (an inset card from
|
|
5
|
+
1081px, docs/theming.md). Up to 1080px the nav and Sign in hide and the menu button opens #gw-mobile-menu, which
|
|
6
|
+
repeats the same links. website.js runs the mega menus, the mobile menu, the language switcher and the theme toggle.
|
|
7
|
+
The mega menu (0.11.0): a section's name is a link to its page that opens its panel (the pointer resting on it, the
|
|
8
|
+
keyboard's focus, ArrowDown steps into the first row). A panel holds its columns of rows and, beside them, the
|
|
9
|
+
pictures (.gw-mega__aside): its own card, and a preview per row while the pointer is on the row (data-gw-preview names
|
|
10
|
+
a <template> at the end of the header). Under it, an optional strip of links. Its width and its pictures' width are
|
|
11
|
+
the panel's (--gw-mega-w, --gw-mega-pv; 1000 and 320 when it says nothing), its columns too (--gw-mega-cols, 3).
|
|
12
|
+
Limits: at most five top-level items, one .gw-btn (the primary action), one second text action (.gw-header__link).
|
|
13
|
+
Each panel: two or three columns of four or five rows, at most one card, three links in its strip. The announcement
|
|
14
|
+
bar is optional: one sentence.
|
|
10
15
|
Two options (0.8.0):
|
|
11
16
|
- The mobile menu drills down (data-gw-menu="drill" on #gw-mobile-menu, as gemboss.ai's phone menu): the top level
|
|
12
17
|
lists the sections, a tap on one shows its level alone with Back and its title, and the actions stay in a bar at
|
|
13
18
|
the bottom of the sheet. Each group then carries its head (the Back button and the title, in the page's language).
|
|
19
|
+
A level may end with its panel's card and a link to the section's page (.gw-mobile-menu__all).
|
|
14
20
|
Without the attribute and the heads it is the 0.7.0 menu, whose groups open in place; without the script the drill
|
|
15
21
|
menu is that one too.
|
|
16
|
-
- The language switcher (.gw-lang, twice: in the actions from
|
|
22
|
+
- The language switcher (.gw-lang, twice: in the actions from 1081px, in the mobile menu's action bar below). It
|
|
17
23
|
lists the page's translations from its <link rel="alternate" hreflang="…" href="…"> in <head> and stays hidden
|
|
18
24
|
while the page has none: keep `hidden` on it, the script takes it away. Delete both copies only if the site will
|
|
19
25
|
never be translated. Put the word for "Language" in the page's language in data-gw-label-language.
|
|
@@ -21,24 +27,35 @@
|
|
|
21
27
|
-->
|
|
22
28
|
<div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
|
|
23
29
|
<header class="gw-header" data-gw-header>
|
|
24
|
-
<div class="gw-
|
|
25
|
-
<a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="
|
|
30
|
+
<div class="gw-header__bar">
|
|
31
|
+
<a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>
|
|
26
32
|
<nav class="gw-nav" aria-label="Main">
|
|
27
33
|
<ul class="gw-nav__list">
|
|
28
34
|
<li class="gw-nav__item">
|
|
29
|
-
<
|
|
30
|
-
<div class="gw-mega" id="gw-mega-product" hidden>
|
|
31
|
-
<div class="gw-
|
|
32
|
-
<div class="gw-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
<a class="gw-nav__trigger" href="[/product]" aria-expanded="false" aria-controls="gw-mega-product">[Product menu item] <svg class="gw-nav__chev" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
36
|
+
<div class="gw-mega" id="gw-mega-product" style="--gw-mega-w: 1120px; --gw-mega-pv: 380px" hidden>
|
|
37
|
+
<div class="gw-mega__body">
|
|
38
|
+
<div class="gw-mega__grid">
|
|
39
|
+
<div class="gw-mega__col">
|
|
40
|
+
<p class="gw-mega__heading">[Group]</p>
|
|
41
|
+
<a class="gw-mega__link" href="[/page]" data-gw-preview="pv-page-1"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
|
|
42
|
+
<a class="gw-mega__link" href="[/page]" data-gw-preview="pv-page-2"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="gw-mega__col">
|
|
45
|
+
<p class="gw-mega__heading">[Group]</p>
|
|
46
|
+
<!-- data-gw-preview="feature": this row shows the panel's own card -->
|
|
47
|
+
<a class="gw-mega__link" href="[/page]" data-gw-preview="feature"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
|
|
48
|
+
</div>
|
|
36
49
|
</div>
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
<a class="gw-
|
|
50
|
+
<!-- the panel's own card: a picture on the Stage (an <img> fills it; or your own drawing), its words under it -->
|
|
51
|
+
<div class="gw-mega__aside">
|
|
52
|
+
<a class="gw-mega__card" href="[/page]"><span class="gw-mega__art"><img src="[/picture.webp]" alt=""></span><span class="gw-mega__card-text"><b>[Card title]</b><i>[One line on why to open it]</i><span class="gw-mega__go">[Where it goes] →</span></span></a>
|
|
40
53
|
</div>
|
|
41
|
-
|
|
54
|
+
</div>
|
|
55
|
+
<!-- optional: the strip under the panel, three links at most, the last one on the right -->
|
|
56
|
+
<div class="gw-mega__foot">
|
|
57
|
+
<div class="gw-mega__foot-start"><a href="[changelog URL]" rel="noopener"><span class="gw-mega__new">New</span> [What's new on the changelog] <span aria-hidden="true">↗</span></a><a href="[/product]">[Everything in the product]</a></div>
|
|
58
|
+
<div class="gw-mega__foot-end"><a class="gw-mega__cta" href="[/contact]">[Book a demo] <span aria-hidden="true">→</span></a></div>
|
|
42
59
|
</div>
|
|
43
60
|
</div>
|
|
44
61
|
</li>
|
|
@@ -53,9 +70,9 @@
|
|
|
53
70
|
<ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
|
|
54
71
|
</div>
|
|
55
72
|
<a class="gw-nav__link gw-header__signin" href="[sign-in URL]">Sign in</a>
|
|
56
|
-
<a class="gw-
|
|
73
|
+
<a class="gw-nav__link gw-header__link" href="[/contact]">[Book a demo]</a>
|
|
57
74
|
<a class="gw-btn gw-btn--sm" href="[sign-up URL]">[Start free]</a>
|
|
58
|
-
<button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
75
|
+
<button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
59
76
|
</div>
|
|
60
77
|
</div>
|
|
61
78
|
<!-- data-gw-menu="drill" (0.8.0): leave it out, and the .gw-mobile-menu__head of each group, for the 0.7.0 menu -->
|
|
@@ -72,6 +89,8 @@
|
|
|
72
89
|
<li><a class="gw-mobile-menu__link" href="[/page]"><span class="gw-mobile-menu__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a></li>
|
|
73
90
|
<li><a class="gw-mobile-menu__link" href="[/page]"><span class="gw-mobile-menu__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a></li>
|
|
74
91
|
</ul>
|
|
92
|
+
<!-- optional: the level ends with its panel's card (the same markup as in the panel) and the section's own page -->
|
|
93
|
+
<a class="gw-mobile-menu__all" href="[/product]">All of [Product menu item]</a>
|
|
75
94
|
</details>
|
|
76
95
|
<a class="gw-mobile-menu__top" href="[/pricing]">[Pricing]</a>
|
|
77
96
|
<!-- the action bar: what is not a button on the first line, two things at most (the language on the left, Sign in
|
|
@@ -83,8 +102,12 @@
|
|
|
83
102
|
</div>
|
|
84
103
|
<a class="gw-btn gw-btn--lg gw-btn--block" href="[sign-up URL]">[Start free]</a>
|
|
85
104
|
<a class="gw-btn gw-btn--secondary gw-btn--lg gw-btn--block" href="[/contact]">[Book a demo]</a>
|
|
105
|
+
<a class="gw-mobile-menu__link gw-mobile-menu__link--muted" href="[changelog URL]" rel="noopener">[What's new] <span aria-hidden="true">↗</span></a>
|
|
86
106
|
<a class="gw-mobile-menu__link" href="[sign-in URL]">Sign in</a>
|
|
87
107
|
</div>
|
|
88
108
|
</nav>
|
|
89
109
|
</div>
|
|
110
|
+
<!-- the rows' previews (data-gw-preview): the script clones one into the panel's pictures while its row is pointed at -->
|
|
111
|
+
<template id="pv-page-1"><img src="[/preview-1.webp]" alt=""></template>
|
|
112
|
+
<template id="pv-page-2"><img src="[/preview-2.webp]" alt=""></template>
|
|
90
113
|
</header>
|
package/templates/page.html
CHANGED
|
@@ -28,24 +28,35 @@
|
|
|
28
28
|
|
|
29
29
|
<div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
|
|
30
30
|
<header class="gw-header" data-gw-header>
|
|
31
|
-
<div class="gw-
|
|
32
|
-
<a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="
|
|
31
|
+
<div class="gw-header__bar">
|
|
32
|
+
<a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>
|
|
33
33
|
<nav class="gw-nav" aria-label="Main">
|
|
34
34
|
<ul class="gw-nav__list">
|
|
35
35
|
<li class="gw-nav__item">
|
|
36
|
-
<
|
|
37
|
-
<div class="gw-mega" id="gw-mega-product" hidden>
|
|
38
|
-
<div class="gw-
|
|
39
|
-
<div class="gw-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
<a class="gw-nav__trigger" href="[/product]" aria-expanded="false" aria-controls="gw-mega-product">[Product menu item] <svg class="gw-nav__chev" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M6 9l6 6 6-6"/></svg></a>
|
|
37
|
+
<div class="gw-mega" id="gw-mega-product" style="--gw-mega-w: 1120px; --gw-mega-pv: 380px" hidden>
|
|
38
|
+
<div class="gw-mega__body">
|
|
39
|
+
<div class="gw-mega__grid">
|
|
40
|
+
<div class="gw-mega__col">
|
|
41
|
+
<p class="gw-mega__heading">[Group]</p>
|
|
42
|
+
<a class="gw-mega__link" href="[/page]" data-gw-preview="pv-page-1"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
|
|
43
|
+
<a class="gw-mega__link" href="[/page]" data-gw-preview="pv-page-2"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="gw-mega__col">
|
|
46
|
+
<p class="gw-mega__heading">[Group]</p>
|
|
47
|
+
<!-- data-gw-preview="feature": this row shows the panel's own card -->
|
|
48
|
+
<a class="gw-mega__link" href="[/page]" data-gw-preview="feature"><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
|
|
49
|
+
</div>
|
|
43
50
|
</div>
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
<a class="gw-
|
|
51
|
+
<!-- the panel's own card: a picture on the Stage (an <img> fills it; or your own drawing), its words under it -->
|
|
52
|
+
<div class="gw-mega__aside">
|
|
53
|
+
<a class="gw-mega__card" href="[/page]"><span class="gw-mega__art"><img src="[/picture.webp]" alt=""></span><span class="gw-mega__card-text"><b>[Card title]</b><i>[One line on why to open it]</i><span class="gw-mega__go">[Where it goes] →</span></span></a>
|
|
47
54
|
</div>
|
|
48
|
-
|
|
55
|
+
</div>
|
|
56
|
+
<!-- optional: the strip under the panel, three links at most, the last one on the right -->
|
|
57
|
+
<div class="gw-mega__foot">
|
|
58
|
+
<div class="gw-mega__foot-start"><a href="[changelog URL]" rel="noopener"><span class="gw-mega__new">New</span> [What's new on the changelog] <span aria-hidden="true">↗</span></a><a href="[/product]">[Everything in the product]</a></div>
|
|
59
|
+
<div class="gw-mega__foot-end"><a class="gw-mega__cta" href="[/contact]">[Book a demo] <span aria-hidden="true">→</span></a></div>
|
|
49
60
|
</div>
|
|
50
61
|
</div>
|
|
51
62
|
</li>
|
|
@@ -54,29 +65,52 @@
|
|
|
54
65
|
</nav>
|
|
55
66
|
<div class="gw-header__actions">
|
|
56
67
|
<button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
|
|
68
|
+
<!-- optional (0.8.0): the language switcher, shown by the script when <head> lists another language -->
|
|
69
|
+
<div class="gw-lang" data-gw-lang hidden>
|
|
70
|
+
<button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu" data-gw-label-language="Language"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"/></svg><span class="gw-lang__short"></span></button>
|
|
71
|
+
<ul class="gw-lang__menu" id="gw-lang-menu" hidden></ul>
|
|
72
|
+
</div>
|
|
57
73
|
<a class="gw-nav__link gw-header__signin" href="[sign-in URL]">Sign in</a>
|
|
58
|
-
<a class="gw-
|
|
74
|
+
<a class="gw-nav__link gw-header__link" href="[/contact]">[Book a demo]</a>
|
|
59
75
|
<a class="gw-btn gw-btn--sm" href="[sign-up URL]">[Start free]</a>
|
|
60
|
-
<button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="
|
|
76
|
+
<button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
61
77
|
</div>
|
|
62
78
|
</div>
|
|
63
|
-
|
|
79
|
+
<!-- data-gw-menu="drill" (0.8.0): leave it out, and the .gw-mobile-menu__head of each group, for the 0.7.0 menu -->
|
|
80
|
+
<div class="gw-mobile-menu" id="gw-mobile-menu" data-gw-menu="drill" hidden>
|
|
64
81
|
<nav class="gw-wrap" aria-label="Main, mobile">
|
|
65
82
|
<details class="gw-mobile-menu__group">
|
|
66
83
|
<summary>[Product menu item]</summary>
|
|
84
|
+
<!-- the level's head: Back and the title (the same words as the summary), focused when the level opens -->
|
|
85
|
+
<div class="gw-mobile-menu__head"><button class="gw-mobile-menu__back" type="button">Back</button><h2 class="gw-mobile-menu__title" tabindex="-1">[Product menu item]</h2></div>
|
|
86
|
+
<!-- optional: a heading over a run of links, as in the mega panel's columns -->
|
|
87
|
+
<p class="gw-mobile-menu__heading">[Group]</p>
|
|
67
88
|
<ul class="gw-mobile-menu__list">
|
|
68
|
-
<
|
|
69
|
-
<li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
|
|
89
|
+
<!-- a link with an icon and one line (both optional: <a class="gw-mobile-menu__link" href="…">[Page title]</a> is enough) -->
|
|
90
|
+
<li><a class="gw-mobile-menu__link" href="[/page]"><span class="gw-mobile-menu__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a></li>
|
|
91
|
+
<li><a class="gw-mobile-menu__link" href="[/page]"><span class="gw-mobile-menu__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a></li>
|
|
70
92
|
</ul>
|
|
93
|
+
<!-- optional: the level ends with its panel's card (the same markup as in the panel) and the section's own page -->
|
|
94
|
+
<a class="gw-mobile-menu__all" href="[/product]">All of [Product menu item]</a>
|
|
71
95
|
</details>
|
|
72
96
|
<a class="gw-mobile-menu__top" href="[/pricing]">[Pricing]</a>
|
|
97
|
+
<!-- the action bar: what is not a button on the first line, two things at most (the language on the left, Sign in
|
|
98
|
+
on the right), the two buttons under it. Stays at the bottom of the sheet in the drill menu. -->
|
|
73
99
|
<div class="gw-mobile-menu__actions">
|
|
74
|
-
<
|
|
75
|
-
|
|
100
|
+
<div class="gw-lang" data-gw-lang hidden>
|
|
101
|
+
<button class="gw-lang__btn" type="button" aria-expanded="false" aria-controls="gw-lang-menu-mobile" data-gw-label-language="Language"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"/></svg><span class="gw-lang__short"></span></button>
|
|
102
|
+
<ul class="gw-lang__menu" id="gw-lang-menu-mobile" hidden></ul>
|
|
103
|
+
</div>
|
|
104
|
+
<a class="gw-btn gw-btn--lg gw-btn--block" href="[sign-up URL]">[Start free]</a>
|
|
105
|
+
<a class="gw-btn gw-btn--secondary gw-btn--lg gw-btn--block" href="[/contact]">[Book a demo]</a>
|
|
106
|
+
<a class="gw-mobile-menu__link gw-mobile-menu__link--muted" href="[changelog URL]" rel="noopener">[What's new] <span aria-hidden="true">↗</span></a>
|
|
76
107
|
<a class="gw-mobile-menu__link" href="[sign-in URL]">Sign in</a>
|
|
77
108
|
</div>
|
|
78
109
|
</nav>
|
|
79
110
|
</div>
|
|
111
|
+
<!-- the rows' previews (data-gw-preview): the script clones one into the panel's pictures while its row is pointed at -->
|
|
112
|
+
<template id="pv-page-1"><img src="[/preview-1.webp]" alt=""></template>
|
|
113
|
+
<template id="pv-page-2"><img src="[/preview-2.webp]" alt=""></template>
|
|
80
114
|
</header>
|
|
81
115
|
|
|
82
116
|
<main id="main">
|