kempo-css 2.1.3 → 2.1.5

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 (42) hide show
  1. package/.vscode/settings.json +2 -0
  2. package/CHANGELOG.md +12 -0
  3. package/dist/kempo.min.css +1 -1
  4. package/docs/borders-spacing.html +446 -0
  5. package/docs/buttons.html +262 -0
  6. package/docs/colors.html +199 -0
  7. package/docs/components/ThemePropertyInput.js +2 -2
  8. package/docs/elevation.html +509 -0
  9. package/docs/examples/responsive-grid.html +1 -1
  10. package/docs/index.html +237 -1477
  11. package/docs/inputs.html +252 -0
  12. package/docs/kempo.css +13 -0
  13. package/docs/kempo.min.css +1 -1
  14. package/docs/layout.html +311 -0
  15. package/docs/tables.html +262 -0
  16. package/docs/theme-editor.html +936 -802
  17. package/docs/typography.html +275 -0
  18. package/docs/utilities.html +172 -0
  19. package/docs-src/.config.js +26 -0
  20. package/docs-src/borders-spacing.page.html +297 -0
  21. package/docs-src/buttons.page.html +113 -0
  22. package/docs-src/colors.page.html +50 -0
  23. package/docs-src/default.template.html +22 -0
  24. package/docs-src/elevation.page.html +361 -0
  25. package/docs-src/examples/responsive-grid.html +33 -0
  26. package/docs-src/head.fragment.html +16 -0
  27. package/docs-src/index.page.html +95 -0
  28. package/docs-src/inputs.page.html +103 -0
  29. package/docs-src/layout.page.html +163 -0
  30. package/docs-src/nav.fragment.html +116 -0
  31. package/docs-src/tables.page.html +114 -0
  32. package/docs-src/theme-editor.page.html +850 -0
  33. package/docs-src/theme-editor.template.html +11 -0
  34. package/docs-src/typography.page.html +126 -0
  35. package/docs-src/utilities.page.html +26 -0
  36. package/llms.txt +2 -0
  37. package/package.json +3 -2
  38. package/scripts/build.js +7 -1
  39. package/src/kempo.css +13 -0
  40. package/tests/typography.browser-test.js +26 -0
  41. package/docs/init.js +0 -4
  42. package/docs/nav.js +0 -33
