-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
732 lines (616 loc) · 62.6 KB
/
index.html
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
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="google-adsense-account" content="ca-pub-9088468190661086">
<link rel="icon" type="image/png" href="./assets/images/nycss-logo.png" />
<title>Nest Your CSS</title>
<script src="./lib/ace.min.js"></script>
<link href="./styles/properties.css" rel="stylesheet">
<link href="./styles/keyframes.css" rel="stylesheet">
<link href="./styles/editor.css" rel="stylesheet">
<link href="./styles/fonts.css" rel="stylesheet">
<link href="./styles/main.css" rel="stylesheet">
</head>
<body>
<script>
function moveMainBackground() {
document.body.style.setProperty('--cursorHorizPosition', roundNumber((window.cursorX / document.body.clientWidth) * 100) + '%');
};
</script>
<div id="site-wrapper">
<main>
<!-- <main class="nesting"> -->
<aside id="main-settings">
<section>
<h2>Editor</h2>
<ul>
<li>
<label>Font</label>
<div>
<label id="typefaces" class="select-menu">
<input type="checkbox">
<output>Fira Code</output>
<menu hidden>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">DejaVu Mono</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">Fira Code</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">iA Writer Mono</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">Jetbrains Mono</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">PT Sans</option>
</menu>
<script>((labelElem = document.currentScript.parentElement) => document.addEventListener('click', (e) => !labelElem.contains(e.target) && (labelElem.control.checked = false)))()</script>
</label>
<label id="fontsizes" class="select-menu">
<input type="checkbox">
<output>1.25rem</output>
<menu hidden>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">0.5rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">0.75rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">1rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">1.25rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">1.5rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">1.75rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">2rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">2.25rem</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">2.5rem</option>
</menu>
<script>((labelElem = document.currentScript.parentElement) => document.addEventListener('click', (e) => !labelElem.contains(e.target) && (labelElem.control.checked = false)))()</script>
</label>
</div>
</li>
<li>
<label>Indentation</label>
<div>
<label id="indentationType" class="checkbox">
<input type="checkbox">
<span>Soft</span>
<span>Hard</span>
</label>
<label id="indentationSize" class="number">
Size:
<output>
<span contenteditable="true" inputmode="numeric" oninput="(this.textContent = +this.textContent.replace(/\D+/g, '')) && numberHandler(this, event)" onkeydown="numberHandler(this, event)">4</span>
<div>
<svg fill="#484848" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="numberHandler(this, event)" onmousedown="numberHandler(this, event)" onmouseup="numberHandler(this, event)" ontouchstart="numberHandler(this, event)" ontouchend="numberHandler(this, event)"><path d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z"></path></svg>
<svg fill="#484848" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="numberHandler(this, event)" onmousedown="numberHandler(this, event)" onmouseup="numberHandler(this, event)" ontouchstart="numberHandler(this, event)" ontouchend="numberHandler(this, event)"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z"></path></svg>
</div>
</output>
</label>
</div>
</li>
<li>
<label>Coordinates</label>
<div>
<label id="coordinates" class="radio-group">
<label>None<input type="radio" name="coordinates"></label>
<label>Line<input type="radio" name="coordinates"></label>
<label>Col<input type="radio" name="coordinates" checked></label>
<label>Both<input type="radio" name="coordinates"></label>
</label>
</div>
</li>
</ul>
</section>
<section>
<h2>Functionality</h2>
<ul>
<li>
<label>Mode</label>
<div>
<label id="mode" class="radio-group">
<label>Minify<input type="radio" name="mode"></label>
<label>Nest<input type="radio" name="mode"></label>
<label>Unnest<input type="radio" name="mode" checked></label>
</label>
</div>
</li>
<li>
<label>Auto</label>
<div>
<label id="auto" class="checkbox">
<input type="checkbox">
<span>On</span>
<span>Off</span>
</label>
</div>
</li>
</ul>
</section>
<section>
<h2>Input</h2>
<ul>
<li>
<label>
External CSS
<p>(press enter to inject)</p>
</label>
<div>
<!-- Custom made with Inherited styles from dropdown -->
<label id="externalCss" class="select-menu">
<input type="checkbox">
<output placeholder="https://...">https://google.com/assets/styles.css</output>
<menu hidden>
<!-- <option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0"></option> -->
</menu>
<script>((labelElem = document.currentScript.parentElement) => document.addEventListener('click', (e) => !labelElem.contains(e.target) && (labelElem.control.checked = false)))()</script>
</label>
</div>
</li>
<li>
<label>Samples</label>
<div>
<label id="samples" class="select-menu">
<input type="checkbox" style="appearance: none; position: absolute;">
<output>Default</output>
<menu hidden>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">Default</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">NYCSS Syntax Highlighter</option>
<option onclick="selectHandler(this)" onkeydown="(event.code === 'Space') && selectHandler(this, true)" tabindex="0">-----</option>
</menu>
<script>((labelElem = document.currentScript.parentElement) => document.addEventListener('click', (e) => !labelElem.contains(e.target) && (labelElem.control.checked = false)))()</script>
</label>
</div>
</li>
</ul>
</section>
<section>
<menu>5 Buttons</menu>
</section>
<section>
<table>Errors</table>
</section>
</aside>
<section id="main-content">
<article id="textSide">
<header>
<hgroup>
<h3 id="splashText">Feeling lost in the stylesheets?</h3>
<script>
let isUpdating = false;
const splashTexts = [
"Is fine-tuning your site's look too fiddly?",
"Need to keep your rules in order?",
"Is your code getting clouded?",
"Is your code becoming a maze?",
"Drowning in a sea of selectors?",
"Does your code make you cringe?",
"Is updating your site's style a chore?",
"Is your site's style not stacking up?",
"Feeling lost in the stylesheets?",
"Is organizing your website's look a headache?",
"Want your styles and HTML structure to correlate?"
];
const splashTextElem = document.getElementById("splashText");
splashTextElem.textContent = "";
updateSplashText("", splashTexts[Math.floor(Math.random() * splashTexts.length)]);
function attemptSplashTextUpdate() {
if (!isUpdating) {
let currentSplashText = splashTextElem.textContent;
let newSplashText = splashTexts[Math.floor(Math.random() * splashTexts.length)];
updateSplashText(currentSplashText, newSplashText); // Initiator of the recursion
}
}
// Recursion
function updateSplashText(originalSplashText, newSplashText, currentSplashText = originalSplashText, i = 0, direction = -1) {
let maxScramble = Math.min(8, splashTexts.reduce((a, b) => a.length <= b.length ? a : b).length);
isUpdating = true
function scrambleSplashText(splashText) {
return splashText
.split("")
.map((ch) => {
let newCharacter = 32;
if (ch != " ") {
let code = ch.charCodeAt(0);
if (code >= 65 && code <= 90) newCharacter = 65;
else newCharacter = 97;
newCharacter += Math.floor(Math.random() * 26);
}
return String.fromCharCode(newCharacter);
})
.join("");
};
if (direction == -1 && i <= originalSplashText.length) {
currentSplashText = currentSplashText.slice(0, -1);
let scrambleCount = Math.min(i++, maxScramble);
// Get the static part of the new splash text
let staticPart = currentSplashText.slice(0, currentSplashText.length - scrambleCount);
// Get the remaining part to be scrambled
let remainingPart = currentSplashText.slice(currentSplashText.length - scrambleCount, originalSplashText.length);
// Scramble the remaining part
remainingPart = scrambleSplashText(remainingPart);
// Combine the static part and the scrambled part
currentSplashText = staticPart + remainingPart;
splashTextElem.textContent = currentSplashText;
if (staticPart.length == 0) direction = 1, i = 0;
}
else if (direction == 1) {
// Get the static part of the new splash text
let staticPart = newSplashText.slice(0, i);
// Get the remaining part to be scrambled
let remainingPart = newSplashText.slice(i, Math.min(i * 2, i + maxScramble));
// Scramble the remaining part
remainingPart = scrambleSplashText(remainingPart);
// Combine the static part and the scrambled part
currentSplashText = (staticPart + remainingPart).padEnd(maxScramble, currentSplashText);
splashTextElem.textContent = currentSplashText;
i++;
};
if (i <= originalSplashText.length || i <= newSplashText.length) {
setTimeout(() => requestAnimationFrame(() => updateSplashText(originalSplashText, newSplashText, currentSplashText, i, direction)), 25); // Loop
} else {
setTimeout(() => isUpdating = false, 5000); // Exit
}
}
</script>
<h1>Nest Your CSS!</h1>
</hgroup>
<menu>
<button class="navButton" id="githubBtn">
<a href="https://github.com/TimChinye/NestYourCSS/" target="_blank"></a>
<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M47.3,8.1C51.5,8 56.3,8.7 60.3,10C63.7,11.2 68.7,13.7 71.5,15.8C74.2,17.8 78.1,21.8 80.2,24.5C82.3,27.3 84.9,32.4 86,36C87.1,39.6 88,45.1 88,48.3C88,51.4 87.1,56.8 86,60.3C84.8,63.7 82.2,68.8 80.2,71.5C78.1,74.3 74.2,78.2 71.5,80.3C68.7,82.3 63.6,84.9 60,86C56.4,87.1 50.9,88 47.8,88C44.6,88 39.2,87.1 35.8,86C32.3,84.8 27.3,82.3 24.5,80.2C21.8,78.2 17.9,74.3 15.8,71.5C13.7,68.7 11.1,63.6 10,60C8.9,56.4 8,50.9 8,47.7C8,44.6 8.9,39.2 10,35.8C11.2,32.3 13.8,27.3 15.8,24.5C17.9,21.8 21.8,17.8 24.5,15.8C27.3,13.7 32,11.1 35,10.1C38.2,9 43.4,8.1 47.3,8.1ZM28.1,20.5C25.8,22.1 22.3,25.8 20.4,28.5C18.5,31.3 16.3,35.8 15.5,38.5C14.6,41.3 14,45.5 14,48C14,50.5 14.7,54.8 15.5,57.5C16.3,60.3 18.5,64.8 20.3,67.5C22.2,70.3 25.4,73.7 27.6,75.2C29.7,76.7 33.2,78.6 35.3,79.5L39,81C39,68.6 39,68.5 36,67.7C34.1,67.3 32.6,66 31.8,64.3C31.2,62.7 29.9,60.7 29.1,59.7C27.7,58.2 27.7,57.9 29,57.9C29.8,57.9 31.6,59.1 33,60.5C34.4,61.9 36.2,63 37,63C37.8,63 39.5,61.7 40.8,60L43,57C37.2,54.3 34.5,51.9 33.2,50C31.3,47.1 31,45.7 31.4,42C31.8,39.5 32.2,35 32.5,32C32.7,29 33.2,26.3 33.5,26C33.8,25.7 35.4,26.2 37,27C38.7,27.8 40.1,28.8 40,29.3C40,29.7 43,29.9 46.8,29.7C51,29.5 54.5,28.8 56.3,27.7C57.8,26.8 59.6,26.2 60.3,26.4C60.9,26.6 61.8,29.3 62.2,32.6C62.7,35.9 63.2,40.3 63.5,42.5C63.9,45.5 63.6,47.3 62,49.8C60.9,51.5 58.2,53.9 56,55C52.1,57 52,57 53.8,59.1C55.1,60.7 55.6,63.4 55.8,71.1C56,80.8 56,81 58.3,80.4C59.5,80.1 62.3,78.8 64.5,77.5C66.7,76.3 70.5,73 72.9,70.4C75.4,67.7 78.3,63.5 79.4,61C81,57.6 81.5,54.4 81.5,48C81.5,41.3 81,38.5 79.2,34.7C78,32.1 74.9,27.7 72.3,24.9C69.6,22.1 65.1,18.7 62,17.2C58.1,15.4 54.5,14.5 49.5,14.3C44.6,14 41,14.5 37.4,15.7C34.7,16.7 30.5,18.9 28.1,20.5Z" />
<path d="M48,96C74.51,96 96,74.51 96,48C96,21.49 74.51,0 48,0C21.49,0 0,21.49 0,48C0,74.51 21.49,96 48,96ZM60.3,9.909C56.3,8.609 51.5,7.909 47.3,8.009C43.4,8.009 38.2,8.909 35,10.009C32,11.009 27.3,13.609 24.5,15.709C21.8,17.709 17.9,21.709 15.8,24.409C13.8,27.209 11.2,32.209 10,35.709C8.9,39.109 8,44.509 8,47.609C8,50.809 8.9,56.309 10,59.909C11.1,63.509 13.7,68.609 15.8,71.409C17.9,74.209 21.8,78.109 24.5,80.109C27.3,82.209 32.3,84.709 35.8,85.909C39.2,87.009 44.6,87.909 47.8,87.909C50.9,87.909 56.4,87.009 60,85.909C63.6,84.809 68.7,82.209 71.5,80.209C74.2,78.109 78.1,74.209 80.2,71.409C82.2,68.709 84.8,63.609 86,60.209C87.1,56.709 88,51.309 88,48.209C88,45.009 87.1,39.509 86,35.909C84.9,32.309 82.3,27.209 80.2,24.409C78.1,21.709 74.2,17.709 71.5,15.709C68.7,13.609 63.7,11.109 60.3,9.909ZM20.4,28.409C22.3,25.709 25.8,22.009 28.1,20.409C30.5,18.809 34.7,16.609 37.4,15.609C41,14.409 44.6,13.909 49.5,14.209C54.5,14.409 58.1,15.309 62,17.109C65.1,18.609 69.6,22.009 72.3,24.809C74.9,27.609 78,32.009 79.2,34.609C81,38.409 81.5,41.209 81.5,47.909C81.5,54.309 81,57.509 79.4,60.909C78.3,63.409 75.4,67.609 72.9,70.309C70.5,72.909 66.7,76.209 64.5,77.409C62.3,78.709 59.5,80.009 58.3,80.309C56.004,80.908 56,80.71 55.801,71.061L55.8,71.009C55.6,63.309 55.1,60.609 53.8,59.009C52.03,56.944 52.097,56.91 55.808,55.008C55.871,54.976 55.935,54.943 56,54.909C58.2,53.809 60.9,51.409 62,49.709C63.6,47.209 63.9,45.409 63.5,42.409C63.395,41.638 63.265,40.595 63.119,39.425C62.849,37.258 62.525,34.652 62.2,32.509C61.8,29.209 60.9,26.509 60.3,26.309C59.6,26.109 57.8,26.709 56.3,27.609C54.5,28.709 51,29.409 46.8,29.609C43,29.809 40,29.609 40,29.209C40.1,28.709 38.7,27.709 37,26.909C35.4,26.109 33.8,25.609 33.5,25.909C33.2,26.209 32.7,28.909 32.5,31.909C32.443,32.48 32.382,33.106 32.319,33.761C32.048,36.55 31.724,39.885 31.4,41.909C31,45.609 31.3,47.009 33.2,49.909C34.5,51.809 37.2,54.209 43,56.909L40.8,59.909C39.5,61.609 37.8,62.909 37,62.909C36.2,62.909 34.4,61.809 33,60.409C31.6,59.009 29.8,57.809 29,57.809C27.7,57.809 27.7,58.109 29.1,59.609C29.9,60.609 31.2,62.609 31.8,64.209C32.6,65.909 34.1,67.209 36,67.609C39,68.409 39,68.509 39,80.909L35.3,79.409C33.2,78.509 29.7,76.609 27.6,75.109C25.4,73.609 22.2,70.209 20.3,67.409C18.5,64.709 16.3,60.209 15.5,57.409C14.7,54.709 14,50.409 14,47.909C14,45.409 14.6,41.209 15.5,38.409C16.3,35.709 18.5,31.209 20.4,28.409Z" />
</svg>
<span>Contribute</span>
</button>
<button class="navButton" id="historyBtn">
<a href="https://github.com/TimChinye/NestYourCSS/"></a>
<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M47.3,8.01C50.4,7.91 55.4,8.61 58.3,9.41C61.1,10.21 66.4,12.81 69.9,15.11C73.9,17.71 77.8,21.51 80.2,24.91C82.3,27.91 85,33.31 86.1,36.91C87.2,40.51 88,45.41 88,47.91C88,50.41 87.2,55.31 86.1,58.91C85,62.51 82.3,67.91 80.2,70.91C77.8,74.31 73.9,78.11 69.9,80.71C66.4,83.01 61.1,85.61 58.3,86.41C55.4,87.21 50.8,87.91 48,87.91C45.3,87.91 40.2,87.01 36.8,85.91C33.3,84.81 28.1,82.21 25.1,80.21C22.1,78.11 18,73.91 15.8,70.91C13.7,67.91 11,62.51 9.9,58.91C8.8,55.31 8,50.31 8,47.61C8,45.01 8.9,40.11 10,36.71C11.1,33.21 13.5,28.21 15.4,25.41C17.3,22.71 20.6,19.01 22.7,17.31C24.8,15.61 28.1,13.41 30,12.41C31.9,11.41 35.3,10.01 37.5,9.31C39.7,8.61 44.1,8.01 47.3,8.01ZM35.5,16.61C33.3,17.51 29.7,19.71 27.5,21.41C25.3,23.21 21.7,27.21 19.5,30.41C15.6,36.01 15.5,36.31 15.1,46.31C14.8,55.61 15,56.81 17.4,61.71C18.8,64.51 21.7,68.71 23.8,71.01C25.8,73.21 30.2,76.41 33.5,78.01C38.7,80.61 40.6,80.91 48,80.91C55.4,80.91 57.3,80.61 62.5,78.01C65.8,76.41 70.2,73.21 72.3,71.01C74.3,68.71 77.1,64.71 78.5,61.91C80.6,57.71 81,55.51 81,47.91C81,41.11 80.5,37.91 79,34.61C78,32.31 75.2,28.21 72.8,25.51C70.1,22.51 66.2,19.61 62.5,17.81C58.5,15.91 54.3,14.81 50,14.51C46.4,14.21 42.6,14.21 41.5,14.51C40.4,14.81 37.7,15.71 35.5,16.61ZM51.9,25.01C54.4,25.31 58.4,26.91 60.8,28.51C63.2,30.11 66.4,33.21 67.8,35.41C70.2,39.01 70.5,40.31 70.5,48.01C70.5,55.61 70.2,57.01 67.8,60.71C66.2,63.01 63.3,66.01 61.3,67.41C59.2,68.71 55.5,70.21 53,70.71C50.5,71.11 46.3,71.11 43.5,70.71C40.6,70.31 36.9,68.71 34.7,67.21C32.6,65.61 29.7,62.61 28.2,60.41C26.5,57.71 25.5,54.71 25.3,51.11C25,46.51 25.2,45.91 27,45.91C28.6,45.91 29.3,47.11 30.6,51.71C31.7,55.41 33.3,58.41 35.4,60.41C37.1,62.11 40.8,64.01 43.5,64.81C47.4,65.91 49.3,65.91 52.3,65.01C54.3,64.41 57.6,62.41 59.7,60.71C61.7,58.91 63.9,55.91 64.7,54.21C65.4,52.41 66,49.41 66,47.71C66,45.91 65,42.41 63.7,39.91C62.3,37.01 60,34.51 57,32.71C54.1,30.91 51.1,29.91 48.8,29.91C46.7,29.91 43.2,30.61 41,31.41C38.8,32.21 37,33.41 37,33.91C37,34.41 37.7,35.11 38.5,35.41C39.3,35.71 40,36.61 40,37.41C40,38.21 39.3,39.11 38.5,39.41C37.7,39.71 34.8,39.91 27,39.91L27,33.91C27,30.11 27.5,27.71 28.3,27.31C28.9,26.91 30.4,27.21 31.5,27.91C33.1,28.91 34,28.81 36,27.51C37.4,26.61 40.5,25.61 42.9,25.11C45.4,24.71 49.4,24.61 51.9,25.01ZM48.2,34.91C48.6,34.91 49.2,35.91 49.5,37.21C49.7,38.41 50.1,41.21 50.2,43.41C50.5,47.31 50.6,47.41 54.3,47.71C57.3,47.91 58,48.31 58,49.91C58,51.01 57.3,52.11 56.5,52.41C55.7,52.71 53,52.91 46,52.91L45.8,44.61C45.7,40.01 46,35.91 46.5,35.61C47,35.21 47.7,34.91 48.2,34.91Z" />
<path d="M48,96C74.51,96 96,74.51 96,48C96,21.49 74.51,0 48,0C21.49,0 0,21.49 0,48C0,74.51 21.49,96 48,96ZM58.3,9.41C55.4,8.61 50.4,7.91 47.3,8.01C44.1,8.01 39.7,8.61 37.5,9.31C35.3,10.01 31.9,11.41 30,12.41C28.1,13.41 24.8,15.61 22.7,17.31C20.6,19.01 17.3,22.71 15.4,25.41C13.5,28.21 11.1,33.21 10,36.71C8.9,40.11 8,45.01 8,47.61C8,50.31 8.8,55.31 9.9,58.91C11,62.51 13.7,67.91 15.8,70.91C18,73.91 22.1,78.11 25.1,80.21C28.1,82.21 33.3,84.81 36.8,85.91C40.2,87.01 45.3,87.91 48,87.91C50.8,87.91 55.4,87.21 58.3,86.41C61.1,85.61 66.4,83.01 69.9,80.71C73.9,78.11 77.8,74.31 80.2,70.91C82.3,67.91 85,62.51 86.1,58.91C87.2,55.31 88,50.41 88,47.91C88,45.41 87.2,40.51 86.1,36.91C85,33.31 82.3,27.91 80.2,24.91C77.8,21.51 73.9,17.71 69.9,15.11C66.4,12.81 61.1,10.21 58.3,9.41ZM27.5,21.41C29.7,19.71 33.3,17.51 35.5,16.61C37.7,15.71 40.4,14.81 41.5,14.51C42.6,14.21 46.4,14.21 50,14.51C54.3,14.81 58.5,15.91 62.5,17.81C66.2,19.61 70.1,22.51 72.8,25.51C75.2,28.21 78,32.31 79,34.61C80.5,37.91 81,41.11 81,47.91C81,55.51 80.6,57.71 78.5,61.91C77.1,64.71 74.3,68.71 72.3,71.01C70.2,73.21 65.8,76.41 62.5,78.01C57.3,80.61 55.4,80.91 48,80.91C40.6,80.91 38.7,80.61 33.5,78.01C30.2,76.41 25.8,73.21 23.8,71.01C21.7,68.71 18.8,64.51 17.4,61.71C15,56.81 14.8,55.61 15.1,46.31C15.5,36.31 15.6,36.01 19.5,30.41C21.7,27.21 25.3,23.21 27.5,21.41ZM60.8,28.51C58.4,26.91 54.4,25.31 51.9,25.01C49.4,24.61 45.4,24.71 42.9,25.11C40.5,25.61 37.4,26.61 36,27.51C34,28.81 33.1,28.91 31.5,27.91C30.4,27.21 28.9,26.91 28.3,27.31C27.5,27.71 27,30.11 27,33.91L27,39.91C34.8,39.91 37.7,39.71 38.5,39.41C39.3,39.11 40,38.21 40,37.41C40,36.61 39.3,35.71 38.5,35.41C37.7,35.11 37,34.41 37,33.91C37,33.41 38.8,32.21 41,31.41C43.2,30.61 46.7,29.91 48.8,29.91C51.1,29.91 54.1,30.91 57,32.71C60,34.51 62.3,37.01 63.7,39.91C65,42.41 66,45.91 66,47.71C66,49.41 65.4,52.41 64.7,54.21C63.9,55.91 61.7,58.91 59.7,60.71C57.6,62.41 54.3,64.41 52.3,65.01C49.3,65.91 47.4,65.91 43.5,64.81C40.8,64.01 37.1,62.11 35.4,60.41C33.3,58.41 31.7,55.41 30.6,51.71C29.3,47.11 28.6,45.91 27,45.91C25.2,45.91 25,46.51 25.3,51.11C25.5,54.71 26.5,57.71 28.2,60.41C29.7,62.61 32.6,65.61 34.7,67.21C36.9,68.71 40.6,70.31 43.5,70.71C46.3,71.11 50.5,71.11 53,70.71C55.5,70.21 59.2,68.71 61.3,67.41C63.3,66.01 66.2,63.01 67.8,60.71C70.2,57.01 70.5,55.61 70.5,48.01C70.5,40.31 70.2,39.01 67.8,35.41C66.4,33.21 63.2,30.11 60.8,28.51ZM49.5,37.21C49.2,35.91 48.6,34.91 48.2,34.91C47.7,34.91 47,35.21 46.5,35.61C46,35.91 45.7,40.01 45.8,44.61L46,52.91C53,52.91 55.7,52.71 56.5,52.41C57.3,52.11 58,51.01 58,49.91C58,48.31 57.3,47.91 54.3,47.71C50.6,47.41 50.5,47.31 50.2,43.41C50.1,41.21 49.7,38.41 49.5,37.21Z" />
</svg>
<span>Nesting History</span>
</button>
<button class="navButton" id="userSettingsBtn">
<a href="https://github.com/TimChinye/NestYourCSS/"></a>
<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M47.3,8.1C51.5,8 56.3,8.7 60.3,10C63.7,11.2 68.7,13.7 71.5,15.8C74.2,17.8 78.1,21.8 80.2,24.5C82.3,27.3 84.9,32.4 86,36C87.1,39.6 88,45.1 88,48.3C88,51.4 87.1,56.8 86,60.3C84.8,63.7 82.2,68.8 80.2,71.5C78.1,74.3 74.2,78.2 71.5,80.2C68.7,82.3 63.8,84.9 60.5,86C57,87.2 51.9,88 48.3,88C44.7,88 39.3,87.1 35.8,86C32.3,84.8 27.3,82.3 24.5,80.2C21.8,78.2 17.9,74.3 15.8,71.5C13.7,68.7 11.1,63.6 10,60C8.9,56.4 8,50.9 8,47.8C8,44.6 8.9,39.2 10,35.8C11.2,32.3 13.8,27.3 15.8,24.5C17.9,21.8 21.8,17.8 24.5,15.8C27.3,13.7 32,11.1 35,10.1C38.2,9 43.4,8.1 47.3,8.1ZM29.1,20C25.3,22.4 22.4,25.3 19.8,29.5C17.7,32.8 15.5,37.8 14.9,40.5C14.2,43.3 14,48 14.2,51C14.5,54 15.7,58.6 16.9,61.3C18,63.9 21.1,68.3 23.8,71.1C26.4,73.9 31,77.4 34,78.8C38.6,81.1 40.8,81.5 48,81.5C55.2,81.5 57.4,81.1 62,78.8C65,77.4 69.6,73.9 72.3,71.1C74.9,68.3 78,63.9 79.2,61.2C81,57.5 81.5,54.7 81.5,48C81.5,41.3 81,38.5 79.2,34.7C78,32.1 74.9,27.7 72.3,24.9C69.6,22.1 65.1,18.7 62,17.2C58,15.3 54.5,14.5 49.5,14.3C45.7,14.1 40.7,14.6 38.5,15.3C36.3,16 32,18.1 29.1,20ZM48.4,25.2C53.4,25.5 53.5,25.5 54,29.3C54.3,31.3 55.2,33.4 56,33.9C57,34.5 58.6,34.4 60.8,33.4C62.5,32.6 64.5,32.2 65,32.5C65.6,32.8 66.9,34.9 70.1,41.5L67.1,44.5C65.4,46.1 64,47.8 64,48.3C64,48.7 65.5,50.3 67.3,51.9C70.3,54.6 70.4,55.1 69.3,57.7C68.6,59.2 67.1,61.3 66,62.3C64.3,63.8 63.5,63.8 60.5,62.8C58.167,61.933 56.667,61.833 56,62.5C55.4,63 54.6,65.1 54.2,67C53.4,70.5 53.4,70.5 48,70.5C42.6,70.5 42.6,70.5 41.8,67C41.4,65.1 40.6,63 40,62.5C39.333,61.833 37.833,61.933 35.5,62.8C32.7,63.8 31.7,63.8 30.3,62.8C29.4,62.1 28.1,59.9 27.3,58C25.9,54.6 25.9,54.4 28.9,51.8C30.6,50.2 32,48.5 32,48C32,47.5 30.6,45.8 25.8,41.5L27.9,37.3C29.1,34.9 30.5,32.8 31,32.5C31.6,32.2 33.6,32.7 35.5,33.5C38.6,34.8 39.2,34.8 40.5,33.5C41.3,32.7 41.9,30.7 41.8,29.2C41.7,27.6 42.1,26 42.5,25.6C43,25.2 45.7,25 48.4,25.2ZM40,48C40,49.9 40.9,51.9 42.5,53.5C44.1,55.1 46.1,56 48,56C50,56 52,55.1 53.5,53.5C55.1,52 56,49.8 56,48C56,46.1 55.1,44.1 53.5,42.5C51.9,40.9 49.9,40 48,40C46,40 44,40.9 42.5,42.5C41.1,43.9 40.1,46.1 40,48Z" />
<path d="M48,96C74.51,96 96,74.51 96,48C96,21.49 74.51,0 48,0C21.49,0 0,21.49 0,48C0,74.51 21.49,96 48,96ZM60.3,9.909C56.3,8.609 51.5,7.909 47.3,8.009C43.4,8.009 38.2,8.909 35,10.009C32,11.009 27.3,13.609 24.5,15.709C21.8,17.709 17.9,21.709 15.8,24.409C13.8,27.209 11.2,32.209 10,35.709C8.9,39.109 8,44.509 8,47.709C8,50.809 8.9,56.309 10,59.909C11.1,63.509 13.7,68.609 15.8,71.409C17.9,74.209 21.8,78.109 24.5,80.109C27.3,82.209 32.3,84.709 35.8,85.909C39.3,87.009 44.7,87.909 48.3,87.909C51.9,87.909 57,87.109 60.5,85.909C63.8,84.809 68.7,82.209 71.5,80.109C74.2,78.109 78.1,74.209 80.2,71.409C82.2,68.709 84.8,63.609 86,60.209C87.1,56.709 88,51.309 88,48.209C88,45.009 87.1,39.509 86,35.909C84.9,32.309 82.3,27.209 80.2,24.409C78.1,21.709 74.2,17.709 71.5,15.709C68.7,13.609 63.7,11.109 60.3,9.909ZM19.8,29.409C22.4,25.209 25.3,22.309 29.1,19.909C32,18.009 36.3,15.909 38.5,15.209C40.7,14.509 45.7,14.009 49.5,14.209C54.5,14.409 58,15.209 62,17.109C65.1,18.609 69.6,22.009 72.3,24.809C74.9,27.609 78,32.009 79.2,34.609C81,38.409 81.5,41.209 81.5,47.909C81.5,54.609 81,57.409 79.2,61.109C78,63.809 74.9,68.209 72.3,71.009C69.6,73.809 65,77.309 62,78.709C57.4,81.009 55.2,81.409 48,81.409C40.8,81.409 38.6,81.009 34,78.709C31,77.309 26.4,73.809 23.8,71.009C21.1,68.209 18,63.809 16.9,61.209C15.7,58.509 14.5,53.909 14.2,50.909C14,47.909 14.2,43.209 14.9,40.409C15.5,37.709 17.7,32.709 19.8,29.409ZM48.424,25.111L48.4,25.109C45.7,24.909 43,25.109 42.5,25.509C42.1,25.909 41.7,27.509 41.8,29.109C41.9,30.609 41.3,32.609 40.5,33.409C39.2,34.709 38.6,34.709 35.5,33.409C33.6,32.609 31.6,32.109 31,32.409C30.5,32.709 29.1,34.809 27.9,37.209L25.8,41.409C30.6,45.709 32,47.409 32,47.909C32,48.409 30.6,50.109 28.9,51.709C25.9,54.309 25.9,54.509 27.3,57.909C28.1,59.809 29.4,62.009 30.3,62.709C31.7,63.709 32.7,63.709 35.5,62.709C37.833,61.843 39.333,61.743 40,62.409C40.6,62.909 41.4,65.009 41.8,66.909C42.142,68.404 42.337,69.26 42.87,69.751C43.585,70.409 44.906,70.409 48,70.409C51.094,70.409 52.415,70.409 53.13,69.751C53.663,69.26 53.858,68.404 54.2,66.909C54.6,65.009 55.4,62.909 56,62.409C56.667,61.743 58.167,61.843 60.5,62.709C63.5,63.709 64.3,63.709 66,62.209C67.1,61.209 68.6,59.109 69.3,57.609C70.4,55.009 70.3,54.509 67.3,51.809C65.5,50.209 64,48.609 64,48.209C64,47.709 65.4,46.009 67.1,44.409L70.1,41.409C66.9,34.809 65.6,32.709 65,32.409C64.5,32.109 62.5,32.509 60.8,33.309C58.6,34.309 57,34.409 56,33.809C55.2,33.309 54.3,31.209 54,29.209C53.501,25.416 53.4,25.409 48.424,25.111ZM42.5,53.409C40.9,51.809 40,49.809 40,47.909C40.1,46.009 41.1,43.809 42.5,42.409C44,40.809 46,39.909 48,39.909C49.9,39.909 51.9,40.809 53.5,42.409C55.1,44.009 56,46.009 56,47.909C56,49.709 55.1,51.909 53.5,53.409C52,55.009 50,55.909 48,55.909C46.1,55.909 44.1,55.009 42.5,53.409Z" />
</svg>
<span>User Settings</span>
</button>
<button class="navButton" id="reportBugBtn">
<a href="https://github.com/TimChinye/NestYourCSS/"></a>
<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M47.3,8.1C51.5,8 56.3,8.7 60.3,10C63.7,11.2 68.7,13.7 71.5,15.8C74.2,17.8 78.1,21.8 80.2,24.5C82.3,27.3 84.9,32.4 86,36C87.1,39.6 88,45.1 88,48.3C88,51.4 87.1,56.8 86,60.3C84.8,63.7 82.2,68.8 80.2,71.5C78.1,74.3 74.2,78.2 71.5,80.2C68.7,82.3 63.8,84.9 60.5,86C57,87.2 51.9,88 48.3,88C44.7,88 39.3,87.1 35.8,86C32.3,84.8 27.3,82.3 24.5,80.2C21.8,78.2 17.9,74.3 15.8,71.5C13.7,68.7 11.1,63.6 10,60C8.9,56.4 8,50.9 8,47.8C8,44.6 8.9,39.2 10,35.8C11.2,32.3 13.8,27.3 15.8,24.5C17.9,21.8 21.8,17.8 24.5,15.8C27.3,13.7 32,11.1 35,10.1C38.2,9 43.4,8.1 47.3,8.1ZM31,18.7C29.1,19.9 25.5,23 23.1,25.7C20.6,28.3 17.7,32.5 16.6,35C15,38.4 14.5,41.6 14.5,48C14.5,54.7 15,57.5 16.8,61.3C18,63.9 21.1,68.3 23.8,71.1C26.4,73.9 31,77.4 34,78.8C38.6,81.1 40.8,81.5 48,81.5C55.2,81.5 57.4,81.1 62,78.8C65,77.4 69.4,74.2 71.8,71.8C74.1,69.4 77.3,65 78.8,62C81.1,57.3 81.5,55.2 81.5,48C81.5,41.3 81,38.5 79.2,34.7C78,32.1 74.9,27.7 72.3,24.9C69.6,22.1 65.1,18.7 62,17.2C58,15.3 54.5,14.5 49.5,14.3C45.7,14.1 40.7,14.6 38.5,15.3C36.3,16 32.9,17.5 31,18.7ZM42.3,26C43.4,26 44.3,27.2 44.8,29C45.2,30.7 46.1,32.2 46.8,32.5C47.4,32.8 48.6,32.8 49.3,32.5C49.9,32.2 50.8,30.7 51.3,29C51.7,27.1 52.6,26 53.8,26C55.2,26 55.4,26.6 54.8,29.7C54.3,32.8 54.6,33.7 56.1,34.8C57.1,35.4 58.5,37.1 59,38.5C59.6,39.9 60.3,41 60.8,41C61.2,41 62.3,40.5 63.3,39.8C64.4,39 65.3,37 65.4,35C65.7,32.5 66.3,31.4 67.6,31.1C69.3,30.8 69.4,31.2 68.8,35.6C68.4,39 67.5,41 65.8,42.3C64.5,43.3 62.7,44.1 61.8,44C60.5,44 60,44.8 60,46.5C60,48.9 60.3,49 65.5,49C69.7,49 71,49.3 71,50.5C71,51.7 69.7,52 65.5,52C60.7,52 60,52.2 60,54C60,55.1 60.7,56 61.5,56C62.3,56 64.3,57.4 66,59C68.3,61.3 69,62.9 69,66C69,68.9 68.6,70 67.5,70C66.7,70 65.8,69.3 65.5,68.5C65.2,67.7 65,66 65,64.8C65,63.5 64.5,61.9 63.8,61.2C63.1,60.5 61.9,60 61.3,60C60.6,60 58.5,61.5 56.8,63.4C55,65.3 52.2,67.1 50.5,67.5C48.9,67.9 46.4,67.9 45,67.5C43.6,67.1 41,65.3 39.3,63.4C37.5,61.5 35.4,60 34.7,60C34,60 32.9,60.6 32.2,61.3C31.5,61.9 31,63.5 31,64.8C31,66 30.8,67.7 30.5,68.5C30.2,69.3 29.3,70 28.5,70C27.4,70 27,68.9 27,66C27,62.9 27.7,61.3 29.9,59C31.5,57.4 33.6,56 34.4,56C35.3,56 36,55.2 36,54C36,52.2 35.3,52 30.5,52C26.3,52 25,51.7 25,50.5C25,49.3 26.3,49 30.5,49C35.7,49 36,48.9 36,46.5C36,44.8 35.5,44 34.3,44C33.3,44.1 31.5,43.3 30.2,42.3C28.5,41 27.6,39 27.2,35.6C26.6,31.2 26.7,30.8 28.4,31.1C29.7,31.4 30.3,32.5 30.6,35C30.7,37 31.6,39 32.7,39.8C33.7,40.5 34.8,41 35.3,41C35.7,41 36.5,39.9 37,38.5C37.6,37.1 38.9,35.4 39.9,34.8C41.4,33.8 41.7,32.7 41.3,29.8C40.8,26.7 41,26 42.3,26Z" />
<path d="M48,96C74.51,96 96,74.51 96,48C96,21.49 74.51,0 48,0C21.49,0 0,21.49 0,48C0,74.51 21.49,96 48,96ZM60.3,9.909C56.3,8.609 51.5,7.909 47.3,8.009C43.4,8.009 38.2,8.909 35,10.009C32,11.009 27.3,13.609 24.5,15.709C21.8,17.709 17.9,21.709 15.8,24.409C13.8,27.209 11.2,32.209 10,35.709C8.9,39.109 8,44.509 8,47.709C8,50.809 8.9,56.309 10,59.909C11.1,63.509 13.7,68.609 15.8,71.409C17.9,74.209 21.8,78.109 24.5,80.109C27.3,82.209 32.3,84.709 35.8,85.909C39.3,87.009 44.7,87.909 48.3,87.909C51.9,87.909 57,87.109 60.5,85.909C63.8,84.809 68.7,82.209 71.5,80.109C74.2,78.109 78.1,74.209 80.2,71.409C82.2,68.709 84.8,63.609 86,60.209C87.1,56.709 88,51.309 88,48.209C88,45.009 87.1,39.509 86,35.909C84.9,32.309 82.3,27.209 80.2,24.409C78.1,21.709 74.2,17.709 71.5,15.709C68.7,13.609 63.7,11.109 60.3,9.909ZM23.1,25.609C25.5,22.909 29.1,19.809 31,18.609C32.9,17.409 36.3,15.909 38.5,15.209C40.7,14.509 45.7,14.009 49.5,14.209C54.5,14.409 58,15.209 62,17.109C65.1,18.609 69.6,22.009 72.3,24.809C74.9,27.609 78,32.009 79.2,34.609C81,38.409 81.5,41.209 81.5,47.909C81.5,55.109 81.1,57.209 78.8,61.909C77.3,64.909 74.1,69.309 71.8,71.709C69.4,74.109 65,77.309 62,78.709C57.4,81.009 55.2,81.409 48,81.409C40.8,81.409 38.6,81.009 34,78.709C31,77.309 26.4,73.809 23.8,71.009C21.1,68.209 18,63.809 16.8,61.209C15,57.409 14.5,54.609 14.5,47.909C14.5,41.509 15,38.309 16.6,34.909C17.7,32.409 20.6,28.209 23.1,25.609ZM44.8,28.909C44.3,27.109 43.4,25.909 42.3,25.909C41,25.909 40.8,26.609 41.3,29.709C41.7,32.609 41.4,33.709 39.9,34.709C38.9,35.309 37.6,37.009 37,38.409C36.5,39.809 35.7,40.909 35.3,40.909C34.8,40.909 33.7,40.409 32.7,39.709C31.6,38.909 30.7,36.909 30.6,34.909C30.3,32.409 29.7,31.309 28.4,31.009C26.7,30.709 26.6,31.109 27.2,35.509C27.6,38.909 28.5,40.909 30.2,42.209C31.5,43.209 33.3,44.009 34.3,43.909C35.5,43.909 36,44.709 36,46.409C36,48.809 35.7,48.909 30.5,48.909C26.3,48.909 25,49.209 25,50.409C25,51.609 26.3,51.909 30.5,51.909C35.3,51.909 36,52.109 36,53.909C36,55.109 35.3,55.909 34.4,55.909C33.6,55.909 31.5,57.309 29.9,58.909C27.7,61.209 27,62.809 27,65.909C27,68.809 27.4,69.909 28.5,69.909C29.3,69.909 30.2,69.209 30.5,68.409C30.8,67.609 31,65.909 31,64.709C31,63.409 31.5,61.809 32.2,61.209C32.9,60.509 34,59.909 34.7,59.909C35.4,59.909 37.5,61.409 39.3,63.309C41,65.209 43.6,67.009 45,67.409C46.4,67.809 48.9,67.809 50.5,67.409C52.2,67.009 55,65.209 56.8,63.309C58.5,61.409 60.6,59.909 61.3,59.909C61.9,59.909 63.1,60.409 63.8,61.109C64.5,61.809 65,63.409 65,64.709C65,65.909 65.2,67.609 65.5,68.409C65.8,69.209 66.7,69.909 67.5,69.909C68.6,69.909 69,68.809 69,65.909C69,62.809 68.3,61.209 66,58.909C64.3,57.309 62.3,55.909 61.5,55.909C60.7,55.909 60,55.009 60,53.909C60,52.109 60.7,51.909 65.5,51.909C69.7,51.909 71,51.609 71,50.409C71,49.209 69.7,48.909 65.5,48.909C60.3,48.909 60,48.809 60,46.409C60,44.709 60.5,43.909 61.8,43.909C62.7,44.009 64.5,43.209 65.8,42.209C67.5,40.909 68.4,38.909 68.8,35.509C69.4,31.109 69.3,30.709 67.6,31.009C66.3,31.309 65.7,32.409 65.4,34.909C65.3,36.909 64.4,38.909 63.3,39.709C62.3,40.409 61.2,40.909 60.8,40.909C60.3,40.909 59.6,39.809 59,38.409C58.5,37.009 57.1,35.309 56.1,34.709C54.6,33.609 54.3,32.709 54.8,29.609C55.4,26.509 55.2,25.909 53.8,25.909C52.6,25.909 51.7,27.009 51.3,28.909C50.8,30.609 49.9,32.109 49.3,32.409C48.6,32.709 47.4,32.709 46.8,32.409C46.1,32.109 45.2,30.609 44.8,28.909Z" />
</svg>
<span>Report a Bug</span>
</button>
<button class="navButton" id="feedbackBtn">
<a href="https://github.com/TimChinye/NestYourCSS/"></a>
<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M47.3,8.1C51.5,8 56.3,8.7 60.3,10C63.7,11.2 68.7,13.7 71.5,15.8C74.2,17.8 78.1,21.8 80.2,24.5C82.3,27.3 84.9,32.4 86,36C87.1,39.6 88,45.1 88,48.3C88,51.4 87.1,56.8 86,60.3C84.8,63.7 82.2,68.8 80.2,71.5C78.1,74.3 74.2,78.2 71.5,80.2C68.7,82.3 63.8,84.9 60.5,86C57,87.2 51.9,88 48.3,88C44.7,88 39.3,87.1 35.8,86C32.3,84.8 27.3,82.3 24.5,80.2C21.8,78.2 17.9,74.3 15.8,71.5C13.7,68.7 11.1,63.6 10,60C8.9,56.4 8,50.9 8,47.8C8,44.6 8.9,39.2 10,35.8C11.2,32.3 13.8,27.3 15.8,24.5C17.9,21.8 21.8,17.8 24.5,15.8C27.3,13.7 32,11.1 35,10.1C38.2,9 43.4,8.1 47.3,8.1ZM29.1,20C25.8,22.2 22.3,25.6 20.1,29C18,32 15.8,37 15.1,40C14.3,43 13.9,48 14.2,51C14.5,54 15.9,59.1 17.4,62.3C18.8,65.4 20.3,68 20.8,68C21.2,68 22.6,66.4 24,64.5C25.4,62.7 27.6,60.6 29,60C30.7,59.2 34.4,59.1 41.2,59.7C48.5,60.3 51.1,60.9 51.5,62C51.8,62.8 51.4,64.1 50.8,64.8C50.1,65.5 47.3,66.1 44.6,66.3C41.7,66.4 39.5,67 39.3,67.7C39.1,68.6 40.7,69 45,69C49.7,69 51.4,68.6 53,67C54.1,65.9 55,64.1 55,63C55,61.667 56.333,60.333 59,59C61.2,57.9 64,57.1 65.2,57.2C66.4,57.4 67.5,58.1 67.7,58.8C67.9,59.4 64.7,63.4 60.8,67.6C56.8,71.8 52.4,75.8 51,76.5C49.3,77.4 46.1,77.6 40.7,77.1C34.9,76.7 33,76.8 33,77.7C33,78.4 35.6,79.7 38.8,80.6C42.8,81.8 46.5,82.1 51,81.7C54.9,81.3 59.5,80.1 62.5,78.6C65.3,77.3 69.6,73.9 72.3,71.1C74.9,68.3 78,63.9 79.2,61.2C81,57.5 81.5,54.7 81.5,48C81.5,40.8 81.1,38.7 78.8,34C77.3,31 74.1,26.6 71.8,24.2C69.4,21.8 65,18.7 62,17.2C58.1,15.3 54.5,14.5 49.5,14.3C45.7,14.1 40.7,14.6 38.5,15.3C36.3,16 32.1,18.1 29.1,20ZM51.5,26C53.1,26 55,27.2 56.7,29.2C58.1,31 60.3,33 61.4,33.5C62.7,34.2 63.5,35.5 63.5,39.5L47.8,39.7C32.6,40 32,39.9 32,38C32,36.9 34,34 36.5,31.5C38.9,29 41.7,27 42.7,27C43.7,26.9 45.3,27.7 46.3,28.7C47.6,30 48,31.3 47.6,33.2C47.3,34.8 47.4,36 48,36C48.6,36 49.1,35.2 49.3,34.2C49.5,33.3 49.3,31.5 48.8,30.2C48.4,29 48.2,27.6 48.5,27C48.9,26.4 50.2,26 51.5,26ZM39.3,36C38,36 37.8,36.3 38.5,37.1C39.1,37.7 40.5,37.9 41.8,37.6C43.1,37.2 44,36.2 44,35C44,33.9 43.6,33 43.1,33C42.6,33 41.9,33.7 41.6,34.5C41.3,35.3 40.2,36 39.3,36ZM54.8,37.7C56,37.9 57,37.5 57,37C57,36.5 56.3,36 55.5,36C54.7,36 54,35.3 54,34.5C54,33.7 53.5,33 52.9,33C52.3,33 52,34 52.2,35.2C52.4,36.7 53.3,37.6 54.8,37.7ZM63.5,42.5L63.5,45C63.5,46.5 62.7,47.8 61.4,48.5C60.3,49 58.1,51 56.7,52.7C54.9,54.8 53.1,56 51.5,56C50.1,56 48.8,55.5 48.5,55C48.2,54.5 48.4,53 48.9,51.7C49.6,50.1 49.5,48.9 48.4,47.5C47.1,45.6 47,45.7 47.6,48.5C48,50.7 47.7,52 46.3,53.3C45.3,54.3 43.7,55.1 42.8,55C41.8,55 39,53 36.5,50.5C34,48 32,45.1 32,44C32.1,42 32.6,42 63.5,42.5ZM39.5,46C40.3,46 41.4,46.8 41.9,47.7C42.4,48.7 43.2,49.1 43.7,48.7C44.1,48.3 44,47.1 43.4,46.2C42.8,45.3 41.6,44.4 40.8,44.2C39.9,44 39,44.4 38.6,44.9C38.3,45.5 38.7,46 39.5,46ZM51.8,47.2C51.9,48.2 52.5,49 53,49C53.6,49 54,48.3 54,47.5C54,46.7 54.7,46 55.5,46C56.3,46 57,45.5 57,45C57,44.5 56.2,44 55.2,44C54.2,44 53,44.3 52.5,44.7C52,45 51.7,46.2 51.8,47.2Z" />
<path d="M48,96C74.51,96 96,74.51 96,48C96,21.49 74.51,0 48,0C21.49,0 0,21.49 0,48C0,74.51 21.49,96 48,96ZM60.3,9.909C56.3,8.609 51.5,7.909 47.3,8.009C43.4,8.009 38.2,8.909 35,10.009C32,11.009 27.3,13.609 24.5,15.709C21.8,17.709 17.9,21.709 15.8,24.409C13.8,27.209 11.2,32.209 10,35.709C8.9,39.109 8,44.509 8,47.709C8,50.809 8.9,56.309 10,59.909C11.1,63.509 13.7,68.609 15.8,71.409C17.9,74.209 21.8,78.109 24.5,80.109C27.3,82.209 32.3,84.709 35.8,85.909C39.3,87.009 44.7,87.909 48.3,87.909C51.9,87.909 57,87.109 60.5,85.909C63.8,84.809 68.7,82.209 71.5,80.109C74.2,78.109 78.1,74.209 80.2,71.409C82.2,68.709 84.8,63.609 86,60.209C87.1,56.709 88,51.309 88,48.209C88,45.009 87.1,39.509 86,35.909C84.9,32.309 82.3,27.209 80.2,24.409C78.1,21.709 74.2,17.709 71.5,15.709C68.7,13.609 63.7,11.109 60.3,9.909ZM20.1,28.909C22.3,25.509 25.8,22.109 29.1,19.909C32.1,18.009 36.3,15.909 38.5,15.209C40.7,14.509 45.7,14.009 49.5,14.209C54.5,14.409 58.1,15.209 62,17.109C65,18.609 69.4,21.709 71.8,24.109C74.1,26.509 77.3,30.909 78.8,33.909C81.1,38.609 81.5,40.709 81.5,47.909C81.5,54.609 81,57.409 79.2,61.109C78,63.809 74.9,68.209 72.3,71.009C69.6,73.809 65.3,77.209 62.5,78.509C59.5,80.009 54.9,81.209 51,81.609C46.5,82.009 42.8,81.709 38.8,80.509C35.6,79.609 33,78.309 33,77.609C33,76.709 34.9,76.609 40.7,77.009C46.1,77.509 49.3,77.309 51,76.409C52.4,75.709 56.8,71.709 60.8,67.509C64.7,63.309 67.9,59.309 67.7,58.709C67.5,58.009 66.4,57.309 65.2,57.109C64,57.009 61.2,57.809 59,58.909C56.333,60.243 55,61.576 55,62.909C55,64.009 54.1,65.809 53,66.909C51.4,68.509 49.7,68.909 45,68.909C40.7,68.909 39.1,68.509 39.3,67.609C39.5,66.909 41.7,66.309 44.6,66.209C47.3,66.009 50.1,65.409 50.8,64.709C51.4,64.009 51.8,62.709 51.5,61.909C51.1,60.809 48.5,60.209 41.2,59.609C34.4,59.009 30.7,59.109 29,59.909C27.6,60.509 25.4,62.609 24,64.409C22.6,66.309 21.2,67.909 20.8,67.909C20.3,67.909 18.8,65.309 17.4,62.209C15.9,59.009 14.5,53.909 14.2,50.909C13.9,47.909 14.3,42.909 15.1,39.909C15.8,36.909 18,31.909 20.1,28.909ZM56.7,29.109C55,27.109 53.1,25.909 51.5,25.909C50.2,25.909 48.9,26.309 48.5,26.909C48.2,27.509 48.4,28.909 48.8,30.109C49.3,31.409 49.5,33.209 49.3,34.109C49.1,35.109 48.6,35.909 48,35.909C47.4,35.909 47.3,34.709 47.6,33.109C48,31.209 47.6,29.909 46.3,28.609C45.3,27.609 43.7,26.809 42.7,26.909C41.7,26.909 38.9,28.909 36.5,31.409C34,33.909 32,36.809 32,37.909C32,39.809 32.6,39.909 47.8,39.609L63.5,39.409C63.5,35.409 62.7,34.109 61.4,33.409C60.3,32.909 58.1,30.909 56.7,29.109ZM38.5,37.009C37.8,36.209 38,35.909 39.3,35.909C40.2,35.909 41.3,35.209 41.6,34.409C41.9,33.609 42.6,32.909 43.1,32.909C43.6,32.909 44,33.809 44,34.909C44,36.109 43.1,37.109 41.8,37.509C40.5,37.809 39.1,37.609 38.5,37.009ZM57,36.909C57,37.409 56,37.809 54.8,37.609C53.3,37.509 52.4,36.609 52.2,35.109C52,33.909 52.3,32.909 52.9,32.909C53.5,32.909 54,33.609 54,34.409C54,35.209 54.7,35.909 55.5,35.909C56.3,35.909 57,36.409 57,36.909ZM63.5,44.909L63.5,42.409C32.6,41.909 32.1,41.909 32,43.909C32,45.009 34,47.909 36.5,50.409C39,52.909 41.8,54.909 42.8,54.909C43.7,55.009 45.3,54.209 46.3,53.209C47.7,51.909 48,50.609 47.6,48.409C47,45.609 47.1,45.509 48.4,47.409C49.5,48.809 49.6,50.009 48.9,51.609C48.4,52.909 48.2,54.409 48.5,54.909C48.8,55.409 50.1,55.909 51.5,55.909C53.1,55.909 54.9,54.709 56.7,52.609C58.1,50.909 60.3,48.909 61.4,48.409C62.7,47.709 63.5,46.409 63.5,44.909ZM41.9,47.609C41.4,46.709 40.3,45.909 39.5,45.909C38.7,45.909 38.3,45.409 38.6,44.809C39,44.309 39.9,43.909 40.8,44.109C41.6,44.309 42.8,45.209 43.4,46.109C44,47.009 44.1,48.209 43.7,48.609C43.2,49.009 42.4,48.609 41.9,47.609ZM53,48.909C52.5,48.909 51.9,48.109 51.8,47.109C51.7,46.109 52,44.909 52.5,44.609C53,44.209 54.2,43.909 55.2,43.909C56.2,43.909 57,44.409 57,44.909C57,45.409 56.3,45.909 55.5,45.909C54.7,45.909 54,46.609 54,47.409C54,48.209 53.6,48.909 53,48.909Z" />
</svg>
<span>Share Your Mind</span>
</button>
<script>
function repositionButtonBG(btn) {
let { top: topPos, left: leftPos } = btn.lastElementChild.getBoundingClientRect();
btn.lastElementChild.style.backgroundPosition = `top -${topPos}px left -${leftPos}px`;
}
</script>
</menu>
</header>
<figure>
<figcaption>Sorry about the ads...</figcaption>
<div>
<picture><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9088468190661086" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-9088468190661086" data-ad-slot="2515261006"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></picture>
<picture><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9088468190661086" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-9088468190661086" data-ad-slot="2515261006"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></picture>
<picture><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9088468190661086" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-9088468190661086" data-ad-slot="2515261006"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></picture>
</div>
</figure>
</article>
<article id="editorSide">
<button id="nestBtn" onclick="nestCode();">Nest!</button>
<div id="code-editor">
<div class="editor" id="inputEditor"></div>
<div id="editorGap"></div>
<div class="editor" id="outputEditor"></div>
</div>
<script>
function setupEditors(inputEditor) {
let outputEditor = inputEditor.parentElement.lastElementChild;
const shadowCount = 3;
function createButton(idSuffix, className, isShadowEditor) {
const button = document.createElement("button");
button.id = idSuffix;
button.classList.add(className);
if (!isShadowEditor) button.addEventListener("click", tabButtonHandler);
return button;
}
function createEditorTab(editor, isInputEditor, isShadowEditor) {
const editorName = editor.id.slice(0, -"Editor".length);
const editorTab = document.createElement("div");
editorTab.classList.add('editorTab');
const fileName = document.createElement("div");
fileName.classList.add('fileName');
fileName.textContent = `${editorName}.css`;
const tabButtons = document.createElement("div");
tabButtons.classList.add('tabButtons');
// Add buttons to the tab
tabButtons.appendChild(createButton(`${editorName}TabCopyAll`, 'tabCopyAll', isShadowEditor));
if (isInputEditor) {
if (!isShadowEditor) {
let fileReader = new FileReader();
let fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = ".css";
// Set up an event listener for file selection
fileInput.addEventListener("change", (event) => {
if (file = event.target.files[0]) {
fileReader.onload = (e) => window.inputEditor.setValue(e.target.result);
fileReader.readAsText(file);
};
});
// Add event listeners for drag-and-drop functionality
setupDragAndDrop(editor);
window.insertCSSFileInput = fileInput;
}
tabButtons.appendChild(createButton(`${editorName}TabInsertCSS`, 'tabInsertCSS', isShadowEditor));
} else {
tabButtons.appendChild(createButton(`${editorName}TabOpenRaw`, 'tabOpenRaw', isShadowEditor));
}
tabButtons.appendChild(createButton(`${editorName}TabDeleteAll`, 'tabDeleteAll', isShadowEditor));
// Add file name and buttons to the tab
editorTab.appendChild(fileName);
editorTab.appendChild(tabButtons);
return editorTab;
}
function wrapEditorWithGroup(editor, editorTab) {
const wrapperElement = document.createElement("div");
wrapperElement.id = `${editor.id}Wrapper`;
wrapperElement.classList.add('editorWrapper');
const editorGroup = document.createElement("div");
editorGroup.classList.add('editorGroup');
// Replace the editor with its wrapper
editor.replaceWith(wrapperElement);
editor.classList.add('editor');
// Append tab and editor to the group, then to the wrapper
editorGroup.appendChild(editorTab);
editorGroup.appendChild(editor);
wrapperElement.appendChild(editorGroup);
}
// Wrap both input and output editors
[inputEditor, outputEditor].forEach((editor) => {
const editorTab = createEditorTab(editor, editor === inputEditor, false);
wrapEditorWithGroup(editor, editorTab);
});
// Shadow editor creation
const shadowWrapperElement = document.createElement("div");
shadowWrapperElement.id = "shadowEditorsWrapper";
inputEditor.parentElement.after(shadowWrapperElement);
const shadowEditors = Array.from({ length: shadowCount }, (_, i) => {
const shadowEditorGroup = document.createElement("div");
shadowEditorGroup.classList.add('editorGroup');
const shadowEditorTab = createEditorTab(inputEditor, true, true);
shadowEditorGroup.appendChild(shadowEditorTab);
const shadowEditor = document.createElement("div");
shadowEditor.className = `${inputEditor.className} shadowEditor`;
shadowEditor.innerHTML = inputEditor.innerHTML;
shadowEditorGroup.appendChild(shadowEditor);
shadowWrapperElement.appendChild(shadowEditorGroup);
return shadowEditor;
});
// Resize and reposition shadow editors
function styleShadowEditors() {
let baseShadowOpacity = 0.5;
let baseShadowBlur = 2;
let shadowHeightDiff = inputEditor.offsetHeight / 10;
let baseShadowWidth = inputEditor.offsetWidth / 3.75;
let shadowWidthDiff = baseShadowWidth / 15;
let previousShadowTranslation = 0;
shadowEditors.forEach((shadowEditor, index) => {
const shadowEditorWrapper = document.createElement("div");
shadowEditorWrapper.classList.add("shadowEditorWrapper", "editorWrapper");
shadowEditor.parentElement.replaceWith(shadowEditorWrapper);
shadowEditorWrapper.appendChild(shadowEditor.parentElement);
let scaleValue = ((inputEditor.offsetHeight * 0.8) - (shadowHeightDiff * (index + 1))) / inputEditor.offsetHeight;
shadowEditor.parentElement.style.transform = `scale(${scaleValue})`;
let shadowWidth = baseShadowWidth - ((shadowWidthDiff * 2.5) * (index + 1));
shadowEditorWrapper.style.width = `${shadowWidth / 10.4}rch`; /* 16 * 0.65 */
previousShadowTranslation += shadowWidth + (2 * shadowWidthDiff);
shadowEditorWrapper.style.translate = `-${previousShadowTranslation / 10.4}rch`;
shadowEditorWrapper.style.opacity = baseShadowOpacity - index / 10;
shadowEditor.parentElement.style.filter = `blur(${Math.pow(baseShadowBlur, index + 1)}px)`;
shadowEditorWrapper.style.backgroundColor = `rgb(from white r g b / ${(2 - index)}%)`;
shadowEditorWrapper.getElementsByClassName('editorTab')[0].style.width = getComputedStyle(shadowEditor).width;
});
}
styleShadowEditors();
// Observer to update shadow editors
let observer = new MutationObserver(() => {
requestAnimationFrame(() => {
shadowEditors.forEach((shadowEditor) => {
shadowEditor.innerHTML = inputEditor.innerHTML;
});
});
});
observer.observe(inputEditor, {
childList: true,
subtree: true,
characterData: true
});
}
</script>
</article>
</section>
</main>
<article>
<section id="reducingBoilerplateCode">
<a href="#reducingBoilerplateCode">BUT WHY THOUGH?</a>
<p id="repeating-text">With nesting, you can <b>avoid repeating <span class="repeat">common styles</span></b> in multiple <span class="repeat">selectors</span>. This helps reduce the size of your code and makes any future modifications <span class="repeat">easier</span>.</p>
<h1 id="parallax-text"><span>Reducing</span><span>Boilerplate</span><span>Code</span></h1>
</section>
<section id="easierMaintenance">
<p id="merging-text"><span>Easier</span><span>Maintenance</span></p>
<p id="changing-text">By using CSS nesting, any style <s>chnages</s> <b>changes</b> can be implemented <s>better</s> <b>more efficiently</b>. It promotes readability, maintainability, <s>and</s> <b>&</b> modularity in your stylesheets.</p>
</section>
<section id="improvedCodeReadability">
<p id="background-text"><span>Improved</span><span>Code</span><span>Readability</span></p>
<p id="visible-text">Nesting makes your code easier to read and understand for both yourself and <u><b><span>o</span><span>t</span><span>h</span><span>e</span><span>r</span><span> </span><span>d</span><span>e</span><span>v</span><span>e</span><span>l</span><span>o</span><span>p</span><span>e</span><span>r</span><span>s</span></b></u>. It allows you to write cleaner, easier-to-read nested selectors, making code much <u><b><span>e</span><span>a</span><span>s</span><span>i</span><span>e</span><span>r</span><span> </span><span>t</span><span>o</span><span> </span><span>m</span><span>a</span><span>i</span><span>n</span><span>t</span><span>a</span><span>i</span><span>n</span></b></u> and increase development productivity.</p>
</section>
<section id="groupingStylesTogether">
<div id="grouped-text-wrapper"><p id="grouped-text"><span>Grouping</span><span>Styles</span><span>Together</span></p><p id="grouped-text"><span>Grouping</span><span>Styles</span><span>Together</span></p></div>
<div id="miniEditor">
<div id="lineNumbers">
</div>
<pre>
Nesting helps you to group
{TAB} related styles.
And write CSS in
{TAB} a nested hierarchy.
This means
{TAB} you don't have to
{TAB} {TAB} {BOLD} repeat the entire selector {/BOLD} again
{TAB} {TAB} when styling
{TAB} {TAB} {TAB} specific child elements
{TAB} {TAB} {TAB} or pseudo-selectors.
</pre>
</div>
<script>/* Not checked for performance */
let lineNumbers = document.getElementById('lineNumbers');
let lines = lineNumbers.nextElementSibling.textContent.split("\n");
lineNumbers.nextElementSibling.innerHTML = lines.map((item) => {
if (!item.trim()) return '<br>';
let line = item.trim().replace(/{TAB}/g, " ").replace(/{BOLD} /g, "<b>").replace(/ {\/BOLD}/g, "</b>");
let splitLine = line.split(/(  )+/);
let lineContent = splitLine[splitLine.length - 1];
// Only wrap non-tag characters in spans
line = line.slice(0, line.length - lineContent.length) + lineContent.split(/(<\/?b>)/).reduce((acc, part, index, arr) => acc + (part.match(/(<\/?b>)/) ? part : [...part].map((ch, i) => `<span style="--charIndex: ${arr.slice(0, index).filter((p) => !p.match(/(<\/?b>)/)).join("").length + i}">${ch}</span>`).join("")), "");
return `<div>${line}</div>`;
}).join("");
lineNumbers.innerHTML = lines.fill().map((item, i) => `<div>${i + 1}</div>`).join("");
/* Set active line */
function updateActiveLine() {
/* Vertical */
debounce(() => {
const segmentHeight = lineNumbers.parentElement.parentElement.offsetHeight / lines.length;
const activeLine = Math.ceil(window.cursorY / segmentHeight);
lineNumbers.nextElementSibling.style.setProperty('--activeLine', activeLine + '');
lineNumbers.nextElementSibling.style.setProperty('--maxLines', lines.length + '');
}, 250)();
/* Horizontal */
let horizontalPos = window.cursorX / document.body.clientWidth;
let padding = lineNumbers.nextElementSibling.offsetLeft / lineNumbers.parentElement.offsetWidth;
let horizontalRePos = ((1 - (padding * 2)) * horizontalPos) + padding;
lineNumbers.nextElementSibling.style.setProperty('--intensityPos', roundNumber(horizontalRePos * 100) + '%');
}
/* Animate Editor being built - First time */
function onFirstView(e) {
if (e.animationName != 'viewed') return;
lineNumbers.parentElement.classList.add('viewed');
lineNumbers.parentElement.removeEventListener("animationstart", onFirstView);
}
</script>
</section>
<section id="mechanicsOfNesting">
<a id="backToStart" href="#"></a>
<img id="nyss-cursor" src="../assets/images/nycss-cursor.webp">
<script>
function moveCursorBackground() {
let cursorElem = document.getElementById('nyss-cursor');
let cssBadge = document.getElementById('nycssBadge');
// Check if user is at the bottom
if (cssBadge.className == 'hover-animation') {
cursorElem.style.translate = `calc(${window.cursorX}px - 50%) calc(${window.cursorY}px - 50%)`;
}
}
</script>
<p id="splitting-text">Nesting in CSS allows you to define styles for child elements within the context of their parent element's style rule. This creates a hierarchy that <b>reflects your HTML structure</b> document, making your CSS code more intuitive and easier to manage.</p>
<script>
let splitText = document.getElementById('splitting-text');
function onFirstView(e) {
if (e.animationName != 'viewed') return;
splitText.classList.add('viewed');
splitText.removeEventListener("animationstart", onFirstView);
}
splitText.addEventListener("animationstart", onFirstView);
</script>
<hgroup id="nesting-text">
<h1><a href="#">Nest Your CSS</a></h1>
<p><a href="#">Click anywhere to...</a></p>
</hgroup>
<p id="streching-text"><span>M</span><span>e</span><span>c</span><span>h</span><span>a</span><span>n</span><span>i</span><span>c</span><span>s</span> <span>o</span><span>f</span> <span>N</span><span>e</span><span>s</span><span>t</span><span>i</span><span>n</span><span>g</span></p>
<button id="nycssLogoGroup" onclick="window.location.href='#'">
<img id="nycssLogo" hidden src="./assets/images/nycss-logo.webp" />
<img id="nycssBadge" class="main-animation" src="./assets/images/nycss-badge.webp" />
<img id="nycssNest" src="./assets/images/nycss-nest.webp" />
</button>
<script>
let cssBadge = document.getElementById('nycssBadge');
// Variable to keep track of the timer
let scrollTimer, hovered = false;
// Event listener for scroll events
function updateLogoState() {
if (scrollTimer) clearTimeout(scrollTimer);
const { pageYOffset, document: { documentElement: { scrollTop, scrollHeight, clientHeight } } } = window;
// Check if user is at the bottom
if ((pageYOffset || scrollTop) + clientHeight >= scrollHeight) {
cssBadge.className = 'hover-animation';
if (!hovered) moveCursorBackground(), hovered = true;
} else if (cssBadge.className != 'main-animation') {
cssBadge.className = 'main-animation';
if (hovered) moveCursorBackground(), hovered = false;
} else {
scrollTimer = setTimeout(() => {
if (cssBadge.className == 'main-animation') cssBadge.className = 'idle-animation';
}, 1000);
}
};
</script>
</section>
</article>
</div>
<script src="./scripts/main.js" type="text/javascript"></script>
<script src="./scripts/nesting.js" type="text/javascript"></script>
<script src="./scripts/handlers.js" type="text/javascript"></script>
<script src="./lib/mode-css.js"></script>
<script src="./lib/ace-linters.min.js"></script>
<script src="./lib/ext-searchbox.min.js"></script>
<!-- <script src="./scripts/ext-stickyscroll.js"></script> -->
<!-- <script src="./lib/ext-language_tools.min.js"></script> -->
<script>
let editorId = 'code-editor';
let sample;
sample = cssSamples[1];
// sample = cssSamples[21];
// sample = cssSamples.slice(0, 2).join('');
// sample = cssSamples.join('');
const provider = LanguageProvider.fromCdn("https://www.unpkg.com/[email protected]/build/");
window.inputEditor = initializeEditor("inputEditor", sample || '/* Your input CSS should go here */');
window.outputEditor = initializeEditor("outputEditor", '/* Your output CSS will appear here */');
// Auto Nest
let codeChanged = false;
let isProcessing = false;
inputEditor.getSession().on('change', () => codeChanged = true);
inputEditor.getSession().on('changeAnnotation', () => {
if (!isProcessing) {
isProcessing = true;
setTimeout(() => {
if (codeChanged) {
nestCode();
codeChanged = false;
}
isProcessing = false;
}, 0);
}
});
function initializeEditor(editorId, value) {
const editor = ace.edit(editorId, {
mode: "ace/mode/css",
showPrintMargin: false
});
editor.setValue(value, -1);
provider.registerEditor(editor);
editor.renderer.on('afterRender', () => {
editor.container.getElementsByClassName('ace_scrollbar-h')[0].style.setProperty('--gutter-width', editor.container.getElementsByClassName('ace_gutter')[0].style.width);
});
return editor;
}
setupEditors(inputEditor.container);
</script>
</body>
</html>