PageSourceSearch

https://functionalmetatable.github.io/blog/

html functionalmetatable.github.io collected 2026-10-03 09:13:03 UTC 25,435 bytes, 1,013 lines download raw bytes

1<!doctype html>
2<html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
3  <head >
4    <title>FunctionalMetatable</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content=""><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn2.scratch.mit.edu/get_image/user/71379194_100x100.png"><link rel="preload" href="/_nuxt/dfbd691.js" as="script"><link rel="preload" href="/_nuxt/3edf289.js" as="script"><link rel="preload" href="/_nuxt/3c20130.js" as="script"><link rel="preload" href="/_nuxt/fe9c2b4.js" as="script"><link rel="preload" href="/_nuxt/ca184f1.js" as="script"><style data-vue-ssr-id="54b08540:0 0d8b0c4d:0 a57b151a:0 1239d49d:0 1239d49d:1 1239d49d:2 d1f362de:0">/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com*/
5
6/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
7
8/*
9Document
10========
11*/
12
13/**
14Use a better box model (opinionated).
15*/
16
17*,
18::before,
19::after {
20  box-sizing: border-box;
21}
22
23/**
24Use a more readable tab size (opinionated).
25*/
26
27html {
28  -moz-tab-size: 4;
29  -o-tab-size: 4;
30     tab-size: 4;
31}
32
33/**
341. Correct the line height in all browsers.
352. Prevent adjustments of font size after orientation changes in iOS.
36*/
37
38html {
39  line-height: 1.15; /* 1 */
40  -webkit-text-size-adjust: 100%; /* 2 */
41}
42
43/*
44Sections
45========
46*/
47
48/**
49Remove the margin in all browsers.
50*/
51
52body {
53  margin: 0;
54}
55
56/**
57Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
58*/
59
60body {
61  font-family:
62		system-ui,
63		-apple-system, /* Firefox supports this but not yet `system-ui` */
64		'Segoe UI',
65		Roboto,
66		Helvetica,
67		Arial,
68		sans-serif,
69		'Apple Color Emoji',
70		'Segoe UI Emoji';
71}
72
73/*
74Grouping content
75================
76*/
77
78/**
791. Add the correct height in Firefox.
802. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
81*/
82
83hr {
84  height: 0; /* 1 */
85  color: inherit; /* 2 */
86}
87
88/*
89Text-level semantics
90====================
91*/
92
93/**
94Add the correct text decoration in Chrome, Edge, and Safari.
95*/
96
97abbr[title] {
98  -webkit-text-decoration: underline dotted;
99          text-decoration: underline dotted;
100}
101
102/**
103Add the correct font weight in Edge and Safari.
104*/
105
106b,
107strong {
108  font-weight: bolder;
109}
110
111/**
1121. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
1132. Correct the odd 'em' font sizing in all browsers.
114*/
115
116code,
117kbd,
118samp,
119pre {
120  font-family:
121		ui-monospace,
122		SFMono-Regular,
123		Consolas,
124		'Liberation Mono',
125		Menlo,
126		monospace; /* 1 */
127  font-size: 1em; /* 2 */
128}
129
130/**
131Add the correct font size in all browsers.
132*/
133
134small {
135  font-size: 80%;
136}
137
138/**
139Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
140*/
141
142sub,
143sup {
144  font-size: 75%;
145  line-height: 0;
146  position: relative;
147  vertical-align: baseline;
148}
149
150sub {
151  bottom: -0.25em;
152}
153
154sup {
155  top: -0.5em;
156}
157
158/*
159Tabular data
160============
161*/
162
163/**
1641. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
1652. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
166*/
167
168table {
169  text-indent: 0; /* 1 */
170  border-color: inherit; /* 2 */
171}
172
173/*
174Forms
175=====
176*/
177
178/**
1791. Change the font styles in all browsers.
1802. Remove the margin in Firefox and Safari.
181*/
182
183button,
184input,
185optgroup,
186select,
187textarea {
188  font-family: inherit; /* 1 */
189  font-size: 100%; /* 1 */
190  line-height: 1.15; /* 1 */
191  margin: 0; /* 2 */
192}
193
194/**
195Remove the inheritance of text transform in Edge and Firefox.
1961. Remove the inheritance of text transform in Firefox.
197*/
198
199button,
200select { /* 1 */
201  text-transform: none;
202}
203
204/**
205Correct the inability to style clickable types in iOS and Safari.
206*/
207
208button,
209[type='button'] {
210  -webkit-appearance: button;
211}
212
213/**
214Remove the inner border and padding in Firefox.
215*/
216
217/**
218Restore the focus styles unset by the previous rule.
219*/
220
221/**
222Remove the additional ':invalid' styles in Firefox.
223See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
224*/
225
226/**
227Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
228*/
229
230legend {
231  padding: 0;
232}
233
234/**
235Add the correct vertical alignment in Chrome and Firefox.
236*/
237
238progress {
239  vertical-align: baseline;
240}
241
242/**
243Correct the cursor style of increment and decrement buttons in Safari.
244*/
245
246/**
2471. Correct the odd appearance in Chrome and Safari.
2482. Correct the outline style in Safari.
249*/
250
251/**
252Remove the inner padding in Chrome and Safari on macOS.
253*/
254
255/**
2561. Correct the inability to style clickable types in iOS and Safari.
2572. Change font properties to 'inherit' in Safari.
258*/
259
260/*
261Interactive
262===========
263*/
264
265/*
266Add the correct display in Chrome and Safari.
267*/
268
269summary {
270  display: list-item;
271}
272
273/**
274 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
275 * A thin layer on top of normalize.css that provides a starting point more
276 * suitable for web applications.
277 */
278
279/**
280 * Removes the default spacing and border for appropriate elements.
281 */
282
283blockquote,
284dl,
285dd,
286h1,
287h2,
288h3,
289h4,
290h5,
291h6,
292hr,
293figure,
294p,
295pre {
296  margin: 0;
297}
298
299button {
300  background-color: transparent;
301  background-image: none;
302}
303
304fieldset {
305  margin: 0;
306  padding: 0;
307}
308
309ol,
310ul {
311  list-style: none;
312  margin: 0;
313  padding: 0;
314}
315
316/**
317 * Tailwind custom reset styles
318 */
319
320/**
321 * 1. Use the user's configured `sans` font-family (with Tailwind's default
322 *    sans-serif font stack as a fallback) as a sane default.
323 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
324 *    to override it to ensure consistency even when using the default theme.
325 */
326
327html {
328  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
329  line-height: 1.5; /* 2 */
330}
331
332/**
333 * Inherit font-family and line-height from `html` so users can set them as
334 * a class directly on the `html` element.
335 */
336
337body {
338  font-family: inherit;
339  line-height: inherit;
340}
341
342/**
343 * 1. Prevent padding and border from affecting element width.
344 *
345 *    We used to set this in the html element and inherit from
346 *    the parent element for everything else. This caused issues
347 *    in shadow-dom-enhanced elements like <details> where the content
348 *    is wrapped by a div with box-sizing set to `content-box`.
349 *
350 *    https://github.com/mozdevs/cssremedy/issues/4
351 *
352 *
353 * 2. Allow adding a border to an element by just adding a border-width.
354 *
355 *    By default, the way the browser specifies that an element should have no
356 *    border is by setting it's border-style to `none` in the user-agent
357 *    stylesheet.
358 *
359 *    In order to easily add borders to elements by just setting the `border-width`
360 *    property, we change the default border-style for all elements to `solid`, and
361 *    use border-width to hide them instead. This way our `border` utilities only
362 *    need to set the `border-width` property instead of the entire `border`
363 *    shorthand, making our border utilities much more straightforward to compose.
364 *
365 *    https://github.com/tailwindcss/tailwindcss/pull/116
366 */
367
368*,
369::before,
370::after {
371  box-sizing: border-box; /* 1 */
372  border-width: 0; /* 2 */
373  border-style: solid; /* 2 */
374  border-color: currentColor; /* 2 */
375}
376
377/*
378 * Ensure horizontal rules are visible by default
379 */
380
381hr {
382  border-top-width: 1px;
383}
384
385/**
386 * Undo the `border-style: none` reset that Normalize applies to images so that
387 * our `border-{width}` utilities have the expected effect.
388 *
389 * The Normalize reset is unnecessary for us since we default the border-width
390 * to 0 on all elements.
391 *
392 * https://github.com/tailwindcss/tailwindcss/issues/362
393 */
394
395img {
396  border-style: solid;
397}
398
399textarea {
400  resize: vertical;
401}
402
403input::-moz-placeholder, textarea::-moz-placeholder {
404  opacity: 1;
405  color: #9ca3af;
406}
407
408input:-ms-input-placeholder, textarea:-ms-input-placeholder {
409  opacity: 1;
410  color: #9ca3af;
411}
412
413input::placeholder,
414textarea::placeholder {
415  opacity: 1;
416  color: #9ca3af;
417}
418
419button {
420  cursor: pointer;
421}
422
423table {
424  border-collapse: collapse;
425}
426
427h1,
428h2,
429h3,
430h4,
431h5,
432h6 {
433  font-size: inherit;
434  font-weight: inherit;
435}
436
437/**
438 * Reset links to optimize for opt-in styling instead of
439 * opt-out.
440 */
441
442a {
443  color: inherit;
444  text-decoration: inherit;
445}
446
447/**
448 * Reset form element properties that are easy to forget to
449 * style explicitly so you don't inadvertently introduce
450 * styles that deviate from your design system. These styles
451 * supplement a partial reset that is already applied by
452 * normalize.css.
453 */
454
455button,
456input,
457optgroup,
458select,
459textarea {
460  padding: 0;
461  line-height: inherit;
462  color: inherit;
463}
464
465/**
466 * Use the configured 'mono' font family for elements that
467 * are expected to be rendered with a monospace font, falling
468 * back to the system monospace stack if there is no configured
469 * 'mono' font family.
470 */
471
472pre,
473code,
474kbd,
475samp {
476  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
477}
478
479/**
480 * 1. Make replaced elements `display: block` by default as that's
481 *    the behavior you want almost all of the time. Inspired by
482 *    CSS Remedy, with `svg` added as well.
483 *
484 *    https://github.com/mozdevs/cssremedy/issues/14
485 * 
486 * 2. Add `vertical-align: middle` to align replaced elements more
487 *    sensibly by default when overriding `display` by adding a
488 *    utility like `inline`.
489 *
490 *    This can trigger a poorly considered linting error in some
491 *    tools but is included by design.
492 * 
493 *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
494 */
495
496img,
497svg,
498video,
499canvas,
500audio,
501iframe,
502embed,
503object {
504  display: block; /* 1 */
505  vertical-align: middle; /* 2 */
506}
507
508/**
509 * Constrain images and videos to the parent width and preserve
510 * their intrinsic aspect ratio.
511 *
512 * https://github.com/mozdevs/cssremedy/issues/14
513 */
514
515img,
516video {
517  max-width: 100%;
518  height: auto;
519}
520
521*, ::before, ::after{
522  --tw-border-opacity:1;
523  border-color:rgba(229, 231, 235, var(--tw-border-opacity));
524}
525
526.static{
527  position:static;
528}
529
530.sticky{
531  position:sticky;
532}
533
534.m-0{
535  margin:0px;
536}
537
538.m-8{
539  margin:2rem;
540}
541
542.m-10{
543  margin:2.5rem;
544}
545
546.mt-2{
547  margin-top:0.5rem;
548}
549
550.ml-10{
551  margin-left:2.5rem;
552}
553
554.ml-28{
555  margin-left:7rem;
556}
557
558.block{
559  display:block;
560}
561
562.inline-block{
563  display:inline-block;
564}
565
566.flex{
567  display:flex;
568}
569
570.table{
571  display:table;
572}
573
574.grid{
575  display:grid;
576}
577
578.w-96{
579  width:24rem;
580}
581
582.w-full{
583  width:100%;
584}
585
586.transform{
587  --tw-translate-x:0;
588  --tw-translate-y:0;
589  --tw-rotate:0;
590  --tw-skew-x:0;
591  --tw-skew-y:0;
592  --tw-scale-x:1;
593  --tw-scale-y:1;
594  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
595}
596
597@-webkit-keyframes spin{
598  to{
599    transform:rotate(360deg);
600  }
601}
602
603@keyframes spin{
604  to{
605    transform:rotate(360deg);
606  }
607}
608
609@-webkit-keyframes ping{
610  75%, 100%{
611    transform:scale(2);
612    opacity:0;
613  }
614}
615
616@keyframes ping{
617  75%, 100%{
618    transform:scale(2);
619    opacity:0;
620  }
621}
622
623@-webkit-keyframes pulse{
624  50%{
625    opacity:.5;
626  }
627}
628
629@keyframes pulse{
630  50%{
631    opacity:.5;
632  }
633}
634
635@-webkit-keyframes bounce{
636  0%, 100%{
637    transform:translateY(-25%);
638    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
639            animation-timing-function:cubic-bezier(0.8,0,1,1);
640  }
641
642  50%{
643    transform:none;
644    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
645            animation-timing-function:cubic-bezier(0,0,0.2,1);
646  }
647}
648
649@keyframes bounce{
650  0%, 100%{
651    transform:translateY(-25%);
652    -webkit-animation-timing-function:cubic-bezier(0.8,0,1,1);
653            animation-timing-function:cubic-bezier(0.8,0,1,1);
654  }
655
656  50%{
657    transform:none;
658    -webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);
659            animation-timing-function:cubic-bezier(0,0,0.2,1);
660  }
661}
662
663.cursor-pointer{
664  cursor:pointer;
665}
666
667.resize{
668  resize:both;
669}
670
671.flex-row{
672  flex-direction:row;
673}
674
675.rounded{
676  border-radius:0.25rem;
677}
678
679.rounded-full{
680  border-radius:9999px;
681}
682
683.border-2{
684  border-width:2px;
685}
686
687.border-blue-700{
688  --tw-border-opacity:1;
689  border-color:rgba(29, 78, 216, var(--tw-border-opacity));
690}
691
692.bg-blue-100{
693  --tw-bg-opacity:1;
694  background-color:rgba(219, 234, 254, var(--tw-bg-opacity));
695}
696
697.bg-blue-800{
698  --tw-bg-opacity:1;
699  background-color:rgba(30, 64, 175, var(--tw-bg-opacity));
700}
701
702.hover\:bg-blue-500:hover{
703  --tw-bg-opacity:1;
704  background-color:rgba(59, 130, 246, var(--tw-bg-opacity));
705}
706
707.p-8{
708  padding:2rem;
709}
710
711.p-10{
712  padding:2.5rem;
713}
714
715.px-5{
716  padding-left:1.25rem;
717  padding-right:1.25rem;
718}
719
720.py-2{
721  padding-top:0.5rem;
722  padding-bottom:0.5rem;
723}
724
725.text-base{
726  font-size:1rem;
727  line-height:1.5rem;
728}
729
730.text-xl{
731  font-size:1.25rem;
732  line-height:1.75rem;
733}
734
735.text-2xl{
736  font-size:1.5rem;
737  line-height:2rem;
738}
739
740.text-3xl{
741  font-size:1.875rem;
742  line-height:2.25rem;
743}
744
745.text-4xl{
746  font-size:2.25rem;
747  line-height:2.5rem;
748}
749
750.text-5xl{
751  font-size:3rem;
752  line-height:1;
753}
754
755.text-6xl{
756  font-size:3.75rem;
757  line-height:1;
758}
759
760.font-semibold{
761  font-weight:600;
762}
763
764.font-bold{
765  font-weight:700;
766}
767
768.leading-8{
769  line-height:2rem;
770}
771
772.text-gray-100{
773  --tw-text-opacity:1;
774  color:rgba(243, 244, 246, var(--tw-text-opacity));
775}
776
777.text-gray-500{
778  --tw-text-opacity:1;
779  color:rgba(107, 114, 128, var(--tw-text-opacity));
780}
781
782.text-blue-700{
783  --tw-text-opacity:1;
784  color:rgba(29, 78, 216, var(--tw-text-opacity));
785}
786
787.text-blue-800{
788  --tw-text-opacity:1;
789  color:rgba(30, 64, 175, var(--tw-text-opacity));
790}
791
792.text-purple-50{
793  --tw-text-opacity:1;
794  color:rgba(245, 243, 255, var(--tw-text-opacity));
795}
796
797.hover\:text-gray-200:hover{
798  --tw-text-opacity:1;
799  color:rgba(229, 231, 235, var(--tw-text-opacity));
800}
801
802*, ::before, ::after{
803  --tw-shadow:0 0 #0000;
804}
805
806.shadow-md{
807  --tw-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
808  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-sha
808dow);
809}
810
811.shadow-lg{
812  --tw-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
813  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
814}
815
816.shadow-xl{
817  --tw-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
818  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
819}
820
821.shadow-2xl{
822  --tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);
823  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
824}
825
826*, ::before, ::after{
827  --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
828  --tw-ring-offset-width:0px;
829  --tw-ring-offset-color:#fff;
830  --tw-ring-color:rgba(59, 130, 246, 0.5);
831  --tw-ring-offset-shadow:0 0 #0000;
832  --tw-ring-shadow:0 0 #0000;
833}
834
835.duration-500{
836  transition-duration:500ms;
837}
838
839@media (min-width: 640px){
840  .sm\:text-4xl{
841    font-size:2.25rem;
842    line-height:2.5rem;
843  }
844}
845
846@media (min-width: 768px){
847  .md\:flex-auto{
848    flex:1 1 auto;
849  }
850
851  .md\:flex-row-reverse{
852    flex-direction:row-reverse;
853  }
854}
855
856@media (min-width: 1024px){
857}
858
859@media (min-width: 1280px){
860}
861
862@media (min-width: 1536px){
863}
864code[class*=language-],pre[class*=language-]{
865  color:#000;
866  background:none;
867  text-shadow:0 1px #fff;
868  font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
869  font-size:1em;
870  text-align:left;
871  white-space:pre;
872  word-spacing:normal;
873  word-break:normal;
874  word-wrap:normal;
875  line-height:1.5;
876  -moz-tab-size:4;
877  -o-tab-size:4;
878  tab-size:4;
879  -webkit-hyphens:none;
880  -ms-hyphens:none;
881  hyphens:none
882}
883
884code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{
885  text-shadow:none;
886  background:#b3d4fc
887}
888
889code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection, pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection{
890  text-shadow:none;
891  background:#b3d4fc
892}
893
894code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{
895  text-shadow:none;
896  background:#b3d4fc
897}
898
899@media print{
900  code[class*=language-],pre[class*=language-]{
901    text-shadow:none
902  }
903}
904
905pre[class*=language-]{
906  padding:1em;
907  margin:.5em 0;
908  overflow:auto
909}
910
911:not(pre)>code[class*=language-],pre[class*=language-]{
912  background:#f5f2f0
913}
914
915:not(pre)>code[class*=language-]{
916  padding:.1em;
917  border-radius:.3em;
918  white-space:normal
919}
920
921.token.cdata,.token.comment,.token.doctype,.token.prolog{
922  color:#708090
923}
924
925.token.punctuation{
926  color:#999
927}
928
929.token.namespace{
930  opacity:.7
931}
932
933.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{
934  color:#905
935}
936
937.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{
938  color:#690
939}
940
941.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{
942  color:#9a6e3a;
943  background:hsla(0,0%,100%,.5)
944}
945
946.token.atrule,.token.attr-value,.token.keyword{
947  color:#07a
948}
949
950.token.class-name,.token.function{
951  color:#dd4a68
952}
953
954.token.important,.token.regex,.token.variable{
955  color:#e90
956}
957
958.token.bold,.token.important{
959  font-weight:700
960}
961
962.token.italic{
963  font-style:italic
964}
965
966.token.entity{
967  cursor:help
968}
969.nuxt-progress{
970  position:fixed;
971  top:0;
972  left:0;
973  right:0;
974  height:2px;
975  width:0;
976  opacity:1;
977  transition:width .1s,opacity .4s;
978  background-color:#000;
979  z-index:999999
980}
981.nuxt-progress.nuxt-progress-notransition{
982  transition:none
983}
984.nuxt-progress-failed{
985  background-color:red
986}
987@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
988@import url(https://fonts.googleapis.com/css2?family=Open+Sans&display=swap);
989body{
990  margin:0
991}
992.jumbotron-text-center *{
993  float:center
994}
995#content{
996  margin-left:10%
997}
998.icons[data-v-0e5d9344]{
999  text-align:right
1000}</style><link rel="preload" href="/_nuxt/static/1626116362/blog/state.js" as="script"><link rel="preload" href="/_nuxt/static/1626116362/blog/payload.js" as="script"><link rel="preload" href="/_nuxt/static/1626116362/manifest.js" as="script">
1001  </head>
1002  <body >
1003    <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><div class="nav"><div class="shadow-md bg-blue-800 flex"><div><div class="ease duration-500 inline-block text-gray-100 py-2 px-5 hover:text-gray-200 hover:text-underline hover:bg-blue-500"><a href="/" class="nuxt-link-active">
1004        Home
1005      </a></div></div><div><div class="ease duration-500 inline-block text-gray-100 py-2 px-5 hover:text-gray-200 hover:text-underline hover:bg-blue-500"><a href="/blog" aria-current="page" class="nuxt-link-exact-active nuxt-link-active">
1006        Blog
1007      </a></div></div><div><div class="ease duration-500 inline-block text-gray-100 py-2 px-5 hover:text-gray-200 hover:text-underline hover:bg-blue-500"><a href="/projects">
1008        Projects
1009      </a></div></div></div></div> <div class="main"><div class="flex"><div class="blog-post-card p-8 m-8 w-96 border-2 border-blue-700 shadow-lg cursor-pointer"><a href="/blog/Hello-World"><p class="text-3xl">Hello World!</p> <p class="text-base">My first blog post</p></a></div></div></div> <div class="footer"><div class="shadow-3xl bg-blue-800" data-v-0e5d9344><div class="m-0" data-v-0e5d9344><div class="bottom p-10" data-v-0e5d9344><p class="text-purple-50" data-v-0e5d9344>
1010        Copyright © FunctionalMetatable 2021. All Rights Reserved unless noted.
1011        <br data-v-0e5d9344> <br data-v-0e5d9344></p><div class="md:flex-auto md:flex-row-reverse mt-2 flex-row flex icons align-right" data-v-0e5d9344><a href="https://github.com/FunctionalMetatable" data-v-0e5d9344><svg height="30" viewBox="0 0 16 16" version="1.1" width="30" fill="#E5E7ED" data-v-0e5d9344><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" data-v-0e5d9344></path></svg></a> <a href="https://scratch.mit.edu/users/9gr" data-v-0e5d9344><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0,0,54.81885,81.9421" data-v-0e5d9344><g transform="translate(-213,-139.9999)" data-v-0e5d9344><g data-paper-data="{"isPaintingLayer":true}" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray stroke-dashoffset="0" style="mix-blend-mode: normal" data-v-0e5d9344><path d="M266.78,199.432c-3.23,8.95 -12.01,14.39 -26.09,16.17c-0.64,0.08 -1.27,0.13 -1.9,0.15c-0.82,1.2 -1.89,2.24 -3.15,3.05c-3.3,2.11 -6.39,3.14 -9.44,3.14c-6.27,0 -13.02,-4.68 -13.02,-14.96c0,-0.7 0.03,-1.61 0.1,-2.87c0.03,-0.54 0.06,-0.96 0.07,-1.27c-0.17,-0.78 -0.26,-1.57 -0.26,-2.37v-4.84c0,-0.79 0.08,-1.58 0.24,-2.37c0.01,-0.67 0.04,-1.42 0.09,-2.24c-0.24,-0.88 -0.42,-1.9 -0.42,-3.04c0,-0.52 0.04,-1.04 0.11,-1.55c0.38,-2.68 
10111.57,-5.37 3.58,-7.52c-0.69,-1.93 -1.05,-3.97 -1.05,-6.06v-5.1c0,-2.07 0.41,-4.65 2.42,-11.07c0.84,-2.76 1.11,-3.62 1.48,-4.42c1.97,-4.42 4.94,-6.63 7.1,-7.72c3.53,-1.76 7.32,-2.66 11.26,-2.66c1.82,0 3.56,0.19 5.22,0.55c0.74,-0.5 1.53,-0.92 2.37,-1.27c1.07,-0.46 2.21,-0.78 3.47,-0.98c3.15,-0.54 6.48,0.13 9.38,1.89c3.05,1.86 6.55,5.72 6.12,13.66c-0.07,1.4 -0.19,3.27 -0.37,5.71c-0.01,0.06 -0.01,0.12 -0.02,0.18c-0.16,1.77 -0.39,4.41 -0.7,7.9c0.08,1.35 0.05,2.86 -0.07,4.64c-0.05,0.68 -0.16,1.36 -0.34,2.02c-0.04,0.15 -0.08,0.29 -0.12,0.42c1.35,1.73 2.27,3.46 2.9,4.96c0.59,1.19 1.09,2.56 1.53,4.23c0.17,0.63 0.28,1.27 0.33,1.92c0.45,5.61 0.22,8.92 -0.82,11.72z" fill="#e5e7ed" data-v-0e5d9344></path> <path d="M256.636,188.596c0.293,3.637 0.233,5.981 -0.176,7.037c-1.702,4.809 -7.42,7.828 -17.152,9.06c-3.285,0.411 -6.568,-1.143 -9.853,-4.662c0,0.528 0.117,2.111 0.353,4.751c0.176,1.935 0.146,3.518 -0.088,4.749c-1.467,0.938 -2.639,1.408 -3.519,1.408c-1.35,0 -2.023,-1.319 -2.023,-3.959c0,-0.469 0.029,-1.216 0.088,-2.242c0.058,-1.025 0.088,-1.744 0.088,-2.155c0,-0.997 -0.088,-1.7 -0.264,-2.111v-4.838c0,-0.117 0.029,-0.249 0.088,-0.396c0.058,-0.146 0.117,-0.278 0.176,-0.396c-0.059,-0.82 -0.03,-2.081 0.088,-3.782c0.117,-1.056 0.117,-1.729 0,-2.023c-0.294,-0.585 -0.439,-0.937 -0.439,-1.055c0.233,-1.642 1.437,-2.463 3.606,-2.463c1.407,0 2.257,0.499 2.551,1.495c0,0.938 0.117,2.317 0.352,4.134c0.353,2.111 1.466,4.223 3.343,6.333c2.052,2.405 4.016,3.519 5.894,3.343c2.111,-0.233 4.222,-0.732 6.333,-1.495c2.932,-1.056 4.691,-2.287 5.278,-3.694c0.409,-1.056 0.615,-2.169 0.615,-3.343c0,-3.576 -1.319,-6.245 -3.958,-8.004c-1.174,-0.762 -3.343,-1.378 -6.51,-1.848c-1.818,-0.233 -2.933,-0.352 -3.342,-0.352c-2.815,0.059 -5.44,-0.85 -7.873,-2.727c-2.434,-1.876 -3.65,-4.047 -3.65,-6.51v-5.101c0,-1.113 0.645,-3.723 1.936,-7.828c0.585,-1.936 0.908,-2.961 0.968,-3.079c0.527,-1.231 1.201,-2.052 2.022,-2.463c1.993,-0.996 4.104,-1.495 6.333,-1.495c4.339,0 7.535,1.759 9.588,5.277c0.176,0.176 0.469,0.44 0.88,0.792c0.058,-0.82 0.176,-2.081 0.352,-3.782c-0.059,-0.762 -0.118,-1.495 -0.176,-2.199c0,-0.82 0.409,-1.377 1.231,-1.671c0.234,-0.117 0.557,-0.205 0.968,-0.264c0.586,-0.117 1.217,0.03 1.892,0.439c0.673,0.411 0.952,1.643 0.835,3.694c-0.059,1.29 -0.176,3.108 -0.352,5.453c-0.176,1.936 -0.439,4.897 -0.792,8.885c0.117,0.938 0.117,2.229 0,3.87c-0.294,1.114 -1.174,1.671 -2.639,1.671c-0.763,0 -1.495,-0.205 -2.199,-0.615c-0.352,-1.113 -0.527,-1.584 -0.527,-1.408c0.116,-1.583 -0.206,-3.694 -0.968,-6.333c-0.646,-1.348 -1.539,-3.268 -2.683,-5.761c-1.144,-2.492 -2.654,-3.827 -4.53,-4.003c-2.346,-0.176 -3.87,0.616 -4.574,2.375c-0.234,0.763 -0.558,1.878 -0.967,3.343c-0.704,2.17 -1.144,4.252 -1.32,6.245c-0.059,0.646 -0.118,0.91 -0.176,0.792c0.176,1.174 0.381,2.346 0.616,3.519c0.293,1.466 1.012,2.581 2.155,3.342c1.144,0.763 3.327,1.231 6.553,1.407c7.916,0.471 12.812,3.227 14.689,8.269c0.292,0.47 0.585,1.261 0.879,2.374z" fill="#1e40af" data-v-0e5d9344></path></g></g></svg></a></div> <p data-v-0e5d9344></p></div></div></div></div></div></div></div>
1011<script defer src="/_nuxt/static/1626116362/blog/state.js"></script>
1011<script src="/_nuxt/dfbd691.js" defer></script>
1011<script src="/_nuxt/ca184f1.js" defer></script>
1011<script src="/_nuxt/3edf289.js" defer></script>
1011<script src="/_nuxt/3c20130.js" defer></script>
1011<script src="/_nuxt/fe9c2b4.js" defer></script>
1011
1012  </body>
1013</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.