package/docs/typography.html ADDED
@@ -0,0 +1,275 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Typography - Kempo CSS</title>
8
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
9
+ <link rel="manifest" href="./manifest.json" />
10
+ <link rel="stylesheet" href="./kempo.min.css" />
11
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
12
+ <script>
13
+ window.kempo = {
14
+ pathToStylesheet: './kempo.min.css',
15
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
16
+ };
17
+ </script>
18
+
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <k-nav fixed class="bg-primary">
24
+ <button id="toggleNavSideMenu" class="link">
25
+ <k-icon name="menu"></k-icon>
26
+ </button>
27
+ <a href="./" class="d-if ph" style="align-items: center">
28
+ <img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
29
+ Kempo CSS
30
+ </a>
31
+ <a href="./theme-editor.html">Theme Editor</a>
32
+ <div class="flex"></div>
33
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
34
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
35
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
36
+ <k-theme-switcher></k-theme-switcher>
37
+ </k-nav>
38
+ <div style="width: 100%; height: 4rem;"></div>
39
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
40
+ <menu>
41
+ <div class="ta-center bb mb r0">
42
+ <h1 class="tc-primary">Kempo CSS</h1>
43
+ <img src="./media/icon128.png" alt="Kempo CSS Icon" />
44
+ </div>
45
+ <h5><a href="./typography.html">Typography</a></h5>
46
+ <div class="ml mb -mt">
47
+ <a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
48
+ <a href="./typography.html#headings" class="d-b">Headings</a>
49
+ <a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
50
+ <a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
51
+ <a href="./typography.html#lists" class="d-b">Lists</a>
52
+ </div>
53
+ <h5><a href="./layout.html">Layout</a></h5>
54
+ <div class="ml mb -mt">
55
+ <a href="./layout.html#display" class="d-b">Display</a>
56
+ <a href="./layout.html#flexbox" class="d-b">Flexbox</a>
57
+ <a href="./layout.html#grid" class="d-b">Grid System</a>
58
+ <a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
59
+ <a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
60
+ </div>
61
+ <h5><a href="./borders-spacing.html">Borders &amp; Spacing</a></h5>
62
+ <div class="ml mb -mt">
63
+ <a href="./borders-spacing.html#borders" class="d-b">Borders</a>
64
+ <a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
65
+ <a href="./borders-spacing.html#padding" class="d-b">Padding</a>
66
+ <a href="./borders-spacing.html#margins" class="d-b">Margins</a>
67
+ <a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
68
+ <a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
69
+ </div>
70
+ <h5><a href="./inputs.html">Inputs</a></h5>
71
+ <div class="ml mb -mt">
72
+ <a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
73
+ <a href="./inputs.html#labels" class="d-b">Labels</a>
74
+ <a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
75
+ </div>
76
+ <h5><a href="./buttons.html">Buttons</a></h5>
77
+ <div class="ml mb -mt">
78
+ <a href="./buttons.html#button-types" class="d-b">Button Types</a>
79
+ <a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
80
+ <a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
81
+ <a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
82
+ <a href="./buttons.html#no-styles" class="d-b">No Styles</a>
83
+ </div>
84
+ <h5><a href="./tables.html">Tables</a></h5>
85
+ <div class="ml mb -mt">
86
+ <a href="./tables.html#basic-table" class="d-b">Basic Table</a>
87
+ <a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
88
+ </div>
89
+ <h5><a href="./colors.html">Colors</a></h5>
90
+ <div class="ml mb -mt">
91
+ <a href="./colors.html#background" class="d-b">Background</a>
92
+ <a href="./colors.html#text-colors" class="d-b">Text Colors</a>
93
+ </div>
94
+ <h5><a href="./elevation.html">Elevation</a></h5>
95
+ <div class="ml mb -mt">
96
+ <a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
97
+ <a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
98
+ <a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
99
+ <a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
100
+ <a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
101
+ </div>
102
+ <h5><a href="./utilities.html">Utilities</a></h5>
103
+ <div class="ml mb -mt">
104
+ <a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
105
+ </div>
106
+ <hr />
107
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
108
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
109
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
110
+ <div style="height:33vh"></div>
111
+ </menu>
112
+ </k-aside>
113
+ <script type="module">
114
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
115
+ await window.customElements.whenDefined('k-aside');
116
+ document.getElementById('navSideMenu').toggle();
117
+ });
118
+ document.addEventListener('click', function(e) {
119
+ if (e.target.matches('a[href^="#"]')) {
120
+ e.preventDefault();
121
+ const targetId = e.target.getAttribute('href').replace('#', '');
122
+ const target = document.getElementById(targetId);
123
+ if (target) {
124
+ target.scrollIntoView({ behavior: 'smooth' });
125
+ history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
126
+ document.getElementById('navSideMenu').hide();
127
+ }
128
+ }
129
+ });
130
+ const fixedNav = document.querySelector('k-nav[fixed]');
131
+ if (fixedNav) {
132
+ const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
133
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
134
+ updateNavShadow();
135
+ }
136
+ </script>
137
+
138
+ <k-main>
139
+ <main>
140
+ <h1 class="ta-center">Typography</h1>
141
+
142
+ <h2 id="paragraphs">Paragraphs</h2>
143
+ <div class="row -mx">
144
+ <div class="col m-span-12 px">
145
+ <k-card label="HTML">
146
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
147
+ </k-card>
148
+ </div>
149
+ <div class="col m-span-12 px">
150
+ <k-card label="Output">
151
+ <p>
152
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
153
+ non unde laborum officia doloremque, repudiandae laudantium nihil!
154
+ Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit,
155
+ assumenda ipsa esse!
156
+ </p>
157
+ </k-card>
158
+ </div>
159
+ </div>
160
+
161
+ <h2 id="headings">Headings</h2>
162
+ <div class="row -mx">
163
+ <div class="col m-span-12 px">
164
+ <k-card label="HTML">
165
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Heading 1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Heading 2<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Heading 3<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>Heading 4<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>Heading 5<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Heading 6<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span></code></pre>
166
+ </k-card>
167
+ </div>
168
+ <div class="col m-span-12 px">
169
+ <k-card label="Output">
170
+ <h1>Heading 1</h1>
171
+ <h2>Heading 2</h2>
172
+ <h3>Heading 3</h3>
173
+ <h4>Heading 4</h4>
174
+ <h5>Heading 5</h5>
175
+ <h6>Heading 6</h6>
176
+ </k-card>
177
+ </div>
178
+ </div>
179
+
180
+ <h2 id="textmarkup">Text Markup</h2>
181
+ <div class="row -mx">
182
+ <div class="col m-span-12 px">
183
+ <k-card label="HTML">
184
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>strong<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>italics<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>strike<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>underline<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">sub</span>&gt;</span>sub<span class="hljs-tag">&lt;/<span class="hljs-name">sub</span>&gt;</span> Normal <span class="hljs-tag">&lt;<span class="hljs-name">sup</span>&gt;</span>super<span class="hljs-tag">&lt;/<span class="hljs-name">sup</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>bold<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">mark</span>&gt;</span>highlighted<span class="hljs-tag">&lt;/<span class="hljs-name">mark</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
185
+ </k-card>
186
+ </div>
187
+ <div class="col m-span-12 px">
188
+ <k-card label="Output">
189
+ <p>
190
+ <strong>strong</strong> <i>italics</i> <del>strike</del>
191
+ <u>underline</u> <sub>sub</sub> Normal <sup>super</sup>
192
+ <b>bold</b> <mark>highlighted</mark>
193
+ </p>
194
+ </k-card>
195
+ </div>
196
+ </div>
197
+
198
+ <h2 id="textdecoration">Text Decoration</h2>
199
+ <p>Utility classes to control text decoration without relying on semantic HTML elements like <code>&lt;u&gt;</code> or <code>&lt;del&gt;</code>. Useful with rich text editors like Lexical that don't support those elements.</p>
200
+ <div class="row -mx">
201
+ <div class="col m-span-12 px">
202
+ <k-card label="HTML">
203
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"td-n"</span>&gt;</span>no decoration<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"td-u"</span>&gt;</span>underline<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"td-lt"</span>&gt;</span>line-through<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>
204
+ </k-card>
205
+ </div>
206
+ <div class="col m-span-12 px">
207
+ <k-card label="Output">
208
+ <p>
209
+ <span class="td-n">no decoration</span><br>
210
+ <span class="td-u">underline</span><br>
211
+ <span class="td-lt">line-through</span>
212
+ </p>
213
+ </k-card>
214
+ </div>
215
+ </div>
216
+
217
+ <h2 id="lists">Lists</h2>
218
+ <div class="row -mx">
219
+ <div class="col m-span-12 px">
220
+ <k-card label="HTML">
221
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br> Item 3<br> <span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span></code></pre>
222
+ </k-card>
223
+ </div>
224
+ <div class="col m-span-12 px">
225
+ <k-card label="Output">
226
+ <ol>
227
+ <li>Item 1</li>
228
+ <li>Item 2</li>
229
+ <li>
230
+ Item 3
231
+ <ol>
232
+ <li>Sub Item 1</li>
233
+ <li>Sub Item 2</li>
234
+ <li>Sub Item 3</li>
235
+ </ol>
236
+ </li>
237
+ </ol>
238
+ </k-card>
239
+ </div>
240
+ </div>
241
+ <div class="row -mx">
242
+ <div class="col m-span-12 px">
243
+ <k-card label="HTML">
244
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br> Item 3<br> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
245
+ </k-card>
246
+ </div>
247
+ <div class="col m-span-12 px">
248
+ <k-card label="Output">
249
+ <ul>
250
+ <li>Item 1</li>
251
+ <li>Item 2</li>
252
+ <li>
253
+ Item 3
254
+ <ul>
255
+ <li>Sub Item 1</li>
256
+ <li>Sub Item 2</li>
257
+ <li>Sub Item 3</li>
258
+ </ul>
259
+ </li>
260
+ </ul>
261
+ </k-card>
262
+ </div>
263
+ </div>
264
+
265
+ </main>
266
+ <div style="height:33vh"></div>
267
+ </k-main>
268
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
269
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
270
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
271
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
272
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
273
+
274
+ </body>
275
+ </html>
package/docs/utilities.html ADDED
@@ -0,0 +1,172 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Utilities - Kempo CSS</title>
8
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
9
+ <link rel="manifest" href="./manifest.json" />
10
+ <link rel="stylesheet" href="./kempo.min.css" />
11
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
12
+ <script>
13
+ window.kempo = {
14
+ pathToStylesheet: './kempo.min.css',
15
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
16
+ };
17
+ </script>
18
+
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <k-nav fixed class="bg-primary">
24
+ <button id="toggleNavSideMenu" class="link">
25
+ <k-icon name="menu"></k-icon>
26
+ </button>
27
+ <a href="./" class="d-if ph" style="align-items: center">
28
+ <img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
29
+ Kempo CSS
30
+ </a>
31
+ <a href="./theme-editor.html">Theme Editor</a>
32
+ <div class="flex"></div>
33
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
34
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
35
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
36
+ <k-theme-switcher></k-theme-switcher>
37
+ </k-nav>
38
+ <div style="width: 100%; height: 4rem;"></div>
39
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
40
+ <menu>
41
+ <div class="ta-center bb mb r0">
42
+ <h1 class="tc-primary">Kempo CSS</h1>
43
+ <img src="./media/icon128.png" alt="Kempo CSS Icon" />
44
+ </div>
45
+ <h5><a href="./typography.html">Typography</a></h5>
46
+ <div class="ml mb -mt">
47
+ <a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
48
+ <a href="./typography.html#headings" class="d-b">Headings</a>
49
+ <a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
50
+ <a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
51
+ <a href="./typography.html#lists" class="d-b">Lists</a>
52
+ </div>
53
+ <h5><a href="./layout.html">Layout</a></h5>
54
+ <div class="ml mb -mt">
55
+ <a href="./layout.html#display" class="d-b">Display</a>
56
+ <a href="./layout.html#flexbox" class="d-b">Flexbox</a>
57
+ <a href="./layout.html#grid" class="d-b">Grid System</a>
58
+ <a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
59
+ <a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
60
+ </div>
61
+ <h5><a href="./borders-spacing.html">Borders &amp; Spacing</a></h5>
62
+ <div class="ml mb -mt">
63
+ <a href="./borders-spacing.html#borders" class="d-b">Borders</a>
64
+ <a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
65
+ <a href="./borders-spacing.html#padding" class="d-b">Padding</a>
66
+ <a href="./borders-spacing.html#margins" class="d-b">Margins</a>
67
+ <a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
68
+ <a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
69
+ </div>
70
+ <h5><a href="./inputs.html">Inputs</a></h5>
71
+ <div class="ml mb -mt">
72
+ <a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
73
+ <a href="./inputs.html#labels" class="d-b">Labels</a>
74
+ <a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
75
+ </div>
76
+ <h5><a href="./buttons.html">Buttons</a></h5>
77
+ <div class="ml mb -mt">
78
+ <a href="./buttons.html#button-types" class="d-b">Button Types</a>
79
+ <a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
80
+ <a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
81
+ <a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
82
+ <a href="./buttons.html#no-styles" class="d-b">No Styles</a>
83
+ </div>
84
+ <h5><a href="./tables.html">Tables</a></h5>
85
+ <div class="ml mb -mt">
86
+ <a href="./tables.html#basic-table" class="d-b">Basic Table</a>
87
+ <a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
88
+ </div>
89
+ <h5><a href="./colors.html">Colors</a></h5>
90
+ <div class="ml mb -mt">
91
+ <a href="./colors.html#background" class="d-b">Background</a>
92
+ <a href="./colors.html#text-colors" class="d-b">Text Colors</a>
93
+ </div>
94
+ <h5><a href="./elevation.html">Elevation</a></h5>
95
+ <div class="ml mb -mt">
96
+ <a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
97
+ <a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
98
+ <a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
99
+ <a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
100
+ <a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
101
+ </div>
102
+ <h5><a href="./utilities.html">Utilities</a></h5>
103
+ <div class="ml mb -mt">
104
+ <a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
105
+ </div>
106
+ <hr />
107
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
108
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
109
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
110
+ <div style="height:33vh"></div>
111
+ </menu>
112
+ </k-aside>
113
+ <script type="module">
114
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
115
+ await window.customElements.whenDefined('k-aside');
116
+ document.getElementById('navSideMenu').toggle();
117
+ });
118
+ document.addEventListener('click', function(e) {
119
+ if (e.target.matches('a[href^="#"]')) {
120
+ e.preventDefault();
121
+ const targetId = e.target.getAttribute('href').replace('#', '');
122
+ const target = document.getElementById(targetId);
123
+ if (target) {
124
+ target.scrollIntoView({ behavior: 'smooth' });
125
+ history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
126
+ document.getElementById('navSideMenu').hide();
127
+ }
128
+ }
129
+ });
130
+ const fixedNav = document.querySelector('k-nav[fixed]');
131
+ if (fixedNav) {
132
+ const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
133
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
134
+ updateNavShadow();
135
+ }
136
+ </script>
137
+
138
+ <k-main>
139
+ <main>
140
+ <h1 class="ta-center">Utilities</h1>
141
+
142
+ <div style="height:50vh"></div>
143
+ <p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
144
+ like dialogs and side menus that temporarily take over the page.</p>
145
+ <div class="row -mx">
146
+ <div class="col m-span-12 px">
147
+ <k-card label="HTML">
148
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.body.classList.toggle('no-scroll')"</span>&gt;</span>Toggle Body Scrolling<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
149
+ </k-card>
150
+ </div>
151
+ <div class="col m-span-12 px">
152
+ <k-card label="Output">
153
+ <button
154
+ class="mb"
155
+ onclick="document.body.classList.toggle('no-scroll')"
156
+ >Toggle Body Scrolling</button>
157
+ </k-card>
158
+ </div>
159
+ </div>
160
+ <div style="height:50vh"></div>
161
+
162
+ </main>
163
+ <div style="height:33vh"></div>
164
+ </k-main>
165
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
166
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
167
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
168
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
169
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
170
+
171
+ </body>
172
+ </html>
package/docs-src/.config.js ADDED
@@ -0,0 +1,26 @@
1
+ export default {
2
+ middleware: {
3
+ security: {
4
+ headers: {
5
+ 'X-Content-Type-Options': 'nosniff',
6
+ 'X-Frame-Options': 'SAMEORIGIN',
7
+ 'X-XSS-Protection': '1; mode=block'
8
+ }
9
+ }
10
+ },
11
+ customRoutes: {
12
+ "kempo.min.css": "../src/kempo.css",
13
+ "kempo-hljs.min.css": "../src/kempo-hljs.css",
14
+ "kempo.css": "../src/kempo.css",
15
+ "kempo-hljs.css": "../src/kempo-hljs.css",
16
+ "media/*": "../docs/media/*",
17
+ "manifest.json": "../docs/manifest.json",
18
+ "components/*": "../docs/components/*",
19
+ "demo.inc.html": "../docs/demo.inc.html",
20
+ "examples/*": "../docs/examples/*"
21
+ },
22
+ templating: {
23
+ ssr: true,
24
+ ssrPriority: true
25
+ }
26
+ };