/* <meta charset="UTF-8" /> */
/* <meta name="viewport" content="width=device-width" /> */
/* <meta name="color-scheme" content="dark light" /> */
/* <meta name="description" content="An HTML file that is also its own CSS and JavaScript." /> */
/* <link rel="icon" href="./assets/icon.svg" /> */
/* <link rel="aster:icon-dark" href="./assets/icon-dark.svg" /> */
/* <meta name="author" content="Benjamin Aster" /> */
/* <link rel="code-repository" href="https://github.com/BenjaminAster/Self-Loading-HTML" /> */

/* <link rel="stylesheet" href="." type="text/css" /> */
/* <script src="." type="application/javascript"></script> */

/* <title>Self-loading HTML</title> */

{ ` } /* <!-- */
	body {
		font-family: system-ui;
	}

	code {
		background-color: #8883;
		padding-inline: .3em;
		border: 1px solid #8886;
		border-radius: 0.2em;
	}
/* --> */ { ` }

/* </head> */

/*
<main>
	<h2>Self-loading HTML</h2>

	<p>
		The CSS and JavaScript of this page are the page itself. 
		This means that the HTML file is also the CSS file and the JavaScript file, all in one.
	</p>
	<p>
		A <code>&lt;link rel="stylesheet" href="." /&gt;</code> and a <code>&lt;script src="."&gt;&lt;/script&gt;</code> are used to load the CSS and JavaScript.
	</p>
</main> 
*/

// /* <!--

window.addEventListener("load", (evt) => {
	[...document.body.childNodes].filter(({nodeName}) => nodeName === "#text").forEach((node) => node.remove());
});

document.head.append(document.querySelector("link[rel=icon]"));

// */ -->