-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
407 lines (389 loc) · 27.8 KB
/
index.html
File metadata and controls
407 lines (389 loc) · 27.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellegant CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div id="github">
<a href="https://github.com/ellegantcss/ellegant" target="_blank">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub logo">
</a>
</div>
<main>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<span class="fs-4">
<img src="logo.svg" alt="logo">
Ellegant CSS microframework
</span>
</a>
</header>
</div>
<div class="container py-4">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-7 fw-bold">It just works!</h1>
<p class="col-md-8 fs-4">
Ellegant is a CSS framework that aims to provide user interaction with very little or no Javascript at
all.<br>
With inputs and labels, Ellegant targets elements providing a fast and clean user experience even on low-end
mobile devices.
</p>
<a class="btn btn-primary btn-lg" href="#samples">See some components</a>
<div class="d-block d-sm-none mt-2"></div>
<a class="btn btn-success btn-lg" href="#howto">How to use</a>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-3 bg-light border rounded-3">
<h2>How? 🤯</h2>
<p>
By using inputs and labels we can take advantage of selectors like <i class="c">+</i> and <i
class="c">~</i>
to target the elements after the right <i class="c">input:checked</i>. This is why the HTML may look
just a little verbose, while the page remains fast and clean even when running on low-end mobile
devices.<br>
You already use CSS to change how elements are shown inside your JS code.
Ellegant goes one step further and removes the JS code.
</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<div class="h-100 p-3 bg-light border rounded-3">
<h2>Why? 🙄</h2>
<p>
We've been using many Javascript codes that we could replace with clever CSS selectors to replicate its
function.<br>
With this kind of no-JS component, you may use your Javascript code to do more complex interactions with
less fear of jamming your user experience.<br>
That is what we are talking about.
</p>
</div>
</div>
</div>
</div>
<div id="general" class="mt-3 pb-4 soft-bg">
<div class="container py-4">
<div class="mt-4 p-3 mb-4 text-bg-dark rounded-3">
<h2>🧩 General Components</h2>
<p>General Components react to user interaction in a way you can apply them for different purposes.</p>
<ol>
<li>The javascript portion is only needed if you want ARIA roles;</li>
<li>The ID properties must be unique to avoid conflicts;</li>
<li>The <i class="c">elle-*</i> classes and <i>for</i> attributes are needed.</li>
<li><i class="c">elle-animated-*</i> classes on target activate fade in animations from the top, right,
bottom, or left directions.</li>
</ol>
</div>
<div class="container" id="samples">
<div class="row">
<div class="col-md-6">
<h3>🔛 Toggler:</h3>
<p>
Toggler allows the hiding and showing of an element based on user interaction using a checkbox and a
label.<br>
The target element must have the checkbox preceding it, while the label can be placed anywhere. The
Toggler does <strong>not</strong> require a surrounding element, making it a versatile and flexible
component.
</p>
<section class="elle-toggler">
<label class="elle-label style-elle-btn" for="myToggler" role="button" aria-pressed="false">Click
me</label>
<input type="checkbox" class="elle-checkbox" id="myToggler">
<ul class="elle-target elle-animated-left">
<li><label for="myToggler" class="elle-label" role="button" aria-pressed="false">Click
<strong>here</strong> to also toggle it from the inside.</label></li>
<li>Everyday people like you and me,</li>
<li>Just want to live, naturally.</li>
<li>If you see someone you could help,</li>
<li>God is talking to you as He talks to me.</li>
</ul>
</section>
<br>
<details>
<summary>
View sample code
</summary>
<div class="attributes">
<pre><code id="toggler"></code></pre>
</div>
</details>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h3>🔄 Switcher:</h3>
<p>
The Switcher allows for the switching between elements based on user interaction using radio inputs and
labels.<br>
Each Switcher must be enclosed within a <i class="c">.elle-switcher</i> container. It is important to
note that the default implementation of the Switcher limits each instance to 10 options.
</p>
<section class="elle-switcher">
<!-- The label buttons -->
<label class="elle-label style-elle-btn" data-nth="1" for="myFirst" role="switch"
aria-checked="true">Show 1</label>
<label class="elle-label style-elle-btn" data-nth="2" for="mySecond" role="switch"
aria-checked="false">Show 2</label>
<label class="elle-label style-elle-btn" data-nth="3" for="myThird" role="switch"
aria-checked="false">Show 3</label>
<label class="elle-label style-elle-btn" data-nth="4" for="myFourth" role="switch"
aria-checked="false">Show 4</label>
<!-- Pairs of inputs and target elements -->
<input name="mySwitcher" type="radio" data-nth="1" class="elle-radio" id="myFirst" checked>
<section class="elle-target elle-animated-top" data-nth="1">
From time to time life will crumble
</section>
<input name="mySwitcher" type="radio" data-nth="2" class="elle-radio" id="mySecond">
<section class="elle-target elle-animated-right" data-nth="2">
Those days your soul will make you mumble
</section>
<input name="mySwitcher" type="radio" data-nth="3" class="elle-radio" id="myThird">
<section class="elle-target elle-animated-bottom" data-nth="3">
But you should not focus on your sorrow
</section>
<input name="mySwitcher" type="radio" data-nth="4" class="elle-radio" id="myFourth">
<section class="elle-target elle-animated-top" data-nth="4">
Because you might be Found tomorrow.
</section>
</section>
<br>
<details>
<summary>
View sample code
</summary>
<div class="attributes">
<pre><code id="switcher"></code></pre>
</div>
</details>
</div>
</div>
</div>
</div>
</div>
<div class="container py-4">
<div class="mt-4 p-3 mb-4 text-bg-dark rounded-3">
<h2>🍰 Single Components</h2>
<p>Single components are seen on the web, commonly requiring Javascript.</p>
<ol>
<li>The javascript portion is only needed if you want ARIA roles;</li>
<li>The ID properties must be unique to avoid conflicts;</li>
<li>The <i class="c">elle-*</i> classes and <i>for</i> attributes are needed.</li>
</ol>
</div>
</div>
<div class="container" id="samples">
<div class="row">
<div class="col-md-6 mt-4 mt-md-0">
<h3>🍔 Menu:</h3>
<p>
The mobile hamburger menu is a common navigation design pattern that is used in many mobile applications and
websites.
When users tap on the hamburger icon, a menu panel slides in from the left-hand side of the screen,
revealing a list of navigation links or other options.<br>
<i>But take note, if you need anchor links inside it, you'll need a little click event included in the
snippet below.</i>
</p>
<section class="menu">
<label class="elle-label style-elle-btn" for="myMenu" role="button" aria-pressed="false">Open ►</label>
<input class="elle-checkbox" type="checkbox" id="myMenu" />
<nav class="elle-menu">
<label class="elle-label elle-shadow" for="myMenu" role="button" aria-pressed="false"></label>
<ul>
<li class="elle-x">
<label class="elle-label" for="myMenu" role="button" aria-pressed="false">x</label>
</li>
<li class="text">This isn't a link</li>
<li><a href="/">This is a link</a></li>
<li>
<label class="elle-label" for="myMenu" role="button" aria-pressed="false">
<a onclick="this.parentElement.click();" href="#">Anchor link</a>
</label>
</li>
</ul>
</nav>
</section>
<section class="menur mt-1 mb-1">
<label class="elle-label style-elle-btn" for="myMenuR" role="button" aria-pressed="false">Open ◄</label>
<input class="elle-checkbox" type="checkbox" id="myMenuR" />
<nav class="elle-menu">
<label class="elle-label elle-shadow" for="myMenuR" role="button" aria-pressed="false"></label>
<ul class="elle-right">
<li class="elle-x">
<label class="elle-label" for="myMenuR" role="button" aria-pressed="false">x</label>
</li>
<li class="text">This isn't a link</li>
<li><a href="/">This is a link</a></li>
<li>
<label class="elle-label" for="myMenuR" role="button" aria-pressed="false">
<a onclick="this.parentElement.click();" href="#">Anchor link</a>
</label>
</li>
</ul>
</nav>
</section>
<small>Tip: To make it open from the right, add <i class="c">.elle-right</i> to the <i class="c">ul</i> tag.</small>
<br>
<br>
<details>
<summary>
View sample code
</summary>
<div class="attributes">
<pre><code id="menu"></code></pre>
</div>
</details>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h3>🟦 Modal:</h3>
<p>
Modal is a type of element that is displayed on top of the current window and requires the user to interact
with it before continuing.<br>
The target element must have the checkbox preceding it, while the label can be placed anywhere. The
Modal does <strong>not</strong> require a surrounding element, making it a versatile and flexible
component.
</p>
<section class="l-modal">
<label class="elle-label style-elle-btn" for="myModal" role="button" aria-pressed="false">Show</label>
<input type="checkbox" class="elle-checkbox" id="myModal">
<dialog open class="elle-modal">
<section class="elle-animated-top">
<header>
<h5>Warning</h5>
<label class="elle-label" for="myModal" role="button" aria-pressed="false">×</label>
</header>
<main>
<h3>Hey, you!</h3>
<p>Some surprises are more unexpected than others, which doesn't mean you shouldn't pay attention to them all. This Modal's neither that big nor too small.</p>
<p>It is important to note that the <i class="c">section</i> part of a Modal can also include <i class="c">.elle-animated-*</i> and be <i class="c">.elle-big</i> or <i class="c">.elle-small</i></p>
</main>
<footer>
<label class="elle-label style-elle-btn" for="myModal" role="button" aria-pressed="false">I got it</label>
</footer>
</section>
</dialog>
</section>
<br>
<details>
<summary>
View sample code
</summary>
<div class="attributes">
<pre><code id="modal"></code></pre>
</div>
</details>
</div>
<div class="col-md-6 mt-4 mt-md-4">
<h3>✅ On/Off (checkbox):</h3>
<p>
A checkbox element is a type of input element that allows users to select one or more options from a predefined set of choices.<br>
When a checkbox is checked, it indicates that the user has selected that option, and when it is unchecked, it indicates that the user has not selected it.
</p>
<label class="on">
<input type="checkbox" class="elle-on">
Only an input element!
</label>
<br>
<br>
<details>
<summary>
View sample code
</summary>
<div class="attributes">
<pre><code id="on"></code></pre>
</div>
</details>
</div>
</div>
</div>
<div class="soft-bg mt-5">
<div class="container py-4">
<div class="mt-4 p-4 mb-4 text-bg-dark rounded-3" id="howto">
<h2>🔥 How to use</h2>
<p>You may include Ellegant's CSS and optional JS file using those public CDN URL:</p>
<i class="c"><link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.min.css"></i> <button
onclick="prevCopy(this);" class="btn btn-outline-secondary btn-sm btn-xs" data-text="copy CSS">copy
CSS</button>
<br>
<div class="mt-3"></div>
<i class="c"><script
src="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.js"></script></i>
<button onclick="prevCopy(this);" class="btn btn-outline-secondary btn-sm btn-xs" data-text="copy JS">copy
JS</button>
</div>
<div class="mt-4 p-3 mb-4 bg-light rounded-3" id="howto">
<h2>💻 How to contribute</h2>
<p>Help develop Ellegant by writing code!</p>
<p>It is important to note that we use <a target="_blank" href="https://sass-lang.com/dart-sass">Dart Sass</a>
to transform <i class="c">SCSS</i> into <i class="c">CSS</i> so we only write SCSS and JS. This can be
achieved with the <a target="_blank" href="https://github.com/irispixel/vscode-dartsass">vscode-dartsass</a>
extension.</p>
<ol>
<li>Fork our GitHub repository <a href="https://github.com/ellegantcss/ellegant" target="_blank">here</a>;</li>
<li>Make your changes to <i class="c">ellegant.scss</i> and/or <i class="c">ellegant.js</i> and <i>push</i>
them to your repo;</li>
<li>Submit your <i>pull request</i>; <small style="opacity: 0.7;">Instructions on how to do that are <a
target="_blank"
href="https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork">here</a></small>
</li>
<li>Be respectful and explain what you meant to fix, implement or improve in your <i>pull request</i>.
<small style="opacity: 0.7;">The better you explain what you did, the better we can together explain it to
the
world.</small>
</li>
</ol>
</div>
</div>
</div>
<div class="container py-4">
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.js"></script>
<script>!function (n, t) { "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? module.exports = t() : n.indent = t() }(this, function () { var n = function (n) { function t(n, t) { var e, r = []; for (e = 0; e < n.length; e++)r.push(t(n[e], e, n)); return r } function e(n, t) { var e, r; for (e = 0; e < n.length; e++)if (r = t(n[e], e, n)) return r; return !1 } function r(n, t, e) { if (d[n]) return d[n]; var r = []; d[n] = r, e = e || ""; for (var a = 0; a < t.length; a++)t[a].a.indexOf(n.toLowerCase()) !== -1 && e.indexOf(t[a].b) === -1 && r.push(t[a]); return r } function a(n, a, o) { function h(n) { P = n.cursor; var t = n.rule, e = E + 1 + (t.c || 0); n.line = e, Z.push(n), t.d && z[e]++, t.e && (S = r(t.e, g)), t.f && F.push(null), t.callback && t.callback(n, z, O) } function d() { var n = Z.pop(), t = n.line, e = n.rule; if (e.d) { var r = "function" == typeof e.g ? e.g(b) : e.g, a = r || 0 !== b.matchIndex ? 1 : 0; O[E + a] && O[E + a].push(t) } e.e && (S = null), e.f && F.pop(), F[F.length - 1] = n } function m(n, r, a) { n = n.substring(a, n.length); for (var l, s, i, c = null, u = n.length, o = F[F.length - 1], h = o ? o.rule.b : "", d = t(Z, function (n) { return n.rule.b }).join("\n"), m = 0; m < r.length; m++)i = r[m], i.h && e(i.h, function (n) { return d.indexOf(n) != -1 }) || (!i.i || h && i.i.indexOf(h) !== -1) && (s = f(n, i.j, i), s.matchIndex != -1 && s.matchIndex < u && (!i.k || 0 === a) && (u = s.matchIndex, l = s, c = i)); return { rule: c, relativeIndex: c ? u : -1, matchIndex: c ? u + a : -1, cursor: c ? a + l.cursor : -1, state: l ? l.state : {}, lastMatch: o } } function j(n, t, e, r) { n = n.substr(e, n.length); var a = t.rule, l = f(n, a.l, a, t.state, r), s = a.m ? l.cursor : l.matchIndex; return { endPatternIndex: l.endPatternIndex, matchIndex: l.matchIndex === -1 ? -1 : l.matchIndex + e, cursor: s === -1 ? -1 : s + e, state: l.state } } n = n || ""; var b, x, v, p, I, y = o && null != o.tabString ? o.tabString : "\t", k = n.split(/[\r]?\n/gi), w = k.length, A = s(w), z = s(w), O = l(w), Z = [], F = [null], E = 0, P = 0, S = null; for (o && (o.debug = { buffers: { ignore: A, indent: z, dedent: O, active: Z } }); E < w;) { if (v = k[E].trim(), p = u(v) + "\r\n", I = Z[Z.length - 1], x = m(p, S || a, P), Z.length) if (b = j(p, I, P, x), b.matchIndex === -1) { if (I.rule.n) { A[E] = 1, E++, P = 0; continue } } else if (I.rule.n || x.matchIndex === -1 || b.matchIndex <= x.matchIndex) { d(), P = b.cursor; continue } x.matchIndex !== -1 ? h(x) : (E++, P = 0) } var $, q, R, T, M, C, H = 0, L = i(z), _ = s(w), B = []; for (M = 0; M < w; M++) { for (q = O[M], T = 0, C = 0; C < q.length; C++)R = q[C], R < 0 ? -R !== M && (_[-R]++, T += 1) : L[R] > 0 && (L[R]--, T += R !== M); $ = L[M], _[M] = $ > T ? 1 : $ < T ? $ - T : 0, L[M] = $ > 0 ? 1 : 0 } for (M = 0; M < w; M++)1 === A[M - 1] && 1 === A[M] ? B.push(k[M]) : (H += _[M] || 0, B.push((H > 0 ? c(y, H) : "") + k[M].trim())); return B.join("\r\n") } function l(n) { for (var t = new Array(n), e = 0; e < n; e++)t[e] = []; return t } function s(t) { if (n.Int16Array) return new Int16Array(t); for (var e = new Array(t), r = 0; r < t; r++)e[r] = 0; return e } function i(n) { for (var t = s(n.length), e = 0; e < n.length; e++)t[e] = n[e]; return t } function c(n, t) { return new Array(t + 1).join(n) } function u(n) { return n.replace(/\\(u[0-9A-Za-z]{4}|u\{[0-9A-Za-z]{1,6}]\}|x[0-9A-Za-z]{2}|.)/g, "0") } function o(n, t, e) { var r = n.lastMatch; r && "=" === r.rule.b && e[n.line].push(-r.line) } function h(n, t, e, r) { var a; if (e.newline) { if (a = n.search(/[;,=]?\r*\n/), a !== -1) return { matchIndex: a, length: 1 } } else a = n.search(/[^\s\r\n\{\(\[]/), e.newline = a !== -1 && (a <= r.relativeIndex || r.relativeIndex === -1); return null } function f(n, t, e, r, a) { r = r || {}; for (var l, s, i = -1, c = 0, u = 0; u < t.length; u++)if (s = t[u], "function" == typeof s) { if (l = s(n, e, r, a)) { i = l.matchIndex, c = l.length; break } } else if (l = n.match(s)) { i = n.search(s), c = l[0].length; break } return { endPatternIndex: u, matchIndex: i, cursor: i + c, state: r } } var d = {}; String.prototype.trim || (String.prototype.trim = function () { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "") }); var m = /\r*\n/, j = ["tag", "void-tags", "html-tag"], g = [{ a: "js html", b: "comment", j: [/\<\!\-\-/], l: [/\-\-\>/], n: !0, m: !0 }, { a: "html", b: "doctype", j: [/\<\!doctype html>/i], l: [m], n: !0, m: !0 }, { a: "js html", b: "void-tags", j: [/\<(area|base|br|col|command|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)/i], l: [/>/], d: !0, m: !0 }, { a: "html", b: "mode switch js", j: [function (n) { var t = /<script[\s>].*/i, e = /<\/script>/i, r = t.exec(n), a = e.exec(n); return r && (!a || a.index < r.index) ? { matchIndex: r.index, length: r[0].length } : null }], l: [/<\/script>/i], e: "js", m: !0, d: !0, f: !0 }, { a: "html", b: "mode switch css", j: [function (n) { var t = /<style[\s>].*/i, e = /<\/style>/i, r = t.exec(n), a = e.exec(n); return r && (!a || a.index < r.index) ? { matchIndex: r.index, length: r[0].length } : null }], l: [/<\/style>/i], e: "css", m: !0, d: !0, f: !0 }, { a: "html", b: "html-tag", j: [/<html[^A-Za-z0-9]/i], l: [/<\/html>/i], m: !0 }, { a: "js html", b: "tag", j: [function (n, t, e) { var r = /<([A-Za-z][A-Za-z0-9\-\.]*)/, a = n.match(r); return a ? (e.openingTag = a[1], { matchIndex: a.index, length: a[0].length }) : null }], l: [function (n, t, e) { var r = new RegExp("</" + e.openingTag + ">|\\s/>", "i"), a = n.match(r); return a ? { matchIndex: a.index, length: a[0].length } : null }], d: !0, m: !0 }, { a: "js", b: "line-comment", j: [/\/\//], l: [m], n: !0 }, { a: "js css", b: "block-comment", j: [/\/\*/], l: [/\*\//], n: !0, m: !0 }, { a: "js", b: "regex", j: [function (n, t) { var e = /[(,=:[!&|?{};][\s]*\/[^\/]|^[\s]*\/[^\/]/, r = n.search(e); if (r != -1) { r = n.indexOf("/", r); var a = n.substring(r + 1), l = f(a, t.l, t); if (l.matchIndex != -1) { a = a.substring(0, l.matchIndex); try { return new RegExp(a), { matchIndex: r, length: 1 } } catch (s) { return null } } } return null }], l: [function (n) { for (var t = 0, e = n.indexOf("/"); e != -1;)try { new RegExp(n.substring(0, e)); break } catch (r) { e = n.indexOf("/", t), t = e + 1 } return e === -1 ? null : { matchIndex: e, length: 1 } }], n: !0, m: !0 }, { a: "js html", b: "quotes", h: j, j: [/"/], l: [/"/, m], n: !0, m: !0 }, { a: "js html", b: "quotes", h: j, j: [/'/], l: [/'/, m], n: !0, m: !0 }, { a: "js css", b: "string", j: [/(''|""|``)/], l: [/./, m] }, { a: "js css", b: "string", j: [/\"(?=[^"])/], l: [/[^\\]\"/, m], n: !0, m: !0 }, { a: "js css", b: "string", j: [/\'(?=[^'])/], l: [/[^\\]\'/, m], n: !0, m: !0 }, { a: "js css", b: "string", j: [/\`(?=[^`])/], l: [/[^\\]\`/], n: !0, m: !0 }, { a: "js", b: "if", j: [/^if\s*(?=\()/, /[\s]+if\s*(?=\()/], l: [/else[\s]+/, h, /[{;]/], d: !0 }, { a: "js", b: "for|while", j: [/^(for|while)\s*(?=\()/], l: [h, /[{;]/], d: !0 }, { a: "js", b: "else", j: [/else[\s]+/], l: [/if[^\w$]/, h, /[{;]/], d: !0 }, { a: "js css", b: "bracket", j: [/\(\s*(var|let|const)?\s*/], l: [/\)/], d: !0, m: !0, f: !0 }, { a: "js", b: "dot-chain", j: [/^\.[A-Za-z$_]/], l: [/[\.;]/, m], d: !0, k: !0, c: -1 }, { a: "js", b: "dot-chain", j: [/\.\s*\r*\n/], l: [/[\.;})\]]/, /[^\s]\s*\r*\n/], d: !0 }, { a: "js css", b: "array", j: [/\[/], l: [/\]/], d: !0, m: !0, f: !0 }, { a: "js css", b: "block", j: [/\{/], l: [/\}/], d: !0, m: !0, f: !0 }, { a: "js", b: "var/let/const", j: [/(var|let|const)[\s]*\r*\n/], l: [h], d: !0, g: !0 }, { a: "js", b: "var/let/const", j: [/(var|let|const)\s+(?=[\w$])/], l: [/[,;=]/, h], d: !0 }, { a: "js", b: "var/let/const", i: ["var/let/const", "="], j: [/,[\s]*\r*\n/], l: [/[,;]/, h], d: !0, callback: o }, { a: "js", b: "var/let/const", i: ["var/let/const", "="], j: [/^,/], l: [/[,;]/, h], k: !0, d: !0, c: -1, callback: o }, { a: "js", b: "equality", j: [/[=<>!]=(=)?/], l: [/./] }, { a: "js", b: "=", h: j, j: [/=/], l: [/[,;\)\]}]/, m] }, { a: "js", b: "?:", j: [/\?/], l: [/[:;]/], g: !0, d: !0 }, { a: "js", b: "case", j: [/^(case|default)[\s:]/], l: [/break[\s;\r\n]/, /^return[\s;\r\n]/, /^case[\s]+/, /^default[\s:]/, /}/], g: function (n) { return n.endPatternIndex <= 1 }, d: !0, f: !0 }, { a: "js", b: "semicolon", j: [/;/], l: [/./] }]; return { css: function (n, t) { return a(n, r("css", g), t) }, js: function (n, t) { return a(n, r("js", g), t) }, ts: function (n, t) { return a(n, r("js", g), t) }, html: function (n, t) { var e = t && t.indentHtmlTag ? r("html", g, "html-tag") : r("html", g); return a(n, e, t) } } }(this); return n });</script>
<script>
toggler.innerText = indent.html(document.querySelector('.elle-toggler').innerHTML, { tabString: ' ' }).substring(2);
toggler.dataset.code = indent.html(document.querySelector('.elle-toggler').innerHTML, { tabString: ' ' }).substring(2);
switcher.innerText = indent.html(document.querySelector('.elle-switcher').outerHTML, { tabString: ' ' });
switcher.dataset.code = indent.html(document.querySelector('.elle-switcher').outerHTML, { tabString: ' ' });
menu.innerText = indent.html(document.querySelector('.menu').innerHTML, { tabString: ' ' }).substring(2);
menu.dataset.code = indent.html(document.querySelector('.menu').innerHTML, { tabString: ' ' }).substring(2);
modal.innerText = indent.html(document.querySelector('.l-modal').innerHTML, { tabString: ' ' }).substring(2);
modal.dataset.code = indent.html(document.querySelector('.l-modal').innerHTML, { tabString: ' ' }).substring(2);
on.innerText = indent.html(document.querySelector('.on').outerHTML, { tabString: ' ' });
on.dataset.code = indent.html(document.querySelector('.on').outerHTML, { tabString: ' ' });
document.querySelectorAll('code')
.forEach(e => {
e.insertAdjacentHTML('beforeend', '<button onclick="copy(this)" type="button" data-text="copy">copy</button>');
});
const copy = (e) => {
e.innerText = 'copied.';
setTimeout(() => e.innerText = e.dataset.text, 2000);
navigator.clipboard.writeText(e.parentElement.dataset.code);
}
const prevCopy = (e) => {
e.innerText = 'copied.';
setTimeout(() => e.innerText = e.dataset.text, 2000);
navigator.clipboard.writeText(e.previousElementSibling.innerText);
}
</script>
</body>
</html>