Add basic website for github pages

index.html

@@ -0,0 +1,33 @@
+<link rel="stylesheet" href="page/style.css">
+
+<h1>DarkWiiPlayer/JS</h1>
+<p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p>
+
+<p>Note: <b>This website is still work in progress!</b></p>
+
+<section>
+	<h2>Skooma.js</h2>
+
+	<p>
+		Skooma lets you <strong>generate DOM nodes in JavaScript</strong>.
+	</p>
+
+	<p>
+		<h3 class="all-unset"><b>Code Sample</b>:</h3>
+		<pre><code>
+import {html} from 'skooma.js'
+
+let div = html.div([
+	html.h1('Hello, World!'),
+	html.p('Here is some text', {class: ["class_a", "class_b"]})
+	html.button("Click Me!", { click: event => console.log(event) })
+])
+		</code></pre>
+	</p>
+
+	<a class="button" href="page/skooma.html">Read more</a>
+</section>
+
+<section>
+	<h2>Listener</h2>
+</section>

page/skooma.html

@@ -0,0 +1,20 @@
+<link rel="stylesheet" href="style.css">
+
+<h1>Skooma.js</h1>
+
+<section>
+	<h2>Introduction & Scope</h2>
+	<p>
+		Skooma.js is a library for generating DOM nodes within JavaScript.
+	</p>
+
+	<h3>What are the benefits of Skooma?</h3>
+	<p>
+		Skooma is only a small ES6 module that uses meta-programming to
+		turn JavaScript into a <span title="Domain-Specific Language">DSL</span>
+		that generates HTML and XML subtrees.
+		<br>
+		This means you're writing plain JavaScript code that needs no additional
+		transpilation steps and runs directly in the browser.
+	</p>
+</section>

page/style.css

@@ -0,0 +1,75 @@
+:root {
+	font-family: sans-serif;
+	--color-bg: white;
+	--color-fg: #222;
+	--color-ac: #fbb;
+	--color-hl: #f64;
+
+	--line-mid: .14rem;
+	--line-thick: .2rem;
+}
+
+* {
+	box-sizing: border-box;
+	color: var(--color-fg);
+}
+
+body {
+	background: var(--color-bg);
+
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+	padding: 1em 2em;
+}
+
+body>section {
+	width: 100%;
+	max-width: 60em;
+}
+
+h2 {
+	padding: 0 1em 0 .2em;
+	width: max-content;
+	border-bottom: .1em solid var(--color-ac);
+}
+
+em {
+	font-style: normal;
+	font-weight: bold;
+}
+
+.button {
+	--color-primary: var(--color-hl);
+	--color-secondary: var(--color-bg);
+	display: inline-block;
+	transition: all .3s;
+	cursor: pointer;
+	border-radius: .3em;
+	border: var(--line-mid) var(--color-primary) solid;
+	padding: .2em .6em;
+	text-decoration: none;
+	color: var(--color-primary);
+	font-weight: bold;
+}
+
+.button:hover {
+	color: var(--color-secondary);
+	background-color: var(--color-primary);
+	text-shadow: .2em .3em .2em #0004;
+}
+
+pre>code {
+	display: block;
+	border-left: dashed var(--line-mid) var(--color-ac);
+	padding-left: 1.6em;
+}
+
+span[title] {
+	cursor: help;
+	border-bottom: dotted currentcolor .16em;
+}
+
+.all-unset {
+	all: unset;
+}