@gemboss/website-ui 0.10.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 +59 -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/header.css +335 -115
- package/css/tokens.css +22 -3
- package/demo/article.html +58 -70
- package/demo/blog.html +58 -70
- package/demo/brand-profiles.html +57 -27
- package/demo/footer.html +58 -70
- 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 +17 -12
- package/docs/markup-contract.md +45 -19
- package/js/website.js +284 -41
- package/js/website.mjs +314 -42
- package/package.json +1 -1
- package/system.json +20 -5
- package/templates/header.html +47 -24
- package/templates/page.html +54 -20
- package/website.css +361 -121
- package/website.min.css +1 -1
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">
